Deployment Procedure for Zendesk Guide

Once you’ve added a Zendesk source in your Coveo organization, you must:

• Import Coveo JavaScript Search Framework files to the document header.

• Add the Coveo search box to the portal header.

• Finalize the integration by adding the search page to the interface.

Import JavaScript Files

For steps on accessing the folders in the Customize design window of Zendesk Guide, see Customizing your help center theme.

1. In the templates folder of the Customize design window, select document_head.hbs.

2. Add the following to the header code:

   • The latest CSS stylesheet

   • The latest Framework script

   • The JavaScript file for Coveo for Zendesk:

      <script class="coveo-script" src="https://static.cloud.coveo.com/coveoforzendesk/v0.0.2/selfservice/commonjs/CoveoForZendesk.min.js" crossorigin="anonymous"></script>
     

   After adding the files, the document_head.hbs code should be similar to the following:

    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <link rel="stylesheet" href="https://static.cloud.coveo.com/searchui/v2.10081/5/css/CoveoFullSearch.min.css" integrity="sha512-c6ZA0d3XVIG36GHJHX+TRBINlF4+k4cDAngeqQmWzEcPys5FWvLCD/IVaUJsdmNchM+4YuCcYpaXsNsb2B8bWQ==" crossorigin="anonymous" />
    <script class="coveo-script" src="https://static.cloud.coveo.com/searchui/v2.10081/5/js/CoveoJsSearch.Lazy.min.js" integrity="sha512-aKXBnyJH8xK97jTYJdm/m9pzV3zdU/r0DszRAhgcipp8cY68vrFy+yKdw/5NsuV6MLQpgjM88WtURJZ7MFcvkQ==" crossorigin="anonymous"></script>
    <script class="coveo-script" src="https://static.cloud.coveo.com/coveoforzendesk/v0.0.1/selfservice/commonjs/CoveoForZendesk.min.js" crossorigin="anonymous"></script>
   

3. Click Publish.

Add Coveo Search Box

1. In the templates folder of the Customize design window, select header.hbs.

2. Enter the following code either above or below the existing code in the header.hbs window, depending on where you want the search box located:

    <div style="width: 800px; margin:auto;">
    <div id="searchbox">
    <div class="CoveoSearchbox" data-enable-omnibox="true">
    </div>
    </div>
    </div>
   

3. Click Publish.

4. Using the API Keys page in the Coveo Administration Console, generate an API Key with the following privileges:

   Service	Domain	Required access level
   Analytics	Analytics Data	Push and view
   Search	Execute queries	Allowed

5. Return to the Customization design page, and under the templates folder, select script.js.

6. Enter the following code after the DomContentLoaded section:

    var options = {
    APIKey: "<YOUR_API_KEY>",
    searchBoxId: "searchbox",
    searchPageId: "search"
    }
    CoveoForZendesk.init(options);
   

7. Replace <YOUR_API_KEY> with the new API key.

8. Add the following options as needed after CoveoForZendesk.init(options):

   Option	Information
   APIKey (required)	The API Key required to execute the search.
   searchPageUrl	The destination URL when a user executes a search (if different from the default search page).
   searchBoxId (required)	The HTML ID of your CoveoSearchBox component div (generally searchbox).
   searchPageId (required)	The HTML ID of your CoveoSearchInterface component div (generally search).
   searchPageName	The URL fragment of the search page name. For example, for go.coveo.com/search, the fragment would be /search.
   searchOptions	Additional options for the Coveo search interface.

9. Click Preview to review the Help Center interface. The search box should now be visible on the header.

   

Add Coveo Search Page

1. In the templates folder of the Customize design window, select search_results.hbs.

2. Remove the all of the existing code under the <div “class=”search-results”> section.

3. Using the Search Pages page of the Coveo Administration Console, generate a Coveo page template markup.

4. Copy the Coveo page template markup, and then paste the it under the <div “class=”search-results”> section in search_results.hbs.

5. Remove the markup in the <div class=”coveo-search-section> and <div class=”search-container”> sections to ensure that you don’t have multiple search boxes.

6. Click Publish.