> 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/guide/embed-a-guide-on-any-page.md). # Embed a Guide on any Page ### What this is for Once you've built a Guide, you'll want visitors on your own website to actually use it — without sending them off to a Navless URL. **Generate Embed** is a short wizard that turns a Guide into a small piece of code your web team can paste into any page. Visitors then interact with the Guide right inside your site. You can pick between two ways to let visitors open the Guide: a clickable **CTA button** ("Get Help", "Talk to Sales", anything you want) or an always-visible **chat input field** where they can type a question to start. ### Before you start * You need a published Guide to embed. * Someone on your team needs access to edit your page's HTML ### Step-by-step * Open the Guide you want to embed and click **Generate Embed** in the top-right corner of the toolbar.
* On the first step, choose what kind of trigger you want visitors to use: **Create a new CTA button** or **Add a chat input field**. The wizard will adjust the next step based on your choice.
* On the design step, style the trigger to match your site. A live preview updates as you edit. * For a **CTA button**, you can set the button text, the action (whether clicking opens the Guide's welcome screen or sends a specific opening prompt), background color, text color, size (small, medium, or large), and shape (rounded, pill, or square).
* For a **chat input field**, you can set the placeholder text, the send-button color, and the shape.
* Click **Continue** to move to the install step. You'll see two pieces of code, each with a copy button. * Button Example
* Chat Input Example
* Copy the **script tag** and paste it into your site's HTML, either inside the `` or just before the closing `` tag. Add it to every page where you want the Guide to be available. * Copy the **trigger HTML** and paste it wherever on the page you want the button or chat field to appear. * Save and publish your site changes. Refresh the page and the Guide trigger will appear where you pasted it. ### What success looks like Visitors see your CTA button or chat input sitting inline on the page, styled the way you set it. When they click the button (or type a question and hit enter), a panel slides in from the left and the Guide opens inside it. The rest of the page dims behind the panel. When the visitor closes it, a small re-open tab stays pinned to the edge of the screen so they can pick the conversation back up. ### Tips and gotchas ⚠️ **Important:** The embed uses a CSS class called `navless-cta` to find your trigger element on the page. If your page already uses that class name for something unrelated, those elements will turn into Guide triggers too. Rename them on your site before publishing, or let your web team know to watch for it. 💡 **Tip:** You can put the script tag on a page once and use as many triggers as you want on that page. A CTA button in the header and a chat input at the bottom is a common combination — both open the same Guide and roll up to the same analytics. 📝 **Note:** On mobile, the Guide panel takes the full screen instead of sliding in from the side. You don't need to do anything different — the layout adjusts automatically. ### Common questions #### Does my team need engineering to install this? No. Anyone who can edit your page's HTML can paste in the two snippets — whether you're on Webflow, WordPress, a custom React build, or anything else. The wizard tells you exactly where each piece goes. #### Can I change the design later without re-embedding? Yes. You can re-run the wizard to generate fresh code, or your developer can edit the colors directly in the trigger HTML — the styling lives inline in the snippet itself, so there's no separate stylesheet to update. #### Can I put the same Guide on multiple pages? Yes. Add the script tag to each page where you want the Guide available, then paste the trigger HTML wherever you want it to appear. You can also place multiple triggers on the same page. #### Will I see analytics for visitors who use the embed? Yes. Conversations through an embedded Guide flow into the same analytics as any other Guide session. The embed is a different entry point into the same Guide, not a separate product. #### What if I want a specific opening message instead of the Guide's welcome screen? On the design step for a CTA button, you can set the action to send a custom opening prompt instead of showing the welcome screen. The visitor clicks the button, the Guide opens, and your prompt becomes the first message — useful for things like "How do I get started?" on a pricing page. --- # 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: ``` GET https://docs.navless.ai/guide/embed-a-guide-on-any-page.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.