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.
• ​It is recommended to test 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. 1.

   In Webflow Designer, click the W (top-left) → Site Settings.

2. 2.

   Go to Custom Code → Footer Code.

3. 3.

   Copy the Navless embed code from the Content Hub.

4. 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:

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

   Click Save and Publish the site.

2) Open Navless Using a Secondary CTA

Steps:

1. 1.Open the page in Webflow Designer and select the button or element you want to use as the trigger.
2. 2.In the right-hand Style panel, add the class name that matches the script’s data-trigger (drop the dot).
   • ​Example: If data-trigger=".tg-trigger" → add class tg-trigger.
3. 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.
4. 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).

• ​Example: https://tours.domainname.com/share/XXXXXXX

3) Add the Navless Discover Chat to a Page

Steps:

1. 1.In Webflow Designer, go to the page where you want the chat.
2. 2.Add an Embed (Code Embed) element to that area.
3. 3.Paste the chat embed code found in the Embedding Navless Chat into the Embed editor.
4. 4.Click Save & Close, then Publish the site. Test the chat on the published page.

Styling and Interactivity:

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

4) Small Styling Tips (Brand the Chat)

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):

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

5) Quick Checklist

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

6) Troubleshooting (Common Issues)

• ​Clicking the button navigates elsewhere → the button still has a URL. Open Settings and clear the URL.
• ​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.
• ​Chat looks too small on mobile → set the embed container to width: 100%.