Embedding GuideSysteme.io

How to Embed a Widget on Systeme.io

Systeme.io is an all-in-one marketing platform with a built-in funnel and page builder. It supports custom HTML, CSS, and JavaScript through its Custom Code element and page-level code injection. This guide shows you how to embed an Embeddy widget on any Systeme.io funnel page or landing page.

⚠

Free plan limitations

Systeme.io's free plan includes funnel pages, but custom code features may be limited. If you cannot find the Custom Code element, check your plan level or upgrade. The head/body code injection method (Method 2) is available on all plans.

1. Prerequisites

•An active Embeddy account with at least one published widget.
•A Systeme.io account (free or paid). Custom code injection is available on all plans; the visual Custom Code element may require a paid plan.
•Your Embeddy iframe embed code -- copy it from your widget's Embed tab in the dashboard.
•A funnel with at least one page. Systeme.io pages are always part of a funnel -- navigate to Funnels to find your pages.

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

Systeme.io's page editor includes a Custom Code element that lets you insert raw HTML, CSS, and JavaScript directly into the page body. This is the best way to visually place an Embeddy widget.

Use this method when you want to embed a widget at a specific location on a funnel page. It takes about two minutes.

1
Open the funnel page editor
In Systeme.io, navigate to Funnels. Select your funnel, then click Edit on the specific funnel step/page you want to modify.
2
Add a new row or section
In the page editor, click Add Row or hover over an existing section and click the + button to add a new element area.
3
Add a Custom Code element
Click Add Element within the row. From the element list, select Custom Code (it may also appear as "HTML" or "Code"). The element will be inserted into the row.

Paste your Embeddy iframe code

Click the Custom Code element to open its code editor. Paste your Embeddy embed code and click Save:

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

5
Save the page
Click Save in the editor toolbar. Systeme.io funnel pages are live immediately after saving (no separate publish step needed).

Tip: The Custom Code element may not render a preview in the editor. Visit the live funnel page URL to confirm the widget displays correctly.

3. Method 2 -- Head/Body Code Injection

Systeme.io allows you to inject custom HTML, CSS, and JavaScript into the <head> or <body> of your funnel page through the page settings. This method works on all plans.

When to use this method: When you want to add tracking scripts to the head, or when the Custom Code element is not available on your plan. You can also use the body code field to append an iframe at the end of the page.

1
Open the funnel step settings
In your funnel, click the gear icon or Settings on the funnel step you want to modify (not the page editor -- the funnel step settings).
2
Find the Head/Body Code fields
Look for fields labelled Header Code (or "Head Tracking Code") and Footer Code (or "Body Tracking Code"). These inject code into the page's head and body respectively.

Paste your code

For a visible widget at the bottom of the page, paste your iframe in the Footer Code field. For scripts that must load early, use the Header Code field:

<!-- Footer Code: visible 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
Click Save. The code is applied immediately to the live funnel page.

4. Troubleshooting

Widget does not appear in the editor

Systeme.io's editor does not render Custom Code elements in real time. Visit the live funnel page URL to verify the widget loads correctly.

Custom Code element not available

The Custom Code element may not be available on the free plan. Use Method 2 (head/body code injection) instead, which is available on all plans. Alternatively, upgrade your Systeme.io plan.

Widget shows a blank area

Verify your widget is published in the Embeddy dashboard. Check the iframe src URL for typos in the WIDGET_ID or PROPS_ID.

Widget is cut off or has no height

Ensure you have set the height attribute on your iframe (e.g. height="500"). Systeme.io rows may have padding that affects the layout -- check the row settings.

Widget not responsive on mobile

Use width="100%" in your iframe and avoid fixed pixel widths. Systeme.io pages are responsive, and a percentage-width iframe will adapt to mobile screens.

5. FAQ

Can I embed a widget inside a Systeme.io email?

No. Email clients do not support iframes. Include a link in your email that directs subscribers to a funnel page where the widget is embedded.

Does Systeme.io support JavaScript in custom code?

Yes. Both the Custom Code element and the head/body injection fields accept JavaScript. Scripts will execute on the live page.

Can I use the widget on a Systeme.io blog page?

Systeme.io's blog editor is more limited than the funnel page editor. You may be able to add custom code via the blog post settings, but the visual Custom Code element is only available in funnel pages. For blogs, use the head/body code injection in the blog post settings if available.

Will the widget work with Systeme.io's custom domains?

Yes. The Embeddy widget works regardless of whether your funnel uses a Systeme.io subdomain or a custom domain.

Do I need a developer to add the widget?

No. Both methods require only pasting the iframe code -- no programming knowledge is needed.

Ready to embed on Systeme.io?

Create your widget in Embeddy's no-code builder and add it to your Systeme.io funnel page in minutes.

Start for Free

PreviousKartra NextBrevo