Embedding GuideClickFunnels

How to Embed a Widget on ClickFunnels

ClickFunnels provides a Custom JS/HTML element that lets you inject raw HTML and JavaScript directly into your funnel pages. Drop the element into your page, paste your Embeddy iframe code, and your widget goes live with the funnel. This guide covers both the element method and head-level script injection.

⚠

Do NOT paste embed code into a Text element

ClickFunnels' Text (headline/paragraph) elements use a rich text editor that strips HTML tags. Always use the Custom JS/HTML element for embedding widgets, iframes, or scripts.

1. Prerequisites

  • •An active Embeddy account with at least one published widget.
  • •A ClickFunnels account (Basic, Pro, or Funnel Hacker plan).
  • •Your Embeddy iframe embed code — copy it from your widget's Embed tab in the dashboard.
  • •An existing ClickFunnels funnel with a page step you want to embed the widget on.

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 — Custom JS/HTML Element (Recommended)

The Custom JS/HTML element is ClickFunnels' dedicated tool for injecting custom code into a funnel page. It accepts HTML, JavaScript, and CSS without sanitisation.

Use this method to place your Embeddy widget at a specific position within a funnel page. It is the recommended approach for all ClickFunnels users.

  1. 1

    Open your funnel page in the editor

    In ClickFunnels, navigate to your funnel, select the page step (e.g. Opt-in, Sales Page, Order Form), and click Edit Page to open the page editor.

  2. 2

    Add a new row or select an existing column

    In the page editor, click Add New Element within an existing section, or add a new row/section where you want the widget to appear.

  3. 3

    Add the Custom JS/HTML element

    In the element picker, scroll to the Advanced section and select Custom JS/HTML. The element will be added to the column.

  4. 4

    Open the element settings and paste your code

    Click the Custom JS/HTML element to open its settings panel. You will see a code editor. 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 the page

    Click Save in the top-right corner of the editor. If the funnel step is already live, changes take effect immediately. Use the Preview button to verify the widget renders correctly.

Tip: The Custom JS/HTML element may show the raw code in the editor rather than a rendered preview. This is normal. The widget will render correctly on the live page.

3. Method 2 — Head Tracking Code

For scripts that need to load in the page <head>, ClickFunnels provides per-page and per-funnel head/body code injection.

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

  1. 1

    Open the page settings

    In the ClickFunnels page editor, click Settings in the top toolbar (or click the gear icon on the funnel step).

  2. 2

    Navigate to Tracking Code

    In Settings, find the Tracking Code section. You will see fields for Head Tracking Code, Body (header), and Body (footer).

  3. 3

    Paste your script code

    Paste your initialisation script into the appropriate field. Click Save.

  4. 4

    Save and verify

    Click Save. Preview the page to confirm the script loads correctly.

4. Troubleshooting

Widget is not visible on the live page

Ensure you saved the page after adding the Custom JS/HTML element. Also verify the funnel step is published and live. Check that you used the Custom JS/HTML element, not a Text element.

Embed code was stripped after saving

You likely pasted the code into a Text (headline/paragraph) element instead of the Custom JS/HTML element. Text elements sanitise HTML. Delete the text element, add a Custom JS/HTML element, and paste the code there.

Widget appears but is cut off or too small

Adjust the height attribute in your iframe code. ClickFunnels columns have a fixed width — set iframe width to 100% to fill the column. You can also adjust the section/row padding in ClickFunnels settings.

Cannot find the Custom JS/HTML element

In the element picker, scroll down to the Advanced section. If you are using ClickFunnels 2.0, the element may be called Custom Code or Code Block instead.

Widget shows differently on mobile

ClickFunnels pages are responsive. Ensure your iframe uses width="100%" for proper mobile display. Toggle the mobile preview in the editor to check the layout.

5. FAQ

Can I use this on ClickFunnels 2.0?

Yes. ClickFunnels 2.0 also supports custom code elements. The UI may differ slightly — look for Custom Code or Code Block in the element picker. The embedding process is the same.

Does the widget work on order form and checkout pages?

Yes. You can add a Custom JS/HTML element to any funnel page type including opt-in pages, sales pages, order forms, and thank-you pages.

Will the widget slow down my funnel page?

Iframes load asynchronously and do not block page rendering. Embeddy widgets are lightweight and will not noticeably impact your funnel page load speed or conversion rates.

Can I embed on multiple funnel steps?

Yes. Add a Custom JS/HTML element to each funnel step where you want the widget. Each page is independent — you can embed different Embeddy widgets on different steps.

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

No. The Custom JS/HTML element is a standard ClickFunnels feature. Just paste the iframe code — no programming required.

Ready to embed on ClickFunnels?

Create your widget in Embeddy's no-code builder and add it to your ClickFunnels funnel page with the Custom JS/HTML element in minutes.

Start for Free
PreviousInstapageNextLandingi