Help Center
Embedded Chat
Add AI chat to your Zendesk Help Center.
What is Zendesk
Zendesk is a customer service solution for handling support tickets.
Get an API key
- Go to the Inkeep Dashboard
- Select your project under Projects
- Go to the Integrations tab
- Click on Create integration
- Select Web
- Provide a Name and URL (optional) for the integration
- Click on Create
- Click the Example < /> button to get your API key and view suggested settings
Connect the script
- Click the Zendesk Products in the top bar, then select Guide
- Navigate to Guide Admin
- Click Customize on the theme you want to edit
- Click Edit code. Which will open theme code editor
In the templates section, find the document_head.hbs
file and paste the code below:
<script id="inkeep-script" src="https://unpkg.com/@inkeep/uikit-js@0.3.8/dist/embed.js" type="module" defer></script>
Creating a custom page
-
Click on Add
-
Click on Custom page
-
Specify a name for the custom page -
ask-ai
-
Click on Add custom page
-
Add the code below to a new file (
ask_ai.hbs
):
ask_ai.hbs
<div class="container">
<div class="category-container">
<div class="category-content">
<header class="page-header">
<h1>Ask AI ✨</h1>
</header>
<div id="main-content" class="section-tree">
<div id="inkeepEmbeddedChat"></div>
</div>
</div>
</div>
</div>
Custom CSS (optional)
Zendesk allows you to add a custom css file to the assets directory:
- Create an
inkeep-styles.css
stylesheet and paste in the below:
inkeep-styles.css
[data-theme='light'] .ikp-search-bar-trigger__wrapper {
background: white;
border-radius: 6px;
width: 100%;
}
- In the theme code editor, click Add
- Click on Asset
- Upload the created css file
Initialize the widget
Next, go back to the header.hbs
file and add the following code at the end of the file:
<script type="text/javascript" defer>
const inkeepScript = document.getElementById("inkeep-script");
// configure and initialize the widget
const addInkeepWidget = (targetElementId) => {
const inkeepStyles = "{{asset 'inkeep-styles.css'}}" // <--- replace with provide template string (if different)
const inkeepWidget = Inkeep().embed({
componentType: "EmbeddedChat",
targetElement: targetElementId,
properties: {
baseSettings: {
apiKey: "INKEEP_API_KEY", // required
integrationId: "INKEEP_INTEGRATION_ID", // required
organizationId: "INKEEP_ORGANIZATION_ID", // required
primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
organizationDisplayName: "Inkeep",
// ...optional settings,
theme: {
stylesheetUrls: [inkeepStyles], // optional (remove if not using custom styles)
},
},
modalSettings: {
// optional settings
},
searchSettings: {
// optional settings
},
aiChatSettings: {
// optional settings
botAvatarSrcUrl: "https://mydomain.com/mylogo", // use your own bot avatar
quickQuestions: [
"Example question 1?",
"Example question 2?",
"Example question 3?",
],
},
},
});
};
inkeepScript.addEventListener("load", () => {
if (document.body) {
const chatContainer = document.getElementById('inkeepEmbeddedChat');
chatContainer && addInkeepWidget("#inkeepEmbeddedChat"); // initialize the EmbeddedChat widget
}
});
</script>
Save custom code
Click on the Publish. Navigate to your web application to make sure the widget is installed correctly.