Embedding GuideConvertKit / Kit

How to Embed a Widget on ConvertKit (Kit)

ConvertKit (now rebranded as Kit) offers a visual landing page builder with a Custom HTML element that accepts raw HTML, iframes, and scripts. This guide walks you through embedding an Embeddy widget using the Custom HTML element and an alternative code injection method for site-wide scripts.

⚠

ConvertKit landing pages are separate from email templates

Email clients do not support iframes. You can only embed widgets on ConvertKit Landing Pages, not inside email broadcasts or sequences. Link to the landing page from your emails instead.

1. Prerequisites

•An active Embeddy account with at least one published widget.
•A ConvertKit (Kit) account on any plan that supports landing pages (all plans include landing pages).
•Your Embeddy iframe embed code -- copy it from your widget's Embed tab in the dashboard.

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 HTML Element (Recommended)

ConvertKit's landing page editor includes a Custom HTML element that renders raw HTML exactly as written. This is the simplest way to add an Embeddy widget to a single landing page.

Use this method when you want to embed a widget on a specific landing page. It takes about two minutes and requires no coding beyond pasting the iframe snippet.

1
Open your landing page in the editor
In ConvertKit, navigate to Grow > Landing Pages & Forms. Click on the landing page you want to edit. This opens the visual landing page editor.
2
Add a new element
Hover over the section where you want the widget to appear and click the + button to add a new content element. The element picker will appear.
3
Select Custom HTML
From the element picker, select Custom HTML. A code editor block will be inserted into the page.

Paste your Embeddy iframe code

Click the Custom HTML block to open its 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
Save and publish
Click Save & Publish in the top-right corner. Your landing page is now live with the embedded widget.

Tip: The Custom HTML element may not render a full preview in the editor. Click Preview or visit the live URL to confirm the widget displays correctly.

3. Method 2 -- Head/Body Code Injection

ConvertKit allows you to inject custom code into the <head> or <body> of your landing page. This is useful for adding tracking scripts or initialisation code that must load before the page renders.

Note: Head injection is best for scripts, not visible widgets. To place a widget visually within your page layout, use Method 1 (Custom HTML element).

1
Open your landing page settings
In the landing page editor, click the Settings gear icon (usually in the top toolbar or sidebar).
2
Navigate to the Custom Code section
Look for Custom Code, SEO & Analytics, or Head/Body Code in the settings panel. ConvertKit provides fields for injecting code into the page head and body.

Paste your script code

Add any initialisation scripts into the Head Code field, or place an iframe into the Body Code field if you want it appended at the end of the page:

<!-- Head Code: for analytics/init scripts -->
<script>
  // Your tracking or init code here
</script>

<!-- Body Code: for appending an iframe at page end -->
<iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="500"
  frameborder="0">
</iframe>

4
Save and publish
Click Save in the settings panel, then Save & Publish the landing page.

4. Troubleshooting

Widget does not appear in the editor preview

ConvertKit's editor may not render Custom HTML elements in real time. Click Preview or open the live page URL to verify the widget loads correctly.

Widget is visible but cut off or has no height

Ensure you have set the height attribute on your iframe (e.g. height="500"). ConvertKit sections may also have padding or max-width constraints -- check the section style settings.

Landing page shows a blank area where the widget should be

Verify your widget is published in the Embeddy dashboard. Also confirm the iframe src URL is correct -- check for typos in the WIDGET_ID or PROPS_ID.

Custom HTML element not available

Make sure you are editing a Landing Page, not a Form. ConvertKit forms have a more limited element set. The Custom HTML element is available on all landing page templates.

Widget works on desktop but not mobile

Add width="100%" to your iframe and avoid fixed pixel widths. ConvertKit landing pages are responsive, but a fixed-width iframe will overflow on small screens.

5. FAQ

Can I embed a widget inside a ConvertKit email?

No. Email clients do not support iframes or custom scripts. Instead, include a link in your email that points to a landing page where the widget is embedded.

Does ConvertKit support JavaScript in the Custom HTML element?

Yes. The Custom HTML element accepts full HTML, CSS, and JavaScript. Scripts will execute on the live published page.

Will the widget affect my landing page loading speed?

Embeddy widgets load inside an iframe, which means they do not block your landing page from rendering. The widget loads asynchronously after the main page content.

Can I use the widget on a custom domain landing page?

Yes. ConvertKit allows you to connect a custom domain to your landing pages. The Embeddy widget will work regardless of whether you use a ConvertKit subdomain or a custom domain.

Is the ConvertKit rebrand to Kit affecting this process?

No. The landing page editor and Custom HTML element work identically under both the ConvertKit and Kit branding. The navigation paths referenced in this guide apply to both.

Ready to embed on ConvertKit?

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

Start for Free

PreviousAll Guides NextGetResponse