# 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="https://67180079-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKaMCOI4HEb21AIKZlkHe%2Fuploads%2FjG3g86cxHTXtjqKnKEHW%2Fimage%20(50).png?alt=media&#x26;token=6bbd75ce-42a4-458f-b81b-3e06e0336871" alt=""><figcaption></figcaption></figure></div>

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

<div align="left"><figure><img src="https://67180079-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKaMCOI4HEb21AIKZlkHe%2Fuploads%2FUhfe4J2bXiGVvD0ySDQf%2Fimage%20(51).png?alt=media&#x26;token=310ea2c4-f102-48f3-88df-f069b348a0f3" alt=""><figcaption></figcaption></figure></div>

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

<figure><img src="https://67180079-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKaMCOI4HEb21AIKZlkHe%2Fuploads%2FcdLMxAX5npQRD0vIL9Np%2FTourial-09-15-2025_02_37_PM.png?alt=media&#x26;token=a13679b2-f58f-4859-9e07-ea8decf9c05e" 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="https://67180079-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKaMCOI4HEb21AIKZlkHe%2Fuploads%2FWJzzdXexrxIZPger047q%2Fimage%20(52).png?alt=media&#x26;token=34036aff-ba30-49e8-8fe3-04fb4201565b" 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="https://67180079-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKaMCOI4HEb21AIKZlkHe%2Fuploads%2FlZ6tfK46ooGCE4TfKjxL%2Fnavlessimage.png?alt=media&#x26;token=bf922f1a-3e9f-4793-8805-c0789a9e1032" 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="https://67180079-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKaMCOI4HEb21AIKZlkHe%2Fuploads%2FT4zW329DtiEnNRFei8Pw%2Fimage%20(54).png?alt=media&#x26;token=4467e4ab-4cf5-4884-97a7-7713b85283bf" 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%.