Embedding GuideFreshdesk

How to Embed a Widget in Freshdesk Knowledge Base

Freshdesk's knowledge base (Solutions) editor includes an HTML mode that accepts iframes, making it straightforward to embed interactive Embeddy widgets. Add troubleshooters, calculators, product demos, and decision trees directly into your support articles. This guide covers three methods -- the article HTML editor for inline embedding, portal customization for site-wide scripts, and custom ticket widgets for agent-facing tools.

ⓘ

Freshdesk supports iframes in knowledge base articles

Unlike some platforms, Freshdesk's article editor preserves iframe tags when you switch between WYSIWYG and HTML views. You can safely paste your Embeddy iframe code in the HTML editor and it will persist after saving.

1. Prerequisites

  • •An active Embeddy account with at least one published widget.
  • •A Freshdesk account with Agent or Admin access to manage knowledge base articles (Solutions).
  • •Your Embeddy iframe embed code -- copy it from your widget's Embed tab in the dashboard.
  • •For portal customization (Method 2), you need Admin access and a Freshdesk plan that supports portal customization (Estate or above, or Freshdesk Mint).

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 Editor in Articles (Recommended)

Freshdesk's knowledge base article editor includes a Code View toggle that lets you edit the raw HTML of any article. This is the simplest way to embed an Embeddy widget in a specific support article.

Best for: Embedding an interactive troubleshooter in a "How to fix..." article, adding a pricing calculator to a billing FAQ, or placing a product demo in a getting-started guide.

  1. 1

    Open the article in Freshdesk Solutions

    In Freshdesk, go to Solutions in the left sidebar. Navigate to the category and folder containing your article, then click the article title to open it.

  2. 2

    Click Edit to open the article editor

    Click the Edit button at the top of the article to enter editing mode. You will see the WYSIWYG editor with a formatting toolbar.

  3. 3

    Switch to Code View (HTML mode)

    In the editor toolbar, click the Code View button (often shown as </> or Source). This switches the editor to show the raw HTML of the article.

  4. 4

    Paste your Embeddy iframe code

    Find the position in the HTML where you want the widget and paste your embed code:

    <!-- 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>
  5. 5

    Save and publish the article

    Click Save (or Save and Publish for draft articles). Switch back to the WYSIWYG view to confirm the iframe placeholder appears. Visit the article in your support portal to verify the widget renders correctly.

Tip: Freshdesk preserves iframe tags across editor mode switches. However, avoid editing the area around the iframe in WYSIWYG mode as the editor may reformat surrounding HTML and shift the iframe position.

3. Method 2 -- Portal Customization (CSS/JS)

Freshdesk allows admins to add custom CSS and JavaScript to the support portal. This is ideal for adding a floating widget or injecting code across all knowledge base pages without editing individual articles.

Best for: Adding a persistent floating troubleshooter, feedback tool, or interactive assistant that appears on every page of your Freshdesk support portal.

  1. 1

    Open Portal Customization

    In Freshdesk, go to Admin > Helpdesk > Customer Portal > Portal Customization. You can also access this via Admin > Channels > Portals > Customize.

  2. 2

    Navigate to the Custom JS section

    In the portal customization page, find the Layout tab and then the Custom JS (or Header/Footer) section where you can add JavaScript code.

  3. 3

    Add the widget injection script

    Paste the following script to add a floating Embeddy widget to your portal:

    <!-- Embeddy Widget - Site-wide Freshdesk Portal -->
<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 and preview

    Click Save and then preview your support portal. The widget will appear as a floating element on every page.

4. Method 3 -- Custom Ticket Widget

Freshdesk supports custom apps that can display iframe content in the ticket sidebar or as full-page apps. This method is useful for agent-facing tools like internal troubleshooters or diagnostic utilities.

Note: This method requires the Freshdesk Marketplace developer tools. It is best for agent-facing widgets, not customer-facing knowledge base content. For customer-facing widgets, use Method 1 or 2.

  1. 1

    Create a custom Freshdesk app

    Go to Admin > Apps > Custom Apps (or use the Freshdesk Developer Portal). Create a new app project.

  2. 2

    Add an iframe to the app template

    In your app's HTML template, embed the Embeddy widget:

    <!DOCTYPE html>
<html>
<head>
  <style>
    body { margin: 0; padding: 0; }
    iframe { width: 100%; height: 100vh; border: none; }
  </style>
</head>
<body>
  <iframe
    src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
    allow="clipboard-write">
  </iframe>
</body>
</html>
  3. 3

    Install and activate the app

    Package and install the custom app in your Freshdesk instance. Configure it to appear in the ticket sidebar, full-page view, or other supported app locations.

5. Troubleshooting

Iframe disappears after switching from Code View to WYSIWYG

This can happen if Freshdesk's editor reformats the HTML. Re-open Code View, verify the iframe is intact, and save directly from Code View without switching back. If the issue persists, wrap the iframe in a <div> tag to protect it.

Widget shows a blank box in the support portal

Verify your Embeddy widget URL is correct by opening it in a new browser tab. Check your browser console for CSP or mixed-content errors. Ensure your Freshdesk portal uses HTTPS (Embeddy URLs are HTTPS by default).

Code View / Source button is not visible

The Code View option may be hidden on lower Freshdesk plans. Check your plan features or contact Freshdesk support. As an alternative, you can use the Embed Video option and paste the iframe URL, though this has limited customization.

Portal customization JavaScript is not executing

Ensure your JavaScript is wrapped in a <script> tag and has no syntax errors. Check the browser console for errors. Some Freshdesk plans restrict custom JavaScript -- verify your plan supports portal customization.

Widget overflows the article content area

Set width="100%" and a reasonable height value. Wrap the iframe in a div with max-width: 100%; overflow: hidden; to prevent overflow in narrow portal layouts.

6. FAQ

Can I embed a troubleshooter in a Freshdesk knowledge base article?

Yes. Build your troubleshooter as an Embeddy widget, then embed it in any Freshdesk Solutions article using the Code View editor (Method 1). Customers can interact with the troubleshooter directly within the article.

Does the widget work in Freshdesk's mobile portal?

Yes. Set width="100%" on your iframe to ensure it is responsive. The Freshdesk mobile portal renders HTML content including iframes, though the available width is narrower.

Can agents see the widget in the ticket view?

If you use Method 3 (custom app), yes. The Embeddy widget will appear in the ticket sidebar or full-page app view. This is useful for diagnostic tools, internal calculators, or agent-facing reference content.

Will embedding a widget slow down my support portal?

No. Iframes load asynchronously and do not block the page. The Freshdesk portal will load normally, and the Embeddy widget will render in its own isolated frame without impacting portal performance.

Can I embed a product demo or calculator in Freshdesk?

Absolutely. Embeddy supports building interactive product demos, pricing calculators, ROI tools, and configurators. Embed them in Freshdesk knowledge base articles to help customers self-serve and reduce ticket volume.

Ready to embed in Freshdesk?

Build interactive troubleshooters, calculators, and demos with Embeddy and embed them in your Freshdesk knowledge base to reduce ticket volume.

Start for Free
PreviousIntercomNextHelp Scout