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

📅 Last updated: June 2026

⏱ 4 min read

✅ All plans

In this article, you will learn how to inject advanced HTML, CSS, and JS code directly onto your pages and funnels created within SystemeScale.

What you will need:

An active SystemeScale account.
Your valid HTML, CSS, or JavaScript code snippets.

Why add custom code to your pages?

By leveraging custom code, it is possible to drastically modify the default styles, functionalities, and structures of your assets beyond the standard editor capabilities.

CSS: To override and customize global styling variables across texts, buttons, and layouts.
JavaScript: To deploy complex functional animations (e.g., hover states, dynamic loading) or integrate tracking scripts (like the Meta Pixel or Google Analytics).
HTML: To embed external iFrames, build structured div tables, or construct highly specialized page divisions.

🛑

Important Formatting Restrictions

When inserting custom code into the header, footer, tracking panels, or Raw HTML elements, do not wrap your code in root document tags. The system automatically processes these, and including them will critically break your page rendering. Do not include:

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

Additionally, when embedding external media via an iframe, no extra structural wrappers are required.

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

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

1. Adding code to specific pages (Page-Level Tracking)

If you only need a script to fire on one precise page (e.g., a specific conversion event tracking snippet), you inject it directly into that page's backend parameters.

Access the Page Editor Settings

Navigate to the funnel containing your target page. Click Edit page to open the editor canvas. In the top-left corner of the sidebar, click Settings (1).

Locate the Tracking Section

Scroll down the settings panel until you reach the Tracking section (2). Here, you will find two distinct injection points:

Edit header code: Paste any scripts requiring initialization within the <head> tags (most common for analytics).
Edit footer code: Paste any operational scripts intended to load at the bottom of the Document Object Model (DOM).

⚙️ Settings

Blocks

Typography

Background

Tracking

Edit header code

Edit footer code

My Landing Page

Switch to the Settings tab (1) and scroll to Tracking (2) to inject page-specific header and footer scripts.

2. Adding global code to all Sales Funnels

Certain operational tags (like Meta Pixels or Google Tag Manager) must be present across your entire ecosystem. To avoid manually pasting the script onto every single page within every funnel, you can configure it globally at the account level.

Navigate to your Profile picture, click on Settings, and select the Sales Funnels menu tab on the left sidebar. Paste your universal tracking snippet directly into the Tracking code text area, and click Save.

Upgrade

Dashboard ▼

CRM ▼

Sites ▼

Emails ▼

SMS ▼

Automations ▼

Sales funnel settings

Tracking code

This code will be added automatically to the header of all your funnel pages.

3. Adding the "Raw HTML" element inline

The Raw HTML block allows you to insert custom structural code directly into the visual body of most pages (such as sales pages, order forms, and thank you pages).

💡

Page Type Restrictions

The Raw HTML element is not available on standard Info pages. If you are editing an Info page and cannot locate the "Raw HTML" block within your editor side panel, it is because custom inline HTML injection is not supported within that specific page architecture.

Drag and drop the element

From the visual editor sidebar, locate the Raw HTML block and drag it directly onto your canvas where you want the structure to render.

Edit the raw code

Click on the newly placed element to expose its settings. In the left panel, click the Edit code button (1) to display the modal popup text box (2).

< / > Raw HTML Element

Save your configuration

Paste your valid HTML code into the dark terminal text box (3), and immediately click Save (4). Once saved, you must also save the master page. Note: Custom HTML does not render inside the builder preview mode. It will only initialize when viewed on the live, published URL.

Edit HTML code ✕

                      <!-- Insert your custom HTML/JS/CSS here -->

                      <div class="custom-widget-block">

                        <h3 style="color: blue;">Custom Title</h3>

                        <script src="https://example.com/widget.js"></script>

                      </div>

Was this article helpful?

📄How to trigger custom code on the "webinar started" event→