Coveo Search Integration with AEM using Coveo Plugin
Coveo represents an AI-driven search and recommendation platform, seamlessly combining unified search, advanced analytics, and machine learning capabilities. This powerful tool enhances the accessibility of precise and pertinent information throughout various business domains, offering support for diverse content sources. In the following article, we will explore the installation process of Coveo packages and the seamless integration of Coveo search into an Adobe Experience Manager (AEM) site page.
Please follow the steps below to obtain and install the Coveo Plugin:
Step 1: Requesting the Coveo AEM Component Package
To begin, you’ll need to request the Coveo AEM component package. Follow these steps:
1. Compose an email to aem-requests@coveo.com with the subject line “AEM Hosted Search Page.”
2. Send the email, and the Coveo team will respond by providing you with the coveo-aem-components.all-x.x.x-beta.zip package.
Once you’ve received the package from Coveo, you can proceed to the next step.
Step 2: Installing the Coveo Package
To install the Coveo package, follow these instructions:
1. Open the CRX Package Manager in Adobe Experience Manager (AEM).
2. Upload the Coveo connector package.
3. Proceed to install the package through the CRX Package Manager.
Step 3: After successfully installing the package, the next crucial step is to replicate the package.
Package installation is done. Now we must allow the Coveo component in our editable template, then only we can use it to create a search page.
AEM Page Configurations
Step 4: Access your website (for this demonstration, we’ll use the we-retail site as an example). Proceed to create a new page where you’ll be adding the Coveo component.
Select the appropriate template for your new page. If you have designed a custom template specifically for search, be sure to choose that template at this stage.
Provide a title and a name for your page, then proceed to create it.
After creating the page, the subsequent step is to enable and author the Coveo component, but first, you must permit the use of this component in your template. Here’s how:
Step 5: Access the Template Editor.
Select the layout container and then select the policy icon.
Under Properties, in the Allowed Components tab, search for Coveo and select the checkbox. Select ✓ to save the changes.
Step 6: Navigate to the search page and proceed to add the Coveo component. Initially, you may encounter an error message, which is expected as we haven’t configured the component correctly yet.
To create Coveo Hosted Search Page, the below fields need to be configured in the component.
- The Coveo endpoint URI
- Your organization ID
- An access API key
- A search API key
- The classic hosted search page ID
- Search Hub
Now we will see how to get all the above information in the next step
Configuring Coveo
Note: We assume you already have a Coveo trial or license account here.
Step 7: Go to https://platform.cloud.coveo.com/admin/#/organization/api-access/. Click ‘Add Key’ button. One dialog will open. In that dialog select, the configuration tab
First will create an Access API Key. Select the key name field and give a key name. Keep the rest of the fields as it is.
Now select ‘Privileges tab’ >> search and then set the Search pages resource access level to View all. click Add Key button.
One dialog will open with an API field containing your API key, click COPY. Keep the copied API key somewhere safe location, will require it later.
Next, we will create a search API
Step 8: To create a search API follow Step 7 and name it something ‘Project Name Search API Key’. I have given ‘We Retail’ as the project name, since I am using the We Retail demo site.
Then go to the ‘Privileges’ tab and select ‘search’. In the search section provide the following access levels:
- Execute queries
- Allowed
- Impersonate
- Allowed
Next, add hub for a search API key and select Add Key
One dialog will open with an API field containing the API key, click COPY. Keep the copied API key somewhere safe location, will require it later.
In the left-hand side API Keys section, you can review and manage your API keys.
Next, we will create a search page. On the Search Pages you will find 2 different options one is a simple builder and another classic interface editor.
In this blog tutorial, we will be using “Classic Interface Editor”. Select Classic Interface Editor and give the page name and HTML title. Then click on Add Search page
Once the page is created select Copy ID and keep it handy somewhere.
We have Access API, Search API, Search Page ID, and Search Hub. Now we need the Platform endpoint and organization ID. Follow the next step
Step 9: You can get the endpoint and organization ID directly from the URL section.
e.g., if you check the URL it will look like this
Now we have all the information required for Coveo search component authoring. But before we proceed with authoring, we have to encrypt our search as well as an access API key.
API Keys Encryption
Step 10: Go to your local AEM’s crypto section through URL- http://localhost:8080/system/console/crypto . Add your Access API key and click protect. Then copy the protected text and keep it safe.
Follow the same step to encrypt the Search API key.
Coveo Component Authoring
Now we have all the things required to author a Coveo component dialog. Open the AEM site page to which the Coveo component is added. Open the dialog and author all the fields. Click the Checkmark button to save your changes.
Step 11: Once you reload the page, you will see the Coveo-hosted search page in your AEM site page as below.
Summary
Search functionality is a vital component of any website, greatly enhancing user experience and interaction. In this blog, we’ve explored the integration of Coveo search into an AEM site page. Adobe Experience Manager (AEM) is a popular CMS, and by leveraging AEM-supported Coveo packages, we can efficiently implement and manage Coveo-based search capabilities. The flexibility to customize extensively and the option to use it in a headless manner, as discussed in this article, make it a powerful tool for optimizing website search experiences.
