Replacing the Portal Search Box

You must now replace the header search box of your Dynamics 365 Customer Engagement portal with a Coveo search box providing suggestions. The instructions in this page require you to have completed the previous steps of the deployment process (see Deploying Coveo for Microsoft Dynamics 365 in a Portal).

Adding a Search Box Web Template

In Dynamics, create a new web template (see Store source content by using web templates):

  1. In the Name box, enter Coveo Search Box.

  2. In the Website menu, select your portal.

  3. In the Source box, enter the following template code. It contains a script initializing the standalone search box and the HTML required to define the search box with some options set (see Creating a Standalone Search Box, Implementing a Search Box and Enabling Coveo ML Query Suggestions in a Coveo JavaScript Search Framework Search Box).

     <script type="text/javascript">
         {% assign apikey = settings['Coveo/ApiKey'] | default:'' %}
         {% assign organizationId = settings['Coveo/OrganizationId'] | default:'' %}
         {% assign platformUri = settings['Coveo/PlatformUrl'] | default:'' %}
         document.addEventListener('DOMContentLoaded', function() {
             Coveo.SearchEndpoint.configureCloudV2Endpoint('{{organizationId}}', '{{apikey}}', '{{platformUri}}rest/search');
             Coveo.initSearchbox(document.getElementById("coveo-main-search-box"), '/coveo');
         });
     </script>
     <style>
     .CoveoSearchbox {
         background: white;
     }
     </style>
     <div id="coveo-main-search-box">
         <div class="CoveoAnalytics" data-search-hub="PortalGlobalSearchBox" data-endpoint="{{ settings['Coveo/UsageAnalyticsUrl'] | default:'' }}"></div>
         <div class="CoveoSearchbox" data-enable-omnibox="true" data-trigger-query-on-clear="false"></div>
     </div>
    
  4. In the action bar, click Save and close.

  1. In Dynamics, open the web template of your site header.

    The header template is named Header by default.

  2. In the Source box, locate the tag that includes the portal search box:

     {% include 'Search' %}
    
  3. Replace this tag with the following:

     {% include 'Coveo Search Box' %}
    
  4. At the bottom of the page, click the floppy disk icon to save your modifications.

  5. Validate that the search box on your portal has successfully been replaced by the Coveo search box.

    If you have enough data, the search box should provide suggestions as well.

What’s Next?

Proceed to the next step of the deployment process (see Pushing View Events to Coveo Usage Analytics and Deploying Coveo for Microsoft Dynamics 365 in a Portal).

Recommended Articles