Deployment Procedure for Zendesk Guide
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.
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.
-
In the templates folder of the Customize design window, select document_head.hbs.
-
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>
-
-
Click Publish.
Add Coveo Search Box
-
In the templates folder of the Customize design window, select header.hbs.
-
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>
-
Click Publish.
-
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 -
Return to the Customization design page, and under the templates folder, select script.js.
-
Enter the following code after the
DomContentLoaded
section:var options = { APIKey: "<YOUR_API_KEY>", searchBoxId: "searchbox", searchPageId: "search" } CoveoForZendesk.init(options);
-
Replace
<YOUR_API_KEY>
with the new API key. -
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. -
Click Preview to review the Help Center interface. The search box should now be visible on the header.
Add Coveo Search Page
-
In the templates folder of the Customize design window, select search_results.hbs.
-
Remove the all of the existing code under the
<div “class=”search-results”>
section. -
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.
-
Copy the Coveo page template markup, and then paste the it under the
<div “class=”search-results”>
section in search_results.hbs. -
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. -
Click Publish.