Embed a Guide on a HubSpot landing page

Add a Guide trigger to a HubSpot landing page using the page's Head HTML and a custom HTML module.

What this is for

You've generated embed code for your Guide and now need to get it onto a HubSpot landing page. HubSpot's default Button module can't hold the custom class and data attribute the embed needs, so the install splits into two pieces: the script goes into the page's Head HTML, and the trigger goes into a Rich text, Custom HTML, or Embed module on the page itself.

Before you start

• You need a published Guide and the two snippets from Generate Embed — the script tag and the trigger HTML. See Embed a Guide on any page for how to generate them.

• You need edit access to the HubSpot landing page you're adding the Guide to.

Step-by-step

Step 1: Add the script to the page's Head HTML

1. Open your landing page in the HubSpot page editor.

2. In the top menu, click Settings, then click the Advanced tab.

3. Paste your Navless script tag into the Head HTML field.

4. Click Apply changes.

📝 Note: If you want the Guide available on every landing page on your domain, paste the script into your domain-level Site header HTML instead. Go to Settings, then Content, then Pages, select your domain, and paste it under Site header HTML. You only need to do this once per domain.

Step 2: Add a module that supports custom HTML

The default Button module in HubSpot doesn't let you set a custom CSS class or data- attribute on the button element, so the trigger HTML from Navless won't work inside it. You need a module that accepts raw HTML.

1. In the page editor, click the + icon in the left sidebar to open the Add panel.

2. Search for and select one of the following: Rich text, Custom HTML, or Embed.

3. Drag the module onto the page where you want the trigger to appear.

Step 3: Paste the trigger HTML into the module

1. Click the module you just added to open its settings.

2. Switch the module to source-code or HTML view:

   • In a Rich text module, click Insert, then Embed

• A Custom HTML or Embed module accepts HTML directly — no toggle needed.

• Paste your trigger HTML — the full <button> or chat input snippet copied from Generate Embed.

• Click Apply or close the source-code view to return to the editor.

Step 4: Publish and test

1. Click Update or Publish in the top-right of the page editor.

2. Open the published page in a new tab.

3. Click the trigger you added. The Guide panel will slide in from the left.

What success looks like

Your trigger appears on the published page styled the way you set it in Generate Embed. When a visitor clicks the button or types into the chat input, the Guide opens inside a panel on top of your page. Conversations from this trigger flow into your Guide analytics alongside every other Guide session.

Tips and gotchas

⚠️ Important: The Rich text module's visual editor will strip or rewrite parts of your trigger HTML if you paste it into the regular text area instead of the source-code view. Always switch to source code before pasting. If the button shows up as plain text or loses its styling, the editor stripped it — paste it again through source-code view.

💡 Tip: If your theme exposes a custom CSS class field on the standard Button module, you can use that module instead by setting the class to navless-cta. Most default themes don't expose this field, which is why Custom HTML or Rich text source-code view is the reliable route.

📝 Note: You can place multiple triggers on the same page — a CTA button in a hero section and a chat input near the bottom, for example. Both fire the same Guide and roll up to the same analytics, so you only need the script tag once per page.

Common questions

Can I use HubSpot's default Button module for the trigger?

Not reliably. The default Button module doesn't expose a custom CSS class field or data- attribute field, so there's no way to tell Navless's script which button to attach to. Use Rich text (source-code view), Custom HTML, or Embed instead.

Where exactly does the script tag go — Head HTML or Footer HTML?

Either works, but Head HTML is the standard placement and is what the Generate Embed instructions assume. The async attribute on the script means it won't block your page from rendering even in the head.

Do I need to redo this on every landing page?

Only the trigger module. If you paste the script into your domain's Site header HTML once, it'll be available on every landing page on that domain — you'll only need to add the trigger module on each page that should display it.

The button shows up but clicking it doesn't open the Guide. What's wrong?

Usually one of three things: the script tag didn't make it into the Head HTML (or the domain-level header), the Rich text editor stripped the navless-cta class when you pasted the HTML, or your page caches an older version. Republish and hard-refresh first, then check the page source to confirm both the script and the class="navless-cta" attribute are present.

Will the embed work in HubSpot's drag-and-drop editor preview?

Previews in the editor often don't run third-party scripts, so the Guide may not open inside the preview view. Test on the published URL instead.