Expand my Community achievements bar.

The Integration of Coveo Search In Adobe Experience Manager

Avatar

Community Advisor

12/20/22

newcoveobanner.jpg

The Integration of Coveo Search In Adobe Experience Manager

  by Mayur Satav

Coveo is a search and recommendation solution powered by artificial intelligence. The solution combines unified search, analytics, and machine learning. With Coveo search, you can find relevant and accurate information across a wide range of businesses. It provides access to a variety of content sources. In this blog, we will discuss how to install Coveo packages and integrate Coveo search on the AEM site page.

 

It’s time to get started , so let’s do it step by step

 

Getting the Coveo Plugin from the Coveo team

 

Step 1 — First of all, we have to request the Coveo AEM component package. To request the package, send an email to aem-requests@coveo.com with the subject “AEM Hosted Search Page”. Then the Coveo team will send you the Coveo-aem-components.all-x.x.x-beta.zip package.

 

Once you received the package from Coveo proceed to the next steps.

 

Installation of Coveo package

Step 2: Open CRX Package Manager in AEM, then upload and install the Coveo connector package.

 

MayurSatav_27-1671532187160.png

 

Step 3 — Once you install the package successfully, Then replicate the package

 

MayurSatav_28-1671532204107.png

 

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 — Go to your site (I am using we-retail site just for demo purposes). Then Create one page to which we are going to add our Coveo component.

 

MayurSatav_29-1671532232233.png

 

Select the template. If you have created a custom template for search, then select that one.

MayurSatav_30-1671532232217.png

 

Give title and name to our page and select create.

MayurSatav_31-1671532268234.png

 

Once the page is created, The next step is to add and author the Coveo component but before that, we have to allow that component in the template.

Step 5 — Go to Edit Template

MayurSatav_32-1671532268263.png

 

Select the layout container and then select the policy icon.

MayurSatav_33-1671532268269.png

 

Under Properties, in the Allowed Components tab, search for Coveo and select the checkbox. Select ✓ to save the changes.

MayurSatav_34-1671532268233.png

 

Step 6 — Now Go to the search page. Add Coveo component. Initially, when you add the Coveo component it will give you an error message. It is because we have not yet configured the component properly.

 

MayurSatav_35-1671532268278.png

 

To create Coveo Hosted Search Page, the below fields need to be configured in the component.

 

  • Your organization ID
  • An access API key
  • A search API key
  • The classic hosted search page ID
  • Search Hub
MayurSatav_36-1671532268235.png

 

Now we will see how to get all the above information in the next step

 

Configuring the Coveo

 

For complete blog click here.

 

NOTE - Because of characters limit I cant able to post complete blog here.

 
For more visit

Q&A

Please use this thread to ask questions relating to this article

5 Comments

Avatar

Community Advisor

12/20/22

Great Blog! we also implemented(3 years ago) Coveo in our AEM website but with custom AEM components bringing in the coveo javascript framework into AEM. Does this new component has sightly code or pure html/css , also does it include all the JS used or still being referred from https://static.cloud.coveo.com ?

Avatar

Community Advisor

12/22/22

Yes, It enables lot of customisation options and with headless it is very flexible to use.

Avatar

Administrator

1/5/23

@MayurSatav , Wow, great article and use case. Thank you for sharing this with the AEM community. 

Avatar

Community Advisor

1/19/23

Great article and excellent reference! Thanks!

Avatar

7/10/23

Thank you for doing this manual! Keep in mind that Coveo Product team has discontinued support for this package. If you choose to use it, keep in mind your customer will need your support to adjust the code based on new AEM releases or possible bug fixes. On the positive, this package uses Coveo's JSUI Framework, a powerful way to front search results.

 

Alternatively, Coveo has an Atomic Library loved and beloved by our AEM customers. It gives flexibility with the industry search standards embedded in its design.

 

If your customers prefers a low-code visual editor, Coveo Hosted Page is just the solution.