Custom HTML, CSS, and JS injection
Site Designer is a visual tool, but sometimes you need to insert raw code at a specific point on the page. There are four injection points, each suited to different needs.
Per-element HTML injection
Every element on the canvas has underlying HTML attributes and structure. You can edit these directly.
- Select an element on the canvas.
- Open the Content pane (the middle tab in the right panel).
- Click the HTML tab.
- Edit the raw HTML for that element — add custom attributes,
data-*attributes, ARIA attributes, or tweak the tag directly.
This is useful for adding aria-label, data-tracking-id, or any attribute not exposed through the visual controls.
The HTML Code element
The HTML Code element is a special canvas element that renders a raw block of arbitrary HTML. Use it to embed third-party widgets, iframes, map embeds, or anything that requires markup you write yourself.
- Open the Elements panel in the toolbar.
- Find the HTML Code element (look under the “Code” or “Embed” category).
- Drag it onto the canvas at the position you want.
- Double-click the element to open the code editor.
- Paste or type your HTML. The canvas renders a preview (for embeds, the canvas may show a placeholder — the real output appears in the browser).
Common uses for the HTML Code element:
- Embedding a Google Map or Apple Map iframe.
- Adding a third-party form (Typeform, Jotform, HubSpot).
- Inserting a video player embed (YouTube, Vimeo, Wistia).
- Placing a social media feed widget.
- Adding a cookie consent banner provided by a third-party script.
Inline CSS injection
For CSS rules that do not map to any control in the Style pane, add them directly to the element’s inline styles.
- Select the element.
- Open the Style pane.
- Scroll to the Custom CSS field at the bottom of the pane.
- Type valid CSS property-value pairs. These are written as element-level inline styles in the exported HTML.
Use this sparingly — element-level inline styles are hard to maintain and override globally. When possible, define a class and style through the class system.
Page-level code injection
Add code to a single page’s <head> or </body> footer via Page Properties.
- Page Head — CSS, meta tags, or scripts specific to this page.
- Page Footer — JavaScript that should load after the page content, scoped to this page only.
See the Global head and footer code article for the full execution order.
Global Code
For code that must appear on every page, use Settings → Project → Global Code. See the Global head and footer code article.
Choosing the right injection method
| What you need | Use |
|---|---|
| Custom attribute on one element | Per-element HTML injection (Content pane) |
| Third-party embed at a specific canvas position | HTML Code element |
| CSS rule not in the Style pane | Custom CSS field in Style pane |
| Script or style for one page | Page Properties → Code tab |
| Script or style for every page | Settings → Global Code |
