Home / Categories / Editor
Can I paste in my own HTML, CSS or JavaScript?
Yes. Code goes in three places: the header and footer boxes in a page's Tracking settings, one account-wide field that covers every funnel, and the Raw HTML element you drag onto a page.
The three places code goes
| Destination | Where to find it | What it covers |
|---|---|---|
| Header code | Page editor, Settings, then the Tracking section | That one page |
| Footer code | Page editor, Settings, then the Tracking section | That one page |
| Tracking code field | Profile picture, Settings, then Sales Funnels | Every funnel in the account |
| Raw HTML element | Dragged onto the page like any other element | The spot you dropped it |
Getting to the first two: open Sites, then Sales funnels, then the funnel holding the page. Pick the page from the list on the left, click Edit page, then Settings in the upper left corner of the editor, and scroll down to Tracking.
Header or footer?
The header box takes any code that needs to sit between a page's head tags. The footer box takes any code intended for the document object model.
systeme.io's worked example for this pair is a Facebook tracking code, added through the Tracking section of a page's Settings.
The account-wide field
Some code, tracking in particular, has to be on every funnel. Rather than pasting it page by page, go to your profile picture, click Settings, then Sales Funnels, paste it into the Tracking code box, and save.
It then applies across all funnels automatically.
The four tags to leave out
When adding code to the header, footer, tracking or Raw HTML boxes, systeme.io says not to include any of these.
- <head> and </head>
- <footer> and </footer>
- <html> and </html>
- <body> and </body>
The page already has all four. What goes in the box is the fragment that sits inside them.
What a Raw HTML block actually holds
systeme.io's worked example is a video embed, and it publishes the right version and the wrong one side by side.
| What goes in the box | |
|---|---|
| Correct | <iframe src="link to your video"></iframe> |
| Incorrect | <div> <iframe src="link to your video"></iframe> </div> |
The wrapper is the whole difference between them. An iframe needs no extra tags around it.
What each language is for
systeme.io's own framing: CSS for custom style, JavaScript for animations such as a hover or click state on a button, HTML for titles, text, tables and divisions on the page.
Using the Raw HTML element
The Raw HTML element puts custom code into the body of most pages: sales pages, order forms, thank you pages and the like.
- Drag the Raw HTML element to the part of the page you want.
- Click it to open its settings on the left.
- Click Edit code.
- Paste the code into the box and click Save.
Two things about Raw HTML that look like faults
It is not available on info pages. If the element is missing from the side panel, check which page type you are editing before assuming something is broken.
It does not appear in Preview mode either. Raw HTML shows on the live page only, so an empty gap in preview is not evidence that the code failed.
The step that cannot be undone
Save before leaving the editor. Once changes are saved, the old version of the page cannot be restored.
Did this answer your question?
Keep reading
- Block, element, section: what is the difference? Three of these are parts of a page. The fourth is a saved copy of one.
- What is a master block, and when does it save you hours? A saved block that changes on every page at once, including the pages you forgot about.
- Why does it say "at least one email input is required"? A button is asking for a form. The page has not got one it recognises.