How to Embed a Widget on Kartra
Kartra's page builder includes a Custom HTML component that lets you inject raw HTML, iframes, and JavaScript at any position on the page. This guide covers three methods -- the Custom HTML component for inline placement, page-level code injection for per-page scripts, and global tracking code for site-wide scripts.
Kartra supports custom code natively
Unlike some platforms, Kartra does not strip iframes or scripts from its Custom HTML component. Your embed code will render exactly as pasted.
1. Prerequisites
- •An active Embeddy account with at least one published widget.
- •A Kartra account with access to the page builder (available on all Kartra plans).
- •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 Component (Recommended)
The Custom HTML component in Kartra's page builder accepts any HTML, including iframes and scripts. This is the best way to place an Embeddy widget at a specific position on your page.
Use this method when you want to embed a widget at a precise location on a single Kartra page. Takes about two minutes.
- 1
Open the Kartra page builder
In Kartra, navigate to My Pages. Click on the page you want to edit and select Edit Page to open the drag-and-drop builder.
- 2
Add a section or column (if needed)
If your page does not have an empty section where you want the widget, click Add Section to create one. You can choose a full-width or multi-column layout.
- 3
Add a Custom HTML component
Click the + icon inside a column or section to add a new component. From the component list, select Custom HTML (sometimes listed under "Advanced" or "Other").
- 4
Paste your Embeddy iframe code
Click the Custom HTML component to open its code editor. Paste your Embeddy embed code and click Apply or Save:
<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 in the top toolbar, then Publish. Visit your page URL to verify the widget appears.
3. Method 2 -- Page-Level Code Injection
Kartra allows you to add custom code to the head or body of individual pages via the page settings. This is useful for analytics scripts or code that should load before the page renders.
Note: Head code injection is for scripts, not visible content. For visual widget placement, use Method 1.
- 1
Open page settings
In the Kartra page builder, click Page Settings (gear icon) in the top toolbar.
- 2
Navigate to Custom Code / Tracking
Find the Custom Code or Tracking Code section. Kartra provides separate fields for Header Code and Footer Code.
- 3
Paste your code
Add tracking or initialisation scripts to the Header Code field. For an iframe that should appear at the bottom of the page, paste it in the Footer Code field:
<!-- Footer Code --> <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, then Publish the page.
4. Method 3 -- Global Tracking Code
Kartra offers a global tracking code feature that injects code across all your Kartra pages at once. This is ideal for site-wide analytics or scripts but not for page-specific widgets.
- 1
Go to Kartra Settings
Navigate to Settings > Integrations or Settings > Tracking Codes in your Kartra dashboard.
- 2
Add a global tracking code
Paste your script into the global header or footer code field. This code will be injected on every Kartra-hosted page in your account.
- 3
Save
Click Save. The code will immediately apply to all published Kartra pages.
5. Troubleshooting
Custom HTML component shows a blank box in the editor
Kartra's editor may not render iframes in real time. Click Preview or publish the page and visit the live URL to confirm the widget loads.
Widget is not visible on the published page
Verify your widget is published in the Embeddy dashboard. Check the iframe src URL for typos. Also ensure the Custom HTML component is not hidden by section visibility settings.
Widget is cut off or overflows
Adjust the height attribute in your iframe. Also check the column width in Kartra -- if the component is inside a narrow column, the iframe may be constrained.
Cannot find Custom HTML in the component list
The Custom HTML component may be listed under Advanced, Other, or More Components in the component picker. Scroll through all categories or use the search field if available.
Widget not responsive on mobile
Use width="100%" in your iframe and avoid fixed pixel widths. Kartra pages are responsive, and the Custom HTML component will inherit the column width on mobile.
6. FAQ
Can I embed a widget inside a Kartra email?
No. Email clients do not support iframes. Include a link in your Kartra email sequence that directs subscribers to a Kartra page where the widget is embedded.
Can I use the widget on a Kartra checkout page?
Yes, if the checkout page uses the page builder. Add the Custom HTML component the same way you would on any other Kartra page. Some checkout templates may have limited component options.
Does Kartra support JavaScript in the Custom HTML component?
Yes. Kartra's Custom HTML component supports full HTML, CSS, and JavaScript. Scripts will execute on the live published page.
Will the widget work with Kartra's split testing?
Yes. Each page variant is edited independently. Add the Custom HTML component to whichever variants you want the widget to appear on.
Do I need a developer to embed the widget?
No. The Custom HTML component requires only pasting the iframe code. No programming knowledge is needed.
Ready to embed on Kartra?
Create your widget in Embeddy's no-code builder and drop it into your Kartra page with the Custom HTML component in minutes.
Start for Free