Is it possible to insert HTML, CSS, or JS code?

In this article, you will learn how to insert HTML, CSS, and JS code on pages created with systeme.io.

You will need:

a systeme.io account
HTML, CSS, or JS code

Why add custom code to your pages?

By adding HTML code to your page, it's possible to add custom style, functionality, and structure to the contents of images, text, links, etc...

For example:

To customize the style, you can add CSS code.
To add animations on a page or individual elements (for example when hovering over or clicking a button), add JS code.
To add titles or text in general, create tables, parts, and divisions on your page, add HTML code.

Important notes:

When adding custom code into the header codes, footer codes, tracking codes or raw html code sections, do not include any of the following tags:

<head> </head>
<footer> </footer>
<html> </html>
<body> </body>

When adding video using iframe, no extra tags are required.

Incorrect:

<div> 
    <iframe src="link to your video"></iframe>
</div>

Correct:

<iframe src="link to your video"></iframe>

1. Adding codes in the "Tracking Codes" section:

To insert Facebook tracking codes, go to the sales funnel containing the page on which you want to place the code.

Select the funnel page from the page list on the left and click "Edit page".

Click "Settings", located in the upper left corner, then scroll down to the "Tracking" section.

1.1 Codes to be inserted in the header code section

In this section, you should paste any code that needs to be within a page's <head> and </head> tags.

1.2 Codes to be inserted in the footer code section

In this section, add any code intended for the "Document Object Model" (DOM).

2. Adding code from the Sales Funnel Settings:

Some codes must be added to each funnel page to get accurate tracking.

To avoid having to repeat the process of pasting the code onto each page, you can apply the codes globally to all of the funnel's pages automatically.

To apply the codes automatically to all pages, go to your Profile picture, click on "Settings", and then on "Sales Funnels" from the items on the left. Paste the tracking code in the "Tracking code" text box and click "Save".

3. Adding an "HTML Code" element to the page:

It's also possible to insert any HTML code directly on a page via the page's editor.

1. Add the "Raw HTML" element by dragging it to the desired part of your page.

2. Select the small scroll wheel of the item to display the item's settings (number 1 in the image).

From the left pane, click "Edit code" to display the popup where you can paste your code (number 2 in the image).

Add the HTML code to the text box (number 3 in the image), then "save" (number 4 in the image).

Make sure to save your changes.