Embedding Widgets

Learn the different ways to embed widgets on your site — inline scripts, iframes, and popups.

Embed modes

Every widget supports one or more embed modes. Choose the one that fits your use case.

The simplest and most performant option. Paste a single <script> tag anywhere on your page. The widget renders directly in your page’s DOM.

<script src="https://cdn.widget.best/embed.js"
  data-widget-id="your-widget-id">
</script>

The widget renders wherever you place the script tag. It adapts to its container width automatically.

Best for: most use cases — blogs, landing pages, dashboards, sidebars.

Pros:

  • Fastest load time (no iframe overhead)
  • Responsive by default
  • Inherits page font stack naturally

Cons:

  • Page CSS can occasionally affect widget styles

Iframe

Loads the widget in an isolated frame. Full style isolation from the host page.

<iframe
  src="https://embed.widget.best/your-widget-id"
  width="400"
  height="300"
  frameborder="0"
  loading="lazy">
</iframe>

Best for: Notion embeds, platforms with strict content policies, sites with CSS conflicts.

Pros:

  • Complete style isolation
  • Works on platforms that block external scripts

Cons:

  • Slightly slower initial load
  • Fixed dimensions unless wrapped in a responsive container

Opens the widget as a floating overlay triggered by a button click. Available on Form and Document Chat.

<script src="https://cdn.widget.best/embed.js"
  data-widget-id="your-widget-id"
  data-mode="popup">
</script>

Renders a launcher button in the bottom-right corner. Click to open, click outside or press Escape to close.

Best for: contact forms, feedback collection, chat interfaces.

Platform guides

WordPress

  1. Open the page/post editor
  2. Add a Custom HTML block
  3. Paste the embed code
  4. Save and preview

For site-wide widgets (e.g., chat), paste the code in Appearance > Theme Editor > footer.php before </body>, or use “Insert Headers and Footers” plugin.

Webflow

  1. Drag an Embed element onto your canvas
  2. Paste the inline script code
  3. Publish your site

The widget won’t render in the designer — you’ll see it on the published site.

Squarespace

  1. Edit the page and add a Code Block
  2. Paste the embed code
  3. Toggle off “Display Source”
  4. Save

For site-wide placement: Settings > Advanced > Code Injection > Footer.

Shopify

  1. Go to Online Store > Themes > Customize
  2. Add a Custom Liquid section
  3. Paste the embed code
  4. Save

For specific templates, edit the theme code and place the snippet in the relevant .liquid file.

Notion

Notion doesn’t support external scripts. Use the iframe embed:

  1. Type /embed on a new line
  2. Paste: https://embed.widget.best/your-widget-id
  3. Resize as needed

Framer

  1. Add an HTML embed component
  2. Paste the inline script code
  3. Preview or publish

Ghost

  1. Add an HTML card in the editor
  2. Paste the embed code

For site-wide widgets: Settings > Code injection > Site Footer.

Static HTML

<!DOCTYPE html>
<html>
<body>
  <h1>My Page</h1>
  <script src="https://cdn.widget.best/embed.js"
    data-widget-id="your-widget-id">
  </script>
</body>
</html>

Responsive sizing

Inline embeds are responsive by default. For iframes, wrap in a responsive container:

<div style="width: 100%; max-width: 500px;">
  <iframe
    src="https://embed.widget.best/your-widget-id"
    width="100%"
    height="400"
    frameborder="0"
    loading="lazy">
  </iframe>
</div>

Multiple widgets on one page

Each script tag operates independently. The embed script is loaded once and cached — additional widgets add negligible overhead.

<script src="https://cdn.widget.best/embed.js"
  data-widget-id="clock-widget-id">
</script>

<script src="https://cdn.widget.best/embed.js"
  data-widget-id="countdown-widget-id">
</script>