How to Embed a Widget in Zendesk Help Center

1. Prerequisites

• •An active Embeddy account with at least one published widget.
• •A Zendesk account with Guide Manager or Admin permissions to edit help center articles.
• •Your Embeddy iframe embed code -- copy it from your widget's Embed tab in the dashboard.
• •Zendesk Guide must be activated on your account (included with Zendesk Suite or available as an add-on).

<iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="500"
  frameborder="0">
</iframe>

2. Method 1 -- Source Code Editor (Recommended)

The Source Code Editor in Zendesk Guide's article editor lets you insert raw HTML directly into an article. This is the fastest way to embed an interactive widget like a troubleshooter or calculator in a specific help center article.

1. 1

   Open the article in Zendesk Guide

   In Zendesk, click the Zendesk Products icon and select Guide. Navigate to the article you want to edit and click the Edit article (pencil) icon.

2. 2

   Switch to Source Code view

   In the article editor toolbar, locate and click the Source Code button (it looks like < >). This opens a modal where you can edit the raw HTML of the article.

3. 3

   Paste your Embeddy iframe code

   Position your cursor where you want the widget to appear in the article body and paste your iframe code. You can wrap it in a container div for styling:

   <!-- Embeddy Interactive Widget -->
   <div style="margin: 20px 0; max-width: 100%;">
     <iframe
       src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
       width="100%"
       height="500"
       frameborder="0"
       allow="clipboard-write">
     </iframe>
   </div>

4. 4

   Click OK to close the Source Code editor

   Click OK in the Source Code modal. You should see a placeholder or rendered preview of your iframe in the WYSIWYG editor.

5. 5

   Save and publish the article

   Click Save. If the article is a draft, click Publish to make it visible in your help center. The widget will appear inline within the article.

3. Method 2 -- Custom Pages (Theme Editor)

For standalone widget pages or site-wide placement, use Zendesk Guide's Theme Editor to add your embed code directly to custom page templates. This is ideal for creating dedicated tool pages in your help center.

1. 1

   Open the Theme Editor

   In Zendesk Guide, click Customize design (the paintbrush icon), then click Edit theme to open the code editor.

2. 2

   Create or edit a custom page template

   Navigate to Templates and select a page template (e.g. custom_pages/my_widget_page.hbs). You can create new custom page templates here.

3. 3

   Add your embed code to the template

   Paste the iframe code into the Handlebars template where you want the widget to appear:

   <div class="container">
     <h1>Interactive Troubleshooter</h1>
     <p>Use our interactive tool to diagnose your issue.</p>
   
     <iframe
       src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
       width="100%"
       height="600"
       frameborder="0"
       allow="clipboard-write">
     </iframe>
   </div>

4. 4

   Save and publish the theme

   Click Save and then Publish the theme. Your custom page will be available at your-subdomain.zendesk.com/hc/p/my_widget_page.

4. Method 3 -- Script Tag via Theme Settings

To add a script-based widget (like a floating chat or pop-up tool) across your entire help center, inject JavaScript through the theme's document_head.hbs or footer.hbs template.

1. 1

   Open the Theme Editor

   Go to Guide > Customize design > Edit theme.

2. 2

   Edit the footer template

   Open footer.hbs in the template list. Add your script just before the closing tag.

3. 3

   Add your script snippet

   Paste the script-based embed code to dynamically inject the widget:

   <!-- Embeddy Widget - Site-wide -->
   <script>
     (function() {
       var iframe = document.createElement('iframe');
       iframe.src = 'https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID';
       iframe.style.cssText = 'position:fixed;bottom:20px;right:20px;width:380px;height:500px;border:none;z-index:9999;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,0.15);';
       document.body.appendChild(iframe);
     })();
   </script>

4. 4

   Save and publish

   Click Save, then Publish the theme. The widget will now appear on every page of your help center.

5. Troubleshooting

6. FAQ