Embedding GuideLandingi

How to Embed a Widget on Landingi

Landingi's drag-and-drop editor includes an HTML widget and Custom Code features that make embedding third-party widgets straightforward. Drag the HTML widget onto your page, paste your Embeddy iframe, and publish. This guide covers three methods for different use cases.

ℹ

Landingi Custom Code Support

Landingi supports custom HTML, CSS, and JavaScript on all paid plans. The HTML widget allows you to embed iframes, scripts, and any valid HTML directly on the page canvas. Advanced code injection is available through page-level settings.

1. Prerequisites

  • •An active Embeddy account with at least one published widget.
  • •A Landingi account on a paid plan (Create, Automate, or Agency).
  • •Your Embeddy iframe embed code — copy it from your widget's Embed tab in the dashboard.
  • •An existing Landingi 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 Widget (Recommended)

The HTML widget is Landingi's built-in element for adding custom HTML code directly to the page canvas. It supports iframes, scripts, and CSS.

Use this method to place your Embeddy widget at a specific position on the landing page. It is the simplest and most visual approach.

  1. 1

    Open your landing page in the Landingi editor

    In your Landingi dashboard, find the landing page and click Edit to open the drag-and-drop editor.

  2. 2

    Add an HTML widget

    In the left sidebar, click the Widgets icon (or Add Element). Look for the HTML widget (it may also be labeled Custom HTML or HTML/CSS/JS). Drag it onto the page canvas where you want the widget to appear.

  3. 3

    Open the code editor

    Double-click the HTML widget on the canvas to open the code editor. You will see separate tabs for HTML, CSS, and JavaScript.

  4. 4

    Paste your Embeddy iframe code

    In the HTML tab, 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

    Save and resize

    Click Save to close the code editor. Resize the HTML widget on the canvas by dragging its handles to match your desired widget dimensions.

  6. 6

    Publish the page

    Click Publish in the top-right corner. Preview the page to confirm the widget renders correctly.

Tip: The HTML widget in Landingi may not render iframe content in the editor preview. This is normal. Always check the live published page or use the Preview function to verify.

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

For injecting scripts into the page <head> or <body>, use Landingi's page-level code injection settings.

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

  1. 1

    Open Page Settings

    In the Landingi editor, click the Settings icon (gear) in the top toolbar or navigate to the page settings panel.

  2. 2

    Navigate to Custom Code / JavaScript

    In settings, find the JavaScript or Custom Code section. You will see fields for head code and body code injection.

  3. 3

    Paste your script code

    Paste your initialisation script into the Head or Body field as needed. Click Save.

  4. 4

    Publish the page

    Click Publish to push the changes live.

4. Method 3 — Page-Level CSS & JavaScript

Landingi also allows you to add custom CSS and JavaScript at the page level through dedicated fields in the editor. This is useful for styling the widget container or running initialisation logic.

  1. 1

    Open the Page CSS/JS panel

    In the Landingi editor, look for Page JavaScript and Page CSS options in the settings or sidebar. These allow you to add code that applies to the entire page.

  2. 2

    Add your custom CSS or JavaScript

    Paste your custom styles or scripts. For example, to style the widget container:

    /* Custom CSS for Embeddy widget container */
.embeddy-container {
  max-width: 800px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
  3. 3

    Save and publish

    Click Save, then Publish to push changes live.

5. Troubleshooting

Widget does not appear on the published page

Ensure you clicked Publish after saving the HTML widget. Also check that the widget element is not hidden or positioned off-screen on the canvas.

HTML widget shows a blank area in the editor

This is normal. Landingi's editor may not render iframe content in the design view. Preview or publish the page and check the live URL.

Widget is too small or gets cut off

Resize the HTML widget element on the canvas to match your desired dimensions. Ensure the iframe height attribute is set appropriately (e.g. 500 or higher).

Custom HTML feature is not available

The HTML widget requires a paid Landingi plan. Free trial accounts may have limited access to custom code features. Upgrade your plan to access the HTML widget.

Widget does not display on mobile

Switch to the mobile view in the Landingi editor and check the HTML widget positioning. Set the iframe width to 100% for responsive behaviour. You may need to adjust the widget position for the mobile layout separately.

6. FAQ

Can I use the HTML widget on all Landingi plans?

The HTML widget is available on paid Landingi plans (Create, Automate, Agency). Free trial accounts may have limited access to custom code features.

Can I embed a widget on a Landingi popup or lightbox?

Yes. Landingi popups support the HTML widget. Add the widget to your popup layout and paste your Embeddy iframe code. Keep in mind that popups have limited dimensions.

Does the widget affect Landingi page loading speed?

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

Can I use Landingi's A/B testing with an embedded widget?

Yes. Create a variant of your landing page with the Embeddy widget and another without. Landingi's A/B testing will split traffic between variants so you can measure conversion impact.

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

No. The HTML widget is a drag-and-drop element in Landingi's editor. Just paste the iframe code — no programming required.

Ready to embed on Landingi?

Create your widget in Embeddy's no-code builder and drag the HTML widget onto your Landingi page in minutes.

Start for Free
PreviousClickFunnelsNextMailchimp