> For the complete documentation index, see [llms.txt](https://docs.navless.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.navless.ai/sharing/embed-codes/embedding-navless/embed-a-guide-on-a-hubspot-landing-page.md).

# Embed a Guide on a HubSpot landing page

#### 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](https://claude.ai/chat/embed-a-guide-on-any-page.md) 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**.

<figure><img src="/files/YIbahDbBSuNZkoQPBMhR" alt=""><figcaption></figcaption></figure>

📝 **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.

<figure><img src="/files/XqqCVvniDSG7j5iFmBYV" alt=""><figcaption></figcaption></figure>

**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

<figure><img src="/files/dePE9wrUxtmw5tIawy8g" alt=""><figcaption></figcaption></figure>

* 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**.

<figure><img src="/files/O2RiBDFGSZYg7V4gnToH" alt=""><figcaption></figcaption></figure>

* 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.navless.ai/sharing/embed-codes/embedding-navless/embed-a-guide-on-a-hubspot-landing-page.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.