Deployment Procedure for Zendesk Guide

Zendesk Service & Support Developer System Administrator Product Documentation

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

The Zendesk Guide integration may vary depending on the template used during the initial Guide setup. The instructions below correspond to the Copenhagen (2.2.4) Zendesk Template.

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.

  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. On the API Keys (platform-eu | platform-au) 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.

    Help-center-search-box

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. On the Search Pages (platform-eu | platform-au) page of the Coveo Administration Console, create a classic search page with the Interface Editor to generate a 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.

What's next for me?