Custom code sections: frame or into the page

A custom code section is your own HTML, CSS and JavaScript as a section, for what a normal section cannot do: a countdown, a calculator, a bespoke layout. It is on every plan, on funnel pages and website pages. In Add section, it sits under Custom code. This article covers how it draws, what search engines read, and what to expect as a coach or an assistant author.

How it draws

The section's panel has a setting, How it draws, with two choices.

• In its own frame (the default). It runs in a sandboxed frame of its own, script and all, so it cannot break the rest of your site or reach a visitor's sign-in. Search engines do not read what is inside it. A link in a frame moves the page only on a real click by the visitor.

• Into the page. A block with no script is drawn into the page itself, so search engines read its words. No script runs: anything that could is removed, and the section's Style tab applies only inside this block.

A block with a script always stays in its frame, whatever you pick. The panel says so: This block has a script, so it still runs in its own frame. Clear the Script tab to draw it into the page.

Fill-in fields (slots)

Put a placeholder such as {{text:headline}} in the HTML, and the section's Content panel shows a plain field for it, so you change words, photos and links later without touching code. Words or photos written straight into the HTML are code only: the panel cannot edit them. A form or a booking slot shows only when the block is drawn into the page, where it mounts your real form or booking picker inside the layout. Never draw a form in HTML: stack a form section between custom sections instead, or use a slot.

What "Into the page" removes

Your HTML passes a strict allowlist every time the page draws. Kept: text, headings, lists, tables, links, pictures, simple video and audio, details, and plain SVG shapes. Links must go to an https address, a page on your site, a part of the same page, a mail address or a phone number. A picture must be an https address or a photo Drry serves. A style attribute keeps only what loads nothing but such a photo.

Removed: scripts, event handlers such as onclick, frames, forms and inputs, objects and embeds, base, meta, link and style elements, and any javascript: or data: address. Under the block, the editor says what it removed: Drawn inline, the sanitizer removed ...

The CSS is scoped to the block, and the block sits in a box that nothing in its own CSS can paint outside of. Each @keyframes and @font-face name in it is renamed to the block's own, so two blocks never share an animation or font name. A rule whose name is not plain words (an escape or a quote in it), or a font face without exactly one font family, is left out. A block holding a real form also drops any rule that reads a choice state (:checked, :placeholder-shown and so on) and loads a url().

Custom style for this section

Every section's Style panel, under More control, ends with Custom style for this section: CSS that applies to this section only and cannot reach the rest of the page. It is stricter than it used to be for every section: a selector that reaches a sibling of the section (a ~ or + combinator leaving the section) and selectors on an element's value attribute are dropped.

Site-wide code for custom sections

In Website, Settings, Custom code, the Custom code sections card holds a style sheet and a script written once for every custom section on your website. Sections in their frame get both. A section drawn into the page gets the style sheet only, scoped like its own CSS: an @import in it is left out (choose fonts in your site look instead), a keyframes or font-face rule with an unreadable name is left out, and a sheet that cannot be scoped is left out whole. The card says which of these applies. Only the owner and admins change it.

Search and Score

A page's Score adds a Words search can read warning when a custom section that runs in its frame holds more than 40 words of visible text. A block drawn into the page is read like any section and is not counted. See What search and AI engines see.

For an assistant

An assistant writes a custom section's name, HTML, CSS, JavaScript and slot values, and chooses frame or inline. Its answer after every page write names any custom block with 12 or more words, or any photo, fixed in its HTML instead of a slot, and says what the sanitizer removed from a block drawn into the page. In a screenshot, a block with no script is drawn from its HTML and CSS, and one with a script shows as a placeholder, so the assistant also gets a private link to the page, good for one hour, where scripts run. Site-wide code and shared section code are for the owner and admins. See Edit your website with your assistant.