# Embed Navless on a Custom Website

## What you’ll need

* Access to your site’s HTML **template** (or page HTML) so you can paste one `<script>` before the closing `</body>` tag.
* Access to **Tourial → Content Hub** to copy your **Navless** embed code.

***

## Step 1 — Add the base embed code

1. In **Tourial → Content Hub**, click **Copy Embed Code** at the top.

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

1. Paste the copied `<script>` just **before** the closing `</body>` tag on every page where you want Navless to work (best practice: paste it in your **site layout / root template** so it’s available everywhere).

**Example:**

```html
<!-- Navless base embed: paste right before </body> -->
<script
  id="tg-script"
  src="https://navless.tourial.com/tour-guide-embed.js"
  data-trigger=".tg-trigger"
></script>
```

***

## Step 2 — Choose how people will open Navless

You can launch Navless via a secondary CTA to open a specific playlist or piece of content, or launch AI Mode. You can also launch the Navless Discovery Feed directly via Chat.

### Option A: Open Navless in AI Mode

\
To launch Navless in AI Mode, where AI takes the context of the page and determine the best featured content to show, just add the below `onclick` handler to any HTML element you want clickable. You can add this trigger to multiple elements:

```html
<button onclick="window.Navless.openNavlessModal()()">Launch Navless</button>
```

**Important:** On standard HTML sites, these trigger elements need to be present **on initial page load**. Elements added later via JavaScript won’t auto‑attach.

### Option B: Launching a specific Navless Playlist

#### **A) Open a Share Link / Playlist**

* Locate the HTML element you want to trigger the Playlist and add the below `onclick` handler:

```html
<button onclick="window.Navless.openNavlessModal(null, 'shareLinkSlugGoesHere')()">
  Open Playlist
</button>
```

* To locate your shareLinkSlug, navigate to the Share Link for the Navless playlist you'd like to feature, and copy everything after the /share/
  * Example:

<figure><img src="/files/0cp50uhtHHzY5D2zc7D2" alt=""><figcaption></figcaption></figure>

#### **B) Open a Featured piece of content**

* Locate the HTML element you want to trigger the specific piece of Navless content and add the below `onclick` handler:

```html
<button onclick="window.Navless.openNavlessModal('featuredContentIdGoesHere')()">
  Open Featured Content
</button>
```

* To locate your ContentID, navigate to the Content Hub and click the three dot menu next to the piece of content you'd like to feature and click Copy Link

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

* Next, launch the URL and copy everything after the /content/ in the URL
  * Example:

<div align="left"><figure><img src="/files/dUSfeOjvuYgNyaq3QdFK" alt=""><figcaption></figcaption></figure></div>

***

### Option C: Launching the Navless Discovery Feed with Chat

1\) First, follow the steps in the [Embedding Navless Chat](/sharing/embed-codes/embedding-navless/embedding-navless-chat.md) guide to implement the Navless Discovery Feed embed code

2\) Open Navless Discovery Feed with a default chat prompt

* Locate the HTML element you want to trigger the Navless Discovery chat feed and add the below `onclick` handler:

```html
<button onclick="window.Navless.sendChatInput('chat message goes here')">
  Ask Navless
</button>
```

### Quick test checklist (2 minutes)

* Load your page and open the **browser console** (optional).
* Click your **trigger** button or link.
* You should see the Navless modal/chat open. If not, check the troubleshooting below.

***

### Troubleshooting

#### “Nothing happens when I click my button.”

* Make sure the base `<script>` is **before** `</body>` and loads without errors (check the browser console → Network tab for `tour-guide-embed.js`).

#### “Where do I find the **share link slug** or **featured content ID**?”

* **Share link slug:** In **Content Hub**, create or open your share link/playlist. The slug is typically the unique part of that link. If you’re unsure which part to use, copy the full share link and ask your Tourial contact to confirm the slug.
* **Featured content ID:** In **Content Hub**, open the item you want to feature. If you don’t see an obvious ID, your Tourial contact/CSM can point you to the correct value.

#### “Do I need to worry about CSP, ad blockers, or cookie banners?”

* If your site uses a **Content Security Policy (CSP)**, ensure `https://navless.tourial.com` is allowed for scripts.
* If a **cookie/consent** system blocks 3rd‑party scripts until consent, make sure the Navless script loads after consent is granted.
* Try an **incognito window** and disable extensions temporarily to rule out blockers.

#### Accessibility best practices

* Use semantic elements (e.g., `<button>`) for triggers.
* Provide descriptive button text like “Open product help” rather than “Click here.”

***

### Minimal working example (copy, paste, test)

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Navless Demo</title>
  </head>
  <body>
    <h1>Navless Demo</h1>

    <!-- Option A: auto‑attach via class -->
    <button onclick="window.Navless.openNavlessModal()()">Launch Navless</button>

    <!-- Option B examples -->
    <button onclick="window.Navless.sendChatInput('How do I get started?')">
      Ask Navless (Chat)
    </button>

    <button onclick="window.Navless.openNavlessModal(null, 'yourShareLinkSlug')()">
      Open Playlist
    </button>

    <button onclick="window.Navless.openNavlessModal('yourFeaturedContentId')()">
      Open Featured Content
    </button>

    <!-- Base embed (keep just before </body>) -->
    <script
      id="tg-script"
      src="https://navless.tourial.com/tour-guide-embed.js"
      data-trigger=".tg-trigger"
    ></script>
  </body>
</html>
```

***

### FAQs

* **Q:** *Can I have multiple triggers on the same page?*\
  **A:** Yes. Add `onclick` handlers to as many elements as you like.
* **Q:** *Can I open different kinds of Navless experiences from different buttons?*\
  **A:** Yes. Use the appropriate `onclick` example for Chat, a Share Link/Playlist, or a specific Featured item.
* **Q:** *What if I want a different default chat prompt per button?*\
  **A:** Just change the text passed into `sendChatInput('...')` for each button.
* **Q:** *How do I remove/disable a trigger?*\
  **A:** Remove the `onclick` attribute.

***

### Need help?

If anything is unclear or you run into issues, ping your Tourial CSM or support team with a link to your page and a short screen recording. We’ll get you sorted quickly.


---

# Agent Instructions: 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/sharing/embed-codes/embedding-navless/embed-navless-on-a-custom-website.md?ask=<question>
```

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.