Embedding GuideInstapage

How to Embed a Widget on Instapage

Instapage's visual builder includes a dedicated HTML element that lets you embed custom code directly onto your landing page canvas. Drag it into position, paste your Embeddy iframe, and publish. This guide covers the HTML element method and a Custom Code injection alternative.

ℹ

Instapage HTML Element

The HTML element in Instapage is a free-form code block that supports iframes, JavaScript, and CSS. It renders on the published page exactly as you write it — no sanitisation or stripping.

1. Prerequisites

  • •An active Embeddy account with at least one published widget.
  • •An Instapage account (Building, Converting, or Enterprise plan).
  • •Your Embeddy iframe embed code — copy it from your widget's Embed tab in the dashboard.
  • •An existing Instapage 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 — HTML Element (Recommended)

The HTML element (also called the "Embed" or "Custom HTML" element) is Instapage's built-in tool for injecting raw HTML directly onto the page canvas.

Use this method to place your Embeddy widget at a specific position on the landing page. It supports iframes, scripts, and any valid HTML.

  1. 1

    Open your landing page in the Instapage builder

    In Instapage, go to your Landing Pages list, find the page, and click Edit Design to open the visual builder.

  2. 2

    Add an HTML element

    In the left panel, click Elements (the elements/widgets icon). Scroll down to the HTML element (it may appear under "More" or "Advanced"). Drag it onto the page canvas where you want the widget to appear.

  3. 3

    Open the HTML code editor

    Double-click the HTML element on the canvas (or click it and select Edit HTML from the toolbar). The code editor dialog will open.

  4. 4

    Paste your Embeddy iframe code

    Clear any placeholder content and paste your Embeddy embed code:

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

    Click Done and resize the element

    Click Done (or Save) to close the code editor. Resize the HTML element on the canvas to match your widget dimensions — drag the corner handles to set the width and height.

  6. 6

    Publish the page

    Click Publish in the top-right corner. Use Preview to verify the widget renders correctly before going live.

Tip: Instapage's builder uses absolute positioning. Make sure to place the HTML element within a section that has enough vertical space. If the element overlaps other content, adjust its position or the section height.

3. Method 2 — Custom Code (Head/Body)

For injecting scripts into the page <head> or <body>, use Instapage's Custom Code settings.

Note: This method is for scripts and initialisation code, not for placing a visible widget at a specific position. For visible widgets, use Method 1.

  1. 1

    Open Page Settings

    In the Instapage builder, click the Settings gear icon in the top toolbar.

  2. 2

    Navigate to HTML/CSS

    In the settings panel, select the HTML/CSS tab (or Custom Code). You will see fields for Head and Body code injection.

  3. 3

    Paste your code

    Paste your script code into the appropriate field (Head for initialisation, Body for rendering scripts). Click Save.

  4. 4

    Publish the page

    Click Publish to push changes live.

4. Troubleshooting

Widget is invisible on the published page

Make sure the HTML element has adequate width and height. Instapage uses absolute positioning — a 0x0 element will not be visible. Also ensure you published after saving.

HTML element does not render in the editor preview

This is normal behaviour. Instapage's builder may show a grey placeholder for HTML elements. The iframe will render on the published page. Use Preview to verify.

Widget overlaps other elements on the page

Instapage uses absolute positioning for all elements. Adjust the position and z-index of the HTML element, or increase the section height to accommodate the widget without overlapping other content.

Widget does not display correctly on mobile

Switch to the Mobile view in the Instapage builder and reposition/resize the HTML element for mobile screens. Set the iframe width to 100% for responsive behaviour.

Cannot find the HTML element in the Elements panel

The HTML element may be listed under different names depending on your Instapage version. Look for HTML, Custom HTML, or Embed in the Elements panel. If unavailable, check your plan supports custom code features.

5. FAQ

Can I use the HTML element on all Instapage plans?

The HTML element is available on all Instapage plans (Building, Converting, and Enterprise). Custom Code injection in settings may require a paid plan.

Can I A/B test a page with an embedded widget?

Yes. Instapage's A/B testing works at the page level. You can create a variation with the Embeddy widget and another without to measure conversion impact.

Will the widget affect my Instapage loading speed?

Iframes load asynchronously and do not block the main page. Embeddy widgets are optimized for performance, so the impact on page load speed is minimal.

Can I embed multiple widgets on the same Instapage?

Yes. Add multiple HTML elements to the canvas and paste different Embeddy iframe codes into each one. Position them independently on the page.

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

No. The HTML element is a drag-and-drop feature in Instapage's visual builder. No coding knowledge is needed beyond pasting the iframe code.

Ready to embed on Instapage?

Create your widget in Embeddy's no-code builder and drag the HTML element onto your Instapage canvas in minutes.

Start for Free
PreviousLeadpagesNextClickFunnels