Deployment procedure for Zendesk Guide

This is for:

Developer System Administrator

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

Note

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 more information on accessing the folders in the Customize design window of Zendesk Guide, see Customizing your help center theme.

  1. Go to Themes > Customize > Edit code > 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>
      Example

      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.10109/0/css/CoveoFullSearch.min.css" integrity="sha512-Yt7MZEnP5kirGYK4vJ8djaFiOYX03mT+0ET7i/YGxK3SgWCRXMuqx20YIhhmuu0NZYtXFtKmHqV6Bj21y0Sqkg==" crossorigin="anonymous" />
 <script class="coveo-script" src="https://static.cloud.coveo.com/searchui/v2.10109/0/js/CoveoJsSearch.Lazy.min.js" integrity="sha512-6oqgQSftG9tVIfn6VNtPpIkRWcx/T3C9zyWRwNzoB2kbA72AKQIV4OuqgkocvmZARAAGHOH4dn+MjPL9SC6agg==" crossorigin="anonymous"></script>
 <script class="coveo-script" src="https://static.cloud.coveo.com/coveoforzendesk/v0.0.2/selfservice/commonjs/CoveoForZendesk.min.js" crossorigin="anonymous"></script>

  3. Click Publish.

  1. Go to Themes > Customize > Edit code > home_page.hbs.

  2. Replace the Zendesk search box with the Coveo search box by inserting the following code in place of the Zendesk search box code that’s located inside <section id="main-content" class="section hero"><div class="hero-inner">:

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

    There are several occurrences of Zendesk search boxes in other sections of the theme code, such as in <div class="search-container">. We recommend that you find and replace them with the Coveo search box code. If they aren’t replaced, users may experience issues such as performing a search and landing on a blank results page.

  3. Click Publish.

  4. On the API Keys (platform-ca | 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

    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-ca | 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.