Embedding GuideUnbounce

How to Embed a Widget on Unbounce

Unbounce makes embedding custom widgets straightforward with its Custom HTML element in Classic Builder and Embed block in Smart Builder. This guide covers both builders plus a script-injection fallback for advanced use cases.

ℹ

Which builder are you using?

Unbounce offers two builders: Classic Builder (drag-and-drop with pixel-perfect control) and Smart Builder (section-based, AI-assisted). Both support custom HTML embedding, but the steps differ slightly. Check your page editor to identify which builder you are using.

1. Prerequisites

  • •An active Embeddy account with at least one published widget.
  • •An Unbounce account with an active subscription (any plan supports Custom HTML).
  • •Your Embeddy iframe embed code — copy it from your widget's Embed tab in the dashboard.
  • •An existing Unbounce landing page to embed the widget on, or create a new one.

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 — Classic Builder (Recommended)

The Classic Builder provides a dedicated Custom HTML element that accepts raw HTML including iframes and scripts. This is the most reliable method for embedding widgets.

Use this method when your landing page was created with the Classic Builder. It gives you pixel-perfect positioning of the widget on the page canvas.

  1. 1

    Open your landing page in the Classic Builder

    In Unbounce, go to your Pages list, find the page you want to edit, and click Edit to open the Classic Builder.

  2. 2

    Add a Custom HTML element

    Click the Add Element button in the bottom-left toolbar (or press H as a shortcut). From the element menu, select Custom HTML. A new HTML box will appear on the canvas.

  3. 3

    Open the HTML editor

    Double-click the Custom HTML element on the canvas. The HTML editor dialog will open, showing a code editing area.

  4. 4

    Paste your Embeddy iframe code

    Clear any placeholder content and paste your Embeddy embed code into the HTML editor:

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

    Save and close the HTML editor

    Click Save Code (or Done) to close the HTML editor. You should now see the Custom HTML element on the canvas. Resize and reposition it as needed.

  6. 6

    Publish the page

    Click Publish in the bottom-right corner to push changes live. Use Preview first to confirm the widget renders correctly.

Tip: In Classic Builder, the Custom HTML element dimensions on the canvas control the visible area. Make sure to resize the element to match your desired widget dimensions (e.g. set the width to the section width and height to at least 500px).

3. Method 2 — Smart Builder

If your page uses Unbounce's newer Smart Builder, you can embed custom HTML using an Embed / Custom Code block.

When to use this method: Your page was created with Smart Builder and you want to add an Embeddy widget within a section layout.

  1. 1

    Open your page in Smart Builder

    Navigate to the page in Unbounce and click Edit.

  2. 2

    Add an Embed block

    Click the + icon where you want the widget to appear. In the block menu, find and select Custom Code (or Embed). A new code block will be added to the section.

  3. 3

    Paste the iframe code

    Click the code block and paste your Embeddy iframe embed code into the code editor. Click Save.

  4. 4

    Publish the page

    Click Publish to push changes live.

4. Method 3 — Page Scripts

For advanced use cases (e.g. injecting a script that creates the widget dynamically), you can add JavaScript to Unbounce's page-level scripts.

Note: This method injects code into the page head or footer. It is useful for scripts but not for placing a visible widget at a specific location on the page. For that, use Method 1 or 2.

  1. 1

    Open the page in Classic Builder

    Navigate to your landing page and click Edit.

  2. 2

    Open JavaScripts & Stylesheets

    In the bottom-left toolbar, click JavaScripts & Stylesheets (or go to Settings > JavaScripts & Stylesheets).

  3. 3

    Add a new script

    Click Add New JavaScript. Set the placement to Before Body End Tag, then paste your script code. Click Save Code.

  4. 4

    Publish the page

    Click Publish to make the changes live.

5. Troubleshooting

Widget is not visible on the live page

Make sure you clicked Publish after saving changes. Also verify the Custom HTML element is not hidden behind another element — check the element's z-index and position on the canvas.

Widget appears too small or is cut off

In Classic Builder, resize the Custom HTML element on the canvas to match your desired widget dimensions. Set the width to at least the section width and height to 500px or more. In Smart Builder, adjust the block's height setting in the properties panel.

Custom HTML element shows a blank box in the editor

Unbounce's editor may not render iframe content in the design view. This is normal. Preview or Publish the page and check the live URL to see the widget.

Widget does not load on mobile

Unbounce Classic Builder has separate desktop and mobile views. You may need to add and position the Custom HTML element on both views. In Smart Builder, responsive layouts are handled automatically.

JavaScript errors in the console

If you see mixed content warnings, ensure your Embeddy iframe src uses https://. Unbounce pages are served over HTTPS, so all embedded content must also use HTTPS.

6. FAQ

Can I use the Custom HTML element on any Unbounce plan?

Yes. All Unbounce plans (Launch, Optimize, Accelerate, Concierge) support Custom HTML elements in Classic Builder. Smart Builder also supports embed blocks on all plans.

Will the widget work on Unbounce popups and sticky bars?

Yes. You can add a Custom HTML element to Unbounce popups and sticky bars using the same steps as for landing pages. Keep in mind that popups have limited space, so adjust the iframe dimensions accordingly.

Does embedding a widget affect Unbounce page speed scores?

Iframes load asynchronously and do not block the main page rendering. The impact on page speed is minimal. Embeddy widgets are optimized for fast loading.

Can I pass URL parameters from Unbounce to my widget?

Yes. You can use Unbounce's dynamic text replacement or JavaScript to append URL parameters to the iframe src. For example, capture UTM parameters and pass them to your Embeddy widget for tracking.

Do I need a developer to embed the widget on Unbounce?

No. Method 1 (Classic Builder) and Method 2 (Smart Builder) require no coding — just paste the iframe code. The Custom HTML element is a drag-and-drop feature.

Ready to embed on Unbounce?

Create your widget in Embeddy's no-code builder and paste the iframe code into your Unbounce Custom HTML element in minutes.

Start for Free
PreviousHubSpotNextLeadpages