How to Embed a Widget in Help Scout Docs

1. Prerequisites

• •An active Embeddy account with at least one published widget.
• •A Help Scout account with Docs enabled and a published Docs site.
• •Your Embeddy iframe embed code -- copy it from your widget's Embed tab in the dashboard.
• •Owner or Admin role in Help Scout to edit articles and site settings.

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

2. Method 1 -- HTML Editor in Docs (Recommended)

Help Scout's Docs article editor includes an HTML toggle that lets you insert raw HTML directly into an article. This is the quickest way to embed an interactive widget in a specific knowledge base article.

1. 1

   Open the article in Help Scout Docs

   In Help Scout, go to Manage > Docs. Select your Docs site, navigate to the collection and article you want to edit, and click on it to open the editor.

2. 2

   Switch to HTML mode

   In the article editor toolbar, click the HTML button (or the </> icon). This toggles the editor to display the raw HTML source of the article.

3. 3

   Paste your Embeddy iframe code

   Position your cursor where you want the widget and paste the iframe code. Wrap it in a container div for clean spacing:

   <!-- Embeddy Interactive Widget -->
   <div style="margin: 24px 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

   Switch back to the visual editor (optional)

   Click the HTML button again to return to the visual editor. You should see a placeholder or rendered preview of the iframe in the article body.

5. 5

   Save the article

   Click Save Article. If the article status is "Published," the widget will be live immediately. Visit your Docs site to confirm the widget appears correctly.

3. Method 2 -- Custom CSS/JS in Docs Site

Help Scout Docs allows you to add custom CSS and JavaScript to your entire Docs site. This is useful for site-wide widget injection, such as adding a floating troubleshooter or interactive tool that appears on every article page.

1. 1

   Open Docs site settings

   Go to Manage > Docs, click on your Docs site, then navigate to Site Settings (or Customize).

2. 2

   Find the Custom Code section

   Look for the Custom Code, Custom Header/Footer, or Head/Body Code fields in the site settings. This is where you can inject HTML, CSS, and JavaScript.

3. 3

   Paste your widget injection script

   Add the following script to inject a floating Embeddy widget on all Docs pages:

   <!-- Embeddy Widget - Site-wide Help Scout Docs -->
   <script>
     document.addEventListener('DOMContentLoaded', 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 the site settings

   Click Save. The widget will now appear on every page of your Help Scout Docs site.

4. Method 3 -- Beacon Integration

Help Scout's Beacon is an embeddable support widget that provides live chat and Docs search. While you cannot directly embed an Embeddy widget inside Beacon, you can link to your widget from Beacon's custom content or use Beacon alongside your embedded widget for a layered support experience.

1. 1

   Configure Beacon to surface Docs articles

   In Manage > Beacons, configure your Beacon to show Docs suggestions. When users search in Beacon, they will find articles that contain your embedded widgets.

2. 2

   Add custom links in Beacon messages

   Use Beacon's Messages feature to send targeted messages with links to your Docs articles that contain interactive widgets. For example: "Having trouble? Try our interactive troubleshooter."

3. 3

   Use JavaScript API to open specific articles

   Use the Beacon JavaScript API to programmatically open a specific Docs article that contains your Embeddy widget:

   <!-- Open a specific Docs article in Beacon -->
   <script>
     // Trigger Beacon to open an article with an embedded widget
     Beacon('article', 'ARTICLE_ID', { type: 'modal' });
   </script>

5. Troubleshooting

6. FAQ