---
title: Deployment procedure for Zendesk Guide
slug: kcme0093
canonical_url: https://docs.coveo.com/en/kcme0093/
collection: coveo-for-zendesk
source_format: adoc
---
# Deployment procedure for Zendesk Guide
Once you've [added a Zendesk source](https://docs.coveo.com/en/1880/) in your [Coveo organization](https://docs.coveo.com/en/185/), you must:

* [Import](#import-javascript-files) [Coveo JavaScript Search Framework](https://docs.coveo.com/en/187/) files to the document header.

* [Add the Coveo search box](#add-coveo-search-box) to the portal header.

* Finalize the integration by [adding the search page](#add-coveo-search-page) to the interface.

> **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**](https://support.zendesk.com/hc/en-us/articles/231747427).

## Import JavaScript files

For more information on accessing the folders in the **Customize design** window of Zendesk Guide, see [**Customizing your help center theme**](https://support.zendesk.com/hc/en-us/articles/203664326).

. Go to **Themes** > **Customize** > **Edit code** > **document_head.hbs**.

. Add the following to the header code:

 ** The latest [CSS](https://docs.coveo.com/en/2075#css) stylesheet

 ** The latest [framework script](https://docs.coveo.com/en/2075#framework-script)

 ** The JavaScript file for Coveo for Zendesk:

```javascript
 <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:

```html
 <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>
```

. Click **Publish**.

## Add Coveo search box

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

. 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">`:

```html
<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">`.
> 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.

. Click **Publish**.

. On the [**API Keys**](https://platform.cloud.coveo.com/admin/#/orgid/organization/api-access/) ([platform-ca](https://platform-ca.cloud.coveo.com/admin/#/orgid/organization/api-access/) | [platform-eu](https://platform-eu.cloud.coveo.com/admin/#/orgid/organization/api-access/) | [platform-au](https://platform-au.cloud.coveo.com/admin/#/orgid/organization/api-access/)) page in the Coveo Administration Console, [create an API Key](https://docs.coveo.com/en/1718#create-an-api-key) using the **Anonymous search** [template](https://docs.coveo.com/en/1718#api-key-templates).

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

. Enter the following code _after_ the `DomContentLoaded` section:

```javascript
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)`:

[%header,cols="~,~"]
|===
|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](https://coveo.github.io/search-ui/globals.html) for the Coveo search interface.
|===

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

![Help-center-search-box](https://docs.coveo.com/en/assets/images/coveo-for_zendesk/guide-search-box.png)

## 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**](https://platform.cloud.coveo.com/admin/#/orgid/search/search-pages/) ([platform-ca](https://platform-ca.cloud.coveo.com/admin/#/orgid/search/search-pages/) | [platform-eu](https://platform-eu.cloud.coveo.com/admin/#/orgid/search/search-pages/) | [platform-au](https://platform-au.cloud.coveo.com/admin/#/orgid/search/search-pages/)) page of the [Coveo Administration Console](https://docs.coveo.com/en/183/), [create a legacy search page](https://docs.coveo.com/en/1656#create-a-hosted-search-interface) with the [Interface Editor](https://docs.coveo.com/en/1852/) 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**.