Create Hosted Search Pages
Create Hosted Search Pages
Creating a classic hosted search page that taps into the content you have indexed is the centerpiece of the Coveo implementation. Later, you will insert the Coveo Hosted Search Page component in a web page.
Coveo Organization Setup
Before beginning your Coveo search solution development, you need to set up your environment.
The content in this section assumes your developers will collaborate on search pages in a Coveo sandbox organization (which should be a part of your User Acceptance Testing (UAT) environment). This setup ensures optimal team productivity and access to representative indexed data, while limiting the extent to which the developers can access and modify content and configurations in the sandbox organization.
Preliminary setup steps below are specifically assigned to a lead developer or administrator having administrator privileges in the sandbox organization (and hereafter referred to as the Administrator).
Step 1: Creating a Group in Your Coveo Sandbox Organization (Administrator)
The setup begins with creating a group in your Coveo sandbox organization for your search page developers. This step also includes assigning the required privileges at the group level.
In the Configuration tab, provide a Group name.
In the Privileges tab, grant the following access levels:
Domain Resource Access level
Click Add group.
Step 2: Adding Members to the Group (Administrator)
Select the Members tab.
In the Members tab, under Additional members, click Invite Member.
Invite members.Leading practice
Select Send an email notification when inviting members. The invitation email contains a link that the added member may use to log in to your Coveo sandbox organization.
When you’re done inviting members, click Save.
Building Hosted Search Pages
After the initial search page setup, you can access and further customize your search page using the Interface Editor. By default, the Interface Editor opens in the UI View. Modifications to the search page in the UI View generate HTML markup in the background. To fine-tune that markup or to leverage JS Search Framework components not supported by the UI View, use the Code View.
(Optional) Customizing the Search Page Styling
Hosted search pages apply a JS Search Framework stylesheet but organizations usually want to style a hosted search page to blend in with their site theme.
<div> elements of the hosted search page HTML serve as styling sections.
Browsing the source code of the delivered hosted search page reveals that styles in the related JS Search Framework version
CoveoFullSearch.min.css file are applied.
You can customize the hosted search page styling by performing an HTTP POST request to the Coveo header CSS endpoint.
You might need to adjust the domain portion of the above Swagger UI URL to match your data residency region.
You need to provide values for three parameters in your POST requests:
To get the
Paste the hosted search page ID in a file so you can retrieve it later.
Get the organization ID from the URL and paste it in a file so you can retrieve it later.Example
A user is viewing the Search Pages page. The URL is
The organization ID is
Use the hosted search page ID and organization ID values for the POST request
To set the
payload parameter supports two use cases:
You can add a reference to a CSS file that will be included after the JS Search Framework
You can add CSS styles directly in the payload. The payload CSS will be added in a
scripttag after the JS Search Framework
The table below shows examples for both use cases.
Referencing a CSS file
Adding inline CSS
Configuring Result Templates
Search Page Deployment to Your Production Coveo Organization (Administrator)
Once a search page has undergone the necessary testing in your UAT environment, you can apply the changes to the corresponding search page in your production Coveo organization. Coveo provides a handy resource snapshot feature to copy one or multiple sandbox Coveo organization search pages along with other sandbox Coveo organization resource configurations to your production Coveo organization.
You’re now ready to install the Coveo for Adobe Experience Manager package and add the Coveo Hosted Search Page component in an Adobe Experience Manager page.