Integrating into Zendesk Guide

Search UX options

There are two options to surface Glean search in Zendesk Guide.

1. Modal search
2. Autocomplete and Search results page

These instructions can vary depending on the template used during setup for Zendesk Guide. The instructions below correspond to the Copenhagen Zendesk Template but these should work with any theme with minimal tweaks.

Modal search

1. Click Customize design (the "eye" icon) in the left nav.
2. In the Live theme section, click the Customize link on your theme.

   Important

   If your help center is already live on your site, we recommend making a copy of the live theme to test out the integration. Next to your live theme, select the three vertical dots menu and click on Copy.

3. We'll need to edit the theme code to replace Zendesk Search box and Search results with with Glean search. To access this, click on Edit Code.
4. From the lefthand side panel open script.js and add the following code at the top level and click Save.
   Copy

   Copied

   const gleanScript = document.createElement("script");
   gleanScript.src = "https://{YOUR_GLEAN_DOMAIN}/browser-api/embedded-search-latest.min.js";
   gleanScript.defer = true;
   gleanScript.addEventListener("load", function () {
     EmbeddedSearch.attach(document.querySelector("input[type=search]"));
   });
   document.head.append(gleanScript);

5. Click on Preview in the lefthand side panel to preview and verify your changes.
6. Once verified, you can apply these changes to your live theme and Publish the same.

Autocomplete and Search results page

Import Javascript files for Glean search

1. Click Customize design (the "eye" icon) in the left nav.
2. In the Live theme section, click the Customize link on your theme.

   Important

   If your help center is already live on your site, we recommend making a copy of the live theme to test out the integration. Next to your live theme, select the three vertical dots menu and click on Copy.

3. We'll need to edit the theme code to replace Zendesk Search box and Search results with with Glean search. To access this, click on Edit Code.
4. Navigate to document_header.hbs. From the lefthand side panel, click on document_header.hbs.
5. Include the JS library in document_header.hbs as a script tag. Note: {YOUR_GLEAN_DOMAIN} is where your company accesses Glean, such as app.glean.com.
   Copy

   Copied

     <script defer src="https://{YOUR_GLEAN_DOMAIN}/browser-api/glean-for-zendesk-guide-latest.min.js"></script>

   

Replace existing search UI with Glean search

Most Zendesk themes have a search box added to each page. We'll go over the steps to edit these individually and replace the {{search}} component with Glean search UI.

1. Navigate to home_page.hbs - From the lefthand side panel, click on home_page.hbs.
2. In home_page.hbs, comment out the existing code for {{search}} and add the following in its place. Finally, click Save.
   Copy

   Copied

   <div 
     class="glean-search-box" 
     style="width: 100%; height: 60px; max-width: 600px; margin:auto; position: relative;"
   >
   </div>

   
3. Navigate to search_results.hbs - From the lefthand side panel, click on search_results.hbs.
4. In search_results.hbs comment out all existing code and add the following in its place. Finally, click Save.
   Copy

   Copied

   <div class="glean-search-results" style="width: 100%; margin:auto; position: relative;"></div>

   
5. Recipe - Compact search box: Most pages would have a compact search in the header as well. We can replace these individually with a compact variant. We'll go over an example next.
6. Navigate to article_page.hbs from the lefthand side panel.
7. In article_page.hbs, comment out the existing search code and add the following in its place.
   Copy

   Copied

   <div 
     class="glean-search-box--compact" 
     style="width: 100%; height: 42px; max-width: 600px; margin:auto; position: relative;"
   >
   </div>

   
8. Navigate to script.js from the lefthand side panel.
9. In script.js, add the following JS snippet at the end of the file and click Save.
   Copy

   Copied

   /** Setup Glean search **/ 
   function initializeGleanSearch () {
   
     // Note: This should match the backend URL for your Glean setup
     const backend = '<CHANGEME>'
     
     // See available customizations here: https://app.glean.com/meta/browser_api/interfaces/SearchBoxCustomizations.html
     const customizations = {
       boxShadow: 'none',
       borderRadius: 8,
       placeholderText: 'Search...', // Change me to a placeholder of your choice
     }
     
     // Initialize GleanForZendesk
     GleanForZendeskGuide.init({
       // This should match the search page used by your theme -- this usually matches /hc/search
       searchUrl: '/hc/search',
       // If your Glean setup supports guest users, mark this as true.
       // Note: If your Glean setup is internal users only, this option will be ignored.
       anonymous: false,
       backend,
     }).then((instance) => {
       // Attach hero search box
       instance.renderSearchBox('.glean-search-box', {
         searchBoxCustomizations: Object.assign({}, customizations, {
           fontSize: 20,
           // Additional customizations can be added here
         }),
         backend,
       })
   
       // Attach compact search box
       instance.renderSearchBox('.glean-search-box--compact', {
         searchBoxCustomizations: Object.assign({}, customizations, {
           fontSize: 16,
           // Additional customizations can be added here
         }),
         backend,
       })
   
       // Attach search results
       instance.renderSearchResults('.glean-search-results', { backend, showInlineSearchBox: true })
     })
   }
   
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', initializeGleanSearch)
   } else {
     initializeGleanSearch()
   }

10. Click on Preview in the lefthand side panel to preview and verify your changes.
11. Once verified, you can apply these changes to your live theme and Publish the same.