Add the Coveo Hosted Search Page component to your site

THIS IS ARCHIVED DOCUMENTATION

Add the Coveo Hosted Search Page component to your site

This is for:

Developer System Administrator

In this article

Install the package
Add the component to allowed components on a template
Create API keys and collect component configuration IDs
Encrypt the API keys
Add and configure the component
What’s next?

In this article

Install the package
Add the component to allowed components on a template
Create API keys and collect component configuration IDs
Encrypt the API keys
Add and configure the component
What’s next?

You now have a classic hosted search page. The next step is to insert the Coveo Hosted Search Page component in a web page to pull the HTML from your classic hosted search page and inject it into the web page.

Install the package

To install the Coveo Hosted Search Page Beta package

Get the package.
In the author instance CRX Package Manager, upload and install the coveo-aem-components.all-<VERSION>.zip package.
In order for the hosted search page to work on your publish instance, replicate the coveo-aem-components.all-<VERSION>.zip package.

Add the component to allowed components on a template

Once the package installed, you can add the Coveo Hosted Search Page component as an allowed component on the template you’ll use to create your main search page, whether an existing template or a duplicate of an existing template.

In the author instance user interface, open the template you want to allow the Coveo Hosted Search Page component on.
Select the Layout Container, and then select the Policy option.
Under Properties, in the Allowed Components tab, select Coveo Components - Content. Click in the upper-right corner to save your changes.

Create API keys and collect component configuration IDs

To retrieve your Coveo organization hosted search page code and to run search queries, the Coveo Hosted Search Page component needs to be configured with the following information:

The Coveo endpoint URI
Your organization ID
An access API key
A search API key
The classic hosted search page ID

The following steps explain how to create and configure the two API keys. While in your organization, you’ll also collect the five component configuration parameters.

Open the API Keys (platform-ca | platform-eu | platform-au) page in your Coveo organization.
Click Add key in the upper-right corner of the page.
In the Add an API key dialog, in the Configuration tab, set the Key name to Access API Key.
Select the Privileges tab.
Select the Search domain on the left side, and then set the Search pages resource access level to View all.
Click Add key.
In the Your API Key dialog, click Copy.
Paste your access API key in a safe location. This is the first of five parameters required to configure your Coveo Hosted Search Page component.
Repeat the previous steps to create the search API key. Name it Search API Key and, in the Privileges tab, provide the following access levels:

Domain Resource Access level

Search

Execute queries

Allowed

Search

Impersonate

Allowed

Leading practice

To follow leading security practices, you should limit the scope of your search API key to a given search hub before clicking Add key at the bottom of the modal.
Copy your search API key and paste it in a safe location.
On the Search Pages (platform-ca | platform-eu | platform-au) page, click the classic hosted search page you want to use, and then click Copy ID in the Action bar.
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 https://platform.cloud.coveo.com/admin/#/ourorgkkkybs20/search/search-pages

The organization ID is ourorgkkkybs20.
Get the platform endpoint 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 https://platform.cloud.coveo.com/admin/#/ourorgkkkybs20/search/search-pages

The platform endpoint URL is https://platform.cloud.coveo.com.

Domain	Resource	Access level
Search	Execute queries	Allowed
Search	Impersonate	Allowed

Encrypt the API keys

We recommend that you encrypt your Coveo organization API keys in all your instances. Since encryption keys are instance specific, this can be achieved by doing one of the following:

(Recommended) Encrypt the Coveo organization API keys on the author instance and share the author instance encryption keys with the publish instance(s).

Encrypt the Coveo organization API keys directly in the publish instance(s).

Opting to encrypt Coveo organization API keys directly in the publish instance(s) has an important drawback. You’ll need to re-encrypt your API keys each time you publish the author instance Adobe Experience Manager page, as this overwrites the Coveo Hosted Search Page component configurations on the publish instance.

To encrypt the Coveo organization API keys on the Adobe Experience Manager author instance and share the author instance encryption keys

In your Adobe Experience Manager instance, open page https:<AUTHOR_DOMAIN>/system/console/crypto.
Paste your Access API Key in the Plain Text field.
Click Protect.
Copy and paste the content of the Protected Text field in the same location you used for the other Coveo Hosted Search Page component configuration parameters.
Repeat the previous steps but, this time, to encrypt the Search API Key.
Copy the hmac and master files of the com.adobe.granite.crypto.file bundle from the author instance to the publish instance(s). If necessary, see Make Sure You Properly Replicate Encryption Keys When Needed for further details.

Add and configure the component

You can now create a page using the template in which you allowed the Coveo Hosted Search Page component. The Coveo Hosted Search Page component also needs to be configured with the information you collected to access your Coveo organization hosted search page.

The following instructions assume that you’ve replicated the encryption keys from your author instance to your publish instance(s).

In the author instance, in the Adobe Experience Manager UI, create a page using the template you created or updated.
Once created, open your page.
On the page, select the Layout Container, and then select Insert component.
In the Insert New Component dialog, select the Coveo Hosted Search Page component.
On the page, select the Coveo Hosted Search Page component, and then select the Configure option.
In the Properties dialog, use the parameter values you copied in the Create API keys and collect component configuration IDs section to set the component property values. Click to save your changes.

Set a meaningful Search Hub value (see Set the search hub).
Refresh your page.

You should now see your Coveo organization hosted search page in your Adobe Experience Manager web page.

Ensure the search result hyperlink URLs reflect the DNS of your public site.

If, instead, you see an error message, start by checking the following:
- Ensure the Hosted Search Page Id property value you set is your Coveo organization hosted search page ID, and not its name.
- Ensure your API key privileges are set as specified in the Create API Keys and Collect Component Configuration IDs section.
Publish your page.

Your published page should render without errors. If there are errors, ensure that there isn’t an API key encryption issue.

What’s next?

All the Coveo magic happens behind the scenes, between the moment a user performs a search in a Coveo-powered search interface and when the results are displayed. You’ll want to leverage the power of Coveo to the fullest extent, especially the Query pipeline and Coveo Machine Learning (ML) features.