Skip to main content

Custom HTML

The Custom HTML component allows you to embed any raw HTML, JavaScript, or iframe code directly on a page. It is designed for marketing integrations such as HubSpot forms, meeting schedulers, Typeform surveys, Calendly widgets, and similar third-party tools.

Fields​

  • Embed Code (required): Paste the full HTML or script snippet provided by the third-party tool.

Where It Can Be Used​

The Custom HTML block is available in the content dynamic zone of the following pages:

  • Home Page
  • Category Pages (Product Categories)
  • Series Pages (Product Series)
  • Product Pages (per product)
  • Contacts Page
  • Resources Page
  • Content Pages

How to Add It​

  1. Open the page you want to edit in the Backoffice.
  2. Scroll to the Content dynamic zone at the bottom.
  3. Click Add a component and select Custom HTML.
  4. Paste your embed code into the Embed Code field.
  5. Save and publish the page.

Common Use Cases​

HubSpot Form​

Copy the embed code from HubSpot under Marketing > Forms > [Your Form] > Actions > Embed:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "YOUR_PORTAL_ID",
    formId: "YOUR_FORM_GUID"
  });
</script>

HubSpot Meeting Scheduler​

<div class="meetings-iframe-container" data-src="https://meetings.hubspot.com/your-link?embed=true"></div>
<script type="text/javascript" src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"></script>

Calendly Widget​

<div class="calendly-inline-widget" data-url="https://calendly.com/your-link" style="min-width:320px;height:700px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>

Typeform​

<div data-tf-live="YOUR_FORM_ID"></div>
<script src="//embed.typeform.com/next/embed.js"></script>

Important Notes​

warning

The Custom HTML block renders code exactly as entered — there is no filtering or sanitisation. Only paste embed codes from trusted third-party sources. Never paste code from unknown sources.

tip

Scripts inside the embed code are executed after the page loads. If a tool requires early loading (e.g. a tracking script that must be in <head>), use the Header Scripts field in Global Settings instead.

Best Practices​

  • Use one Custom HTML block per embed — do not combine multiple embeds in a single block.
  • Test embeds on the staging environment before publishing to production.
  • If a third-party embed stops working, check whether the embed code has changed in the tool's dashboard.