Integrate Coveo components in an Experience Cloud site

This is for:

Developer System Administrator

Coveo for Salesforce comes with multiple Lightning components which can be easily added to your Experience Cloud site (formerly Lightning community). This page shows you how to add the default Coveo Lightning components to your Experience Cloud site using the Salesforce Experience Builder.

Tip
Leading practice

You should always duplicate Coveo components instead of using the default ones. This keeps the original component configurations intact for reference and re-use (see Integrating Coveo components in a custom Lightning component).

Prerequisites

Add the Coveo Community Search component

The Coveo Community Search component lets you insert a complete search results page in your Experience Cloud site, including features such as facets, tabs, sorting, and pagination.

Community Search

To add the Coveo Community Search component

  1. Access the Salesforce Experience Builder.

  2. In the left sidebar, select Components.

    components

  3. In the Components dialog, under Custom Components, drag the Coveo Community Search component and drop it onto the page region where you want the search interface to appear, typically in the Content section.

  4. When you create a Community Search component for the first time, the Interface Creator (This search page isn’t configured yet.) dialog is displayed:

    1. Click Preview in the upper-right corner of the Experience Builder to switch to preview mode.

      Important
      Important

      In a newly created Experience Cloud site, you must either publish your site and create or edit your search page via the published Experience Cloud site URL. Otherwise, to continue in Preview mode, you must add the following Content Security Policy (CSP) trusted sites:

      After adding these sites, refresh the page to use the Interface Creator. You should also set the CSP security to Allow Inline Scripts and Script Access to Any Third-Party Host.

    2. In the Coveo Search component region, click Set up a Search Page.

    3. Follow the onscreen steps, and then click Create page.

      Important
      Important

      If an error message appears after clicking Create page, add the missing Content Security Policy trusted sites to your Salesforce organization.

      You should now have a functional search page connected to the Salesforce search box, returning results from your Coveo organization index. You can also test your search page at this time.

  5. When you’re satisfied with your search page, in the upper-right corner of the Experience Builder, click Publish to make your changes available to your site users (see Publish Your Experience Builder Site Customizations).

    Important
    Important

    Be aware that publishing Interface Editor changes immediately affects your Experience Cloud site in production.

  6. Make sure that the appropriate users are members of your Experience Cloud site so that they can view your search page.

You can use the Coveo Community Searchbox component to add a standalone search box in the header of your Experience Cloud site. As of the Coveo for Salesforce v5.7 release, if you integrate a Coveo hosted search page, you must use the Coveo Hosted Searchbox component to add a standalone search box in the header of your Experience Cloud site. The standalone search box offers advanced features such as Coveo Machine Learning (Coveo ML) query suggestions, typo correction, and facet value suggestions.

searchbox

Coveo Community Searchbox component

To add the Coveo Community Searchbox component

  1. Access the Salesforce Experience Builder.

  2. In the left sidebar, select Theme > Theme Settings.

    Community Settings

  3. Under Search Component, in the dropdown menu, select Coveo Community Searchbox.

    Important
    Important

    If you don’t see the Coveo Community Searchbox option, you may not be using the right template. Ensure that your Theme is set to Customer Service.
    Note

    If you’re using a previous version of the Coveo for Salesforce package, the component name will be Searchbox (before v2.51) and Coveo Searchbox (before v3.25).

  4. Close the Theme Settings menu.

Your search page now uses the Coveo standalone search box.

Additional considerations

  • Modifying the default value of the enableHistory component option isn’t recommended. This option is automatically set to the correct value (true or false) based on the component you’re integrating. If you modify this value, the standalone search box may not work as expected.

  • Ensure that the value for the Search Url option is set to global-search/%40uri (see Customize the standalone search box).

  • When you have the default Headline component from Salesforce integrated into your Experience Cloud site, you won’t notice that it always shows the query is @uri. You’re encouraged to remove this component, as it’s incompatible with the standalone search box.

    resultforuri

  • With your current configuration, both the standalone search box and the search component are injecting their query to the search component. If you prefer to only inject the relevant query, you can disable the Auto inject basic query setting of your search component.

  • The Coveo standalone search box doesn’t support site branding. However, using custom CSS to override the template elements should still work as expected.

You can now use the options panel to customize your Coveo standalone search box.

Coveo Hosted Searchbox component

Coveo for Salesforce 5.7

To add the Coveo Hosted Searchbox component

  1. Access the Salesforce Experience Builder.

  2. In the left sidebar, select Theme > Theme Settings.

  3. Click the Search Component picklist, and then select Coveo Hosted Searchbox.

  4. Close the Theme Settings menu.

  5. Click the Coveo Hosted Searchbox component in the header of your page, and then specify the following information in the component details section on the right:

    1. Click the Configuration name picklist to select the name of the hosted search page configuration you want to integrate.

    2. Under Engine ID, enter the ID of the engine instance the component will register to. Enter the same value you’ve selected for your Hosted Search Page component.

      Important
      Important

      All components that belong to a given interface must use the same engine ID value.

    3. Under Redirection URL, ensure the value is set to global-search/%40uri.

Your hosted search page now uses the Coveo Hosted Searchbox.

Add the Coveo Page View Tracker component

Coveo for Salesforce 3.10

The Coveo Page View Tracker component can be added to your Experience Cloud site to send usage analytics data to Coveo. The data gathered by the component can later be used to recommend pages to your users using a Content Recommendation (CR) model.

To add the Coveo Page View Tracker component

  1. Access the Salesforce Experience Builder.

  2. In the left sidebar, select Components.

    components

  3. Under Custom Components, drag the Coveo Page View Tracker component in the header of your page.

    Tip
    Leading practice

    Add the Coveo Page View Tracker on every page of your Experience Cloud site to ensure that all your page views are recorded.

Add the Coveo Case Deflection component

Coveo for Salesforce 3.29

You can add the Coveo Case Deflection component to your Experience Cloud site to provide recommended solutions to users before they submit a case to your support agents (see Integrate a Coveo Case Deflection component).

Add missing Content Security Policy trusted sites

Due to changes in the Salesforce framing policies, you may need to manually add URIs to your Content Security Policy (CSP) Trusted Sites to access the Interface Creator and Interface Editor.

To know which URIs to add to your CSP trusted sites

  1. In the Can’t Access Resources error message that appears after clicking Create page in the Interface Creator, copy the URI address displayed next to Blocked URI, and then add the URI to your CSP Trusted Sites.

    CPS-error-message

  2. Back in the Preview mode of the Experience Builder, open your browser developer tools, and then access the Console tab.

  3. In the Coveo Search component region, click Set up a Search Page, and then follow the onscreen steps.

  4. Click Create page and then, in the Console tab of your browser developer tools, you should see an error message.

  5. In the error message, copy the last URI that appears (the one displayed in red), and then add the URI to your CSP Trusted Sites.

    CPS-error-message-console
    Note

    After adding these sites, refresh the page to use the Interface Creator.

What’s next?