Embedding GuideIntercom

How to Embed a Widget in Intercom Articles

Intercom's help center articles support rich formatting, but embedding custom HTML requires using the right approach. This guide covers how to add interactive troubleshooters, product demos, calculators, and other Embeddy widgets to your Intercom knowledge base using HTML blocks, Messenger apps, and custom code injection in your help center settings.

⚠

Intercom's article editor has limited HTML support

Intercom's WYSIWYG editor does not natively support raw HTML or iframes in the standard text blocks. You need to use a code block or embed block (depending on your Intercom plan) or inject code via the help center's custom code settings. This guide walks through every available method.

1. Prerequisites

  • •An active Embeddy account with at least one published widget.
  • •An Intercom account with Articles enabled (available on most Intercom plans).
  • •Your Embeddy iframe embed code -- copy it from your widget's Embed tab in the dashboard.
  • •Admin or Author permissions in your Intercom workspace to create and edit articles.

Your Embeddy iframe code:

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

2. Method 1 -- HTML Block in Articles (Recommended)

Intercom's article editor supports adding embed/HTML blocks that accept raw HTML including iframes. This is the most straightforward way to embed an Embeddy widget in a specific article.

Best for: Adding an interactive troubleshooter, step-by-step decision tree, or product demo directly inside a help article where customers are already looking for answers.

  1. 1

    Open the article editor

    In Intercom, navigate to Help Center > Articles. Click the article you want to edit, or create a new one.

  2. 2

    Add a new content block

    Place your cursor where you want the widget. Click the + button that appears in the left margin to add a new block. Select HTML or Embed from the block type menu.

  3. 3

    Paste your Embeddy iframe code

    Paste your iframe embed code into the HTML block:

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

    Preview the article

    Click the Preview button to verify the widget renders correctly. The HTML block may show the raw code in the editor, but the preview will display the actual widget.

  5. 5

    Publish the article

    Click Publish (or Save and set live) to make the article available. The widget will be visible to your help center visitors immediately.

Note: If your Intercom plan does not show an HTML/Embed block option, use Method 3 (custom code injection) as an alternative.

3. Method 2 -- Custom Action / Messenger App

Intercom's Messenger supports custom apps and actions that can display external content. You can configure an Embeddy widget to open inside the Messenger as a custom action, perfect for interactive support flows.

Best for: Triggering an interactive troubleshooter or support tool directly from the Intercom Messenger widget during a conversation, providing a seamless in-chat experience.

  1. 1

    Go to Intercom Developer Hub

    Navigate to Settings > Integrations > Developer Hub in your Intercom workspace. Create a new app or select an existing one.

  2. 2

    Configure a Messenger Canvas

    In your app settings, set up a Messenger Canvas that points to your Embeddy widget URL. The canvas will render the widget inside the Messenger frame.

  3. 3

    Set the widget URL

    Use your Embeddy widget URL as the canvas URL:

    https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID
  4. 4

    Install and activate the app

    Install the app to your workspace. It will appear as an option in Messenger conversations and can be triggered via automation workflows or operator bots.

4. Method 3 -- Help Center Custom Code

Intercom allows you to add custom HTML, CSS, and JavaScript to your help center's header or footer. This method is useful for site-wide widget injection or adding a floating interactive tool across all help center pages.

Note: This method adds code to every page in your help center. For embedding in a specific article only, use Method 1.

  1. 1

    Open Help Center settings

    In Intercom, go to Help Center > Settings.

  2. 2

    Navigate to the Custom Code section

    Find the Custom Header Code or Custom Footer Code section in the help center settings. This is where you can add scripts and HTML that will load on every help center page.

  3. 3

    Paste your embed script

    Add a script that injects the widget on the desired pages. You can target specific article URLs:

    <!-- Embeddy Widget - Conditional injection -->
<script>
  (function() {
    // Show on all pages, or filter by URL:
    // if (!window.location.pathname.includes('/articles/')) return;

    var container = document.createElement('div');
    container.style.cssText = 'position:fixed;bottom:20px;right:20px;z-index:9999;';
    container.innerHTML = '<iframe src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID" ' +
      'width="380" height="500" frameborder="0" ' +
      'style="border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,0.15);"></iframe>';
    document.body.appendChild(container);
  })();
</script>
  4. 4

    Save the settings

    Click Save. The widget will now appear on your help center pages. Changes take effect immediately.

5. Troubleshooting

HTML block option is not available

Not all Intercom plans include HTML blocks in the article editor. If you do not see the option, use Method 3 (custom code in help center settings) to inject the widget via JavaScript. Alternatively, upgrade your plan or contact Intercom support for access.

Widget shows as raw HTML text in the article

You likely pasted the iframe code into a standard text block instead of an HTML/embed block. Delete the text and add a proper HTML block using the + menu. HTML blocks render code; text blocks display it as literal text.

Widget does not render in the editor preview

The Intercom article editor may not render iframes in its editing view. Click Preview or publish the article and view it in your live help center to confirm the widget appears correctly.

Iframe is blocked by Content Security Policy

If Intercom's CSP headers block external iframes, contact Intercom support to request that embeddy.ai be whitelisted. This is uncommon with the standard help center setup but can occur with custom domains.

Custom code injection is not taking effect

Clear your browser cache and check the browser console for JavaScript errors. Ensure you saved the help center settings after adding the code. Also verify your script does not have syntax errors by testing it in a standalone HTML file first.

6. FAQ

Can I embed an interactive troubleshooter in an Intercom article?

Yes. Build the troubleshooter in Embeddy's no-code builder, then embed it in an Intercom article using the HTML block or custom code injection. Customers can interact with the troubleshooter without leaving the help center.

Does the widget work in the Intercom Messenger?

You can display an Embeddy widget in the Messenger using a custom Messenger Canvas app (Method 2). This lets agents or bots trigger the widget during a conversation. Standard articles viewed in the Messenger may have limited HTML rendering.

Will the widget affect my help center's loading speed?

No. Iframes load asynchronously in their own sandboxed context. The Embeddy widget will not block or slow down your Intercom help center's page load.

Can I use different widgets in different articles?

Yes. Each Embeddy widget has its own unique embed code. You can create multiple widgets (e.g. one troubleshooter per product) and embed each one in the relevant article. There is no limit to the number of widgets you can embed.

Can I embed a product demo or calculator in Intercom?

Absolutely. Embeddy supports building interactive product demos, pricing calculators, ROI tools, and more. Embed them in your Intercom help center articles to provide customers with self-service tools alongside your documentation.

Ready to embed in Intercom?

Build interactive troubleshooters, product demos, and calculators with Embeddy and embed them in your Intercom help center in minutes.

Start for Free
PreviousZendeskNextFreshdesk