# Implementing Navless in Webflow

## Before You Begin

* You will need access to **Webflow Designer** and **Site Settings** → **Custom Code** (the person who can publish the site). 
* Get the Navless embed code and any playlist Share Link IDs from your Navless contact. 
* We recommend testing changes on a staging/published URL after each step.

## 1) Add the Navless script to your Webflow site (Footer)

This registers the Navless site script on every page so playlists and chat can open. 

### Steps: 

1\) In Webflow Designer click the **W** (top-left) → **Site Settings**.

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

2\) Go to **Custom Code** → **Footer Code**.

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

3\) **Copy the Navless embed code** from the **Content Hub**.

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

4\)  **Do not delete** anything already in the box. Paste the Navless script at the **bottom** of the Footer Code field (below any existing code). Example:

```html
<script id="tg-script"  src="https://tour.tourial.com/tour-guide-embed.js"
  data-trigger=".tg-trigger">
</script>

```

* data-trigger=".tg-trigger" tells the script which on-page elements should open a playlist when clicked.&#x20;

5\) Click **Save** and **Publish** the site.

## 2) Open Navless using a Secondary CTA&#x20;

### Steps:&#x20;

1\) Open the page in Webflow Designer and **select the button** or **element** you want to use as the **trigger**.&#x20;

2\_ In the right-hand **Style** panel, add the class name that matches the script’s data-trigger (drop the dot).&#x20;

Example:&#x20;

`If data-trigger=".tg-trigger" → add class tg-trigger`

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

3\) In the right-hand **Settings** tab (Element Settings), make sure the **URL / Link** field is **blank**. If a link is set, the button will navigate away instead of opening Navless.

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

4\) Publish the site and click the button on the **published** page to test — it should open the Navless playlist.

NOTE: If you want the button to open a specific playlist, add the custom attribute “navlessShareSlug” and set the value to the slug of the playlist (everything after the /share/ in the playlist url).&#x20;

* Ex: <https://tours.domainname.com/share/**XXXXXXX>\*\*

## 3) Add the Navless Discover chat to a page&#x20;

### Steps:&#x20;

1\) In Webflow Designer, go to the page where you want the chat.

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

2\) Add an **Embed** (Code Embed) element to that area.&#x20;

3\) Paste the chat embed code found in the [Embedding Navless Chat linked here](https://tourial.gitbook.io/tourial-customer-product-documentation/sharing/embed-codes/embedding-navless/embedding-navless-chat) into the Embed editor.&#x20;

4\) Click **Save & Close**, then **Publish** the site. Test the chat on the published page.

### Styling and interactivity:&#x20;

* Edit the chat's placeholder textarea inside the snippet if you want to change the placeholder text or a added pre-filled prompt. Or add text to the textarea if you want to pre-fill the message.&#x20;
  * If you add a pre-promted questions, remove any disabled attribute on the chat send button inside the snippet so visitors can type/send immediately.&#x20;
* Ensure the embed container is set to **width: 100%** on mobile so the chat fits smaller screens.

## 4) Small styling tips (brand the chat)&#x20;

If you want the chat to match your site, you can change a few small CSS classes inside the embed code (or add global styles in Webflow):

```css
.tg-send-button { /* change background, radius */ }
.tg-textarea { width: 100%; padding: 12px; }
.tg-mic { fill: #yourBrandColor; }
```

## 5) Quick checklist&#x20;

* [ ] Paste Navless script into Webflow → Site Settings → Custom Code → Footer Code (at the bottom).&#x20;
* [ ] Save & Publish.&#x20;
* [ ] On each page where you want a playlist trigger:&#x20;
  * [ ] Select button → add class that matches data-trigger (e.g., tg-trigger).&#x20;
  * [ ] Element Settings → clear the URL field.&#x20;
  * [ ] Publish & test.&#x20;
* [ ] To add chat: Add Embed → paste chat code → Save & Close → Publish → Test.&#x20;
* [ ] On mobile, ensure chat container uses width: 100%.

## 6) Troubleshooting (common issues)&#x20;

* **Clicking the button navigates elsewhere** → the button still has a URL. Open Settings and clear the URL.&#x20;
* **Click does nothing** → confirm (a) the footer script is present on the published page, and (b) the button has the exact class as in data-trigger (case-sensitive) (c) check on a published page as some previews don’t load the footer scripts necessary.&#x20;
* **Chat looks too small on mobile** → set the embed container to width: 100%.


---

# 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/implementing-navless-in-webflow.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.