Embed Navless on a Custom Website

This guide shows you how to add Navless to any custom (non‑SPA, non‑React) website using simple copy‑paste steps.

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.

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:

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

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

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

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:

<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

• Next, launch the URL and copy everything after the /content/ in the URL

  • Example:

---

Option C: Launching the Navless Discovery Feed with Chat

1) First, follow the steps in the Embedding Navless Chat 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:

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

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