Add the Coveo Hosted Search Page Component to Your Site

You are now able to modify and push a search page to your Coveo organization as a 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 hosted search page and inject it into the web page.

Install the Package

To install the Coveo Hosted Search Page Beta package

  1. Get the package.

  2. In the AEM CRX Package Manager, upload and install the coveo-aem-components.all-<VERSION>.zip package.

  3. Replicate the package.

    Uploading the Coveo package in the Package Manager
    Installing the Coveo package in the Package Manager

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.

  1. In the AEM user interface, open the template you want to allow the Coveo Hosted Search Page component on.

    Opening the template to edit its layout container policy
  2. Select the Layout Container, and then select the Policy option.

    Accessing template layout container policies
  3. Under Properties, in the Allowed Components tab, select Coveo Components - Content. Click Checkmark button in the upper-right corner to save your changes.

    Adding Coveo Hosted Search Page component as allowed component

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 platform endpoint URI

  • Your organization ID

  • An access API key

  • A search API key

  • The hosted search page ID

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

  1. Access the API Keys page in your Coveo organization.

  2. Click Add key in the upper-right corner of the page.

  3. In the Add an API key dialog, in the Configuration tab, set the Key name to Access API Key.

    Naming the access API key
  4. Select the Privileges tab.

  5. Select the Search domain on the left-hand side, and then set the Search pages resource access level to View all.

    Setting the access API key privileges
  6. Click Add key.

  7. In the Your API Key dialog, click COPY.

    Copying the access API key
  8. 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.

  9. 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

  10. Copy your search API key and paste it in the same location you used for the access API key.

  11. In the administration console left menu, under Search, select Search Pages.

  12. Select the hosted search page your Coveo Hosted Search Page component will use, and then select More > Edit.

    Displaying the hosted search page edit screen
  13. When viewing the Edit a search page dialog, the platform endpoint URI, organization ID, and hosted search page ID values are all displayed in the URL. Copy and paste all three parameter values in the same location you used for your API keys.

    EXAMPLE

    A user is viewing the following Edit a search page dialog.

    Hosted search page edit screen

    The URL is https://platform.cloud.coveo.com/admin/#mdsiteaemx2rz7v2t/search/search-pages/5bb9c1cb-cbaa-487e-99c7-e319bb8c83cb/configuration/

    • The platform endpoint URI is https://platform.cloud.coveo.com

    • The organization ID is mdsiteaemx2rz7v2t

    • The hosted search page ID is 5bb9c1cb-cbaa-487e-99c7-e319bb8c83cb

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.

  1. In the AEM UI, create a page using the template you created or updated.

    Creating a page using the template
  2. Once created, open your page.

    Opening the created page
  3. In the page, select the Layout Container, and then select Insert component.

    Inserting the component
  4. In the Insert New Component dialog, select the Coveo Hosted Search Page component.

  5. In the page, select the Coveo Hosted Search Page component, and then select the Configure option.

    Selecting the Configure option
  6. 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 Checkmark button to save your changes.

    Configuring the component

    Set a meaningful Search Hub value (see Testing a Search Hub).

  7. Refresh your page.

You should now see your Coveo organization hosted search page in your AEM web page.

The Coveo Hosted Search Page component appears in the AEM page

If, instead, you see an error message, start by checking the following:

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 will want to leverage the power of the Coveo Platform to the fullest extent, especially the Query Pipeline and Coveo Machine Learning (ML) features.

Recommended Articles