SAMIOS
Help Center

Add custom code and embeds

Use the Custom Code section to add your own HTML, CSS, and safe third-party embeds like Calendly or YouTube.

Open in SAMI OS

When the standard sections don't quite fit, the Custom Code section lets you drop in your own HTML and CSS — or embed a scheduling tool, video, or map — right inside your SAMI OS site.

Add the Custom Code section

The Custom Code section lives in the section palette in the builder, listed under the Tools category as "Custom Code."

  1. Open the builder

    Head to Website Builder and open the page you want to edit.

  2. Add the section

    Click to add a section and choose Custom Code from the Tools group. It drops in with a starter "Custom Section" block you can replace.

  3. Edit the HTML

    Select the section and edit its HTML field. This is the markup for your layout or embed — headings, paragraphs, divs, and styled elements all work.

  4. Add scoped CSS (optional)

    Use the CSS field to style the section. Your styles are automatically scoped to this section only, so they won't leak out and affect the rest of your site.

  5. Save and preview

    Save your changes, then preview the page to confirm the section renders the way you expect.

Add an optional heading to the section for a centered title above your custom content — handy when you're embedding a calendar or video and want a clear label.

Embed third-party tools safely

The Custom Code section is sanitized before it renders, so a bad snippet can't break — or compromise — your live site. A few things to know before you paste code in:

  • Scripts are stripped. Any <script> tags and inline event handlers (like onclick) are removed automatically. Use embeds rather than raw JavaScript.
  • Only whitelisted iframes are allowed. You can embed from YouTube, Vimeo, Google Maps, Calendly, Typeform, and Google Docs. An iframe from any other source is removed.
  • CSS stays put. Every rule you write is prefixed to this section's container, so it can't override your theme elsewhere.

To embed a tool, grab the provider's "embed" or iframe code — for example, the share-to-embed snippet from a YouTube video or your Calendly booking page — and paste it into the HTML field.

If an embed disappears after saving, its source isn't on the whitelist. Use one of the supported providers (YouTube, Vimeo, Google Maps, Calendly, Typeform, or Google Docs), or link out to the tool instead.

When to reach for it

For most pages, the built-in sections — covered in build pages with sections — are faster and stay on-brand automatically. Reach for Custom Code when you need a specific embed or a one-off layout the standard sections don't offer. You can still edit the rest of the page the usual way from the Website dashboard.

Related articles

Last updated 2026-06-21

Was this helpful?