Embedding Navless (HTML)

Embedding Navless on a Standard HTML Website

If you're embedding Navless on a website that uses standard HTML (not a React app or single-page application), follow these steps:

---

🧭 Step 1: Choose What You Want to Embed

Navless can be embedded in several ways depending on your use case:

Option A: General Navless

This version allows you to embed the complete Navless experience, which utilizes the context of the page to determine the most relevant content.

• Go to Content Hub.

• Click "Copy Embed Code" at the top of the page.

Option B: Direct-to-Content Embed

This will launch Navless with a specific piece of content already loaded.

• Go to Content Hub.

• Locate the content you'd like to embed.

• Click the three-dot menu on the right side of the row.

• Select "Copy Embed Code".

Option C: Embed a Playlist

This will launch Navless as a pre-built playlist experience.

• Go to Playlists.

• Click Create Navless Playlist, or select an existing one.

• In the top right, click "Copy Embed Code".

---

💻 Step 2: Add the Code to Your Site

1. Paste the Embed Code Place the copied <script> embed code just before the closing </body> tag of your HTML page.

Add a Trigger Button or Element Wherever you'd like the Navless experience to be launched from (a button, link, or image), add this attribute to that HTML element: class="tg-trigger"

1. ✅ This can be added to multiple elements, but all of them must be present on initial page load. Navless won’t attach to dynamically rendered elements added after the page finishes loading.

---

✅ Example

Here’s what a working setup might look like:

<!-- Your Trigger Button -->

<button class="tg-trigger">Launch Navless</button>

<!-- Embed Code (Paste near the end of your HTML file) -->

<script

id="tg-script"

src="https://navless.tourial.com/tour-guide-embed.js"

data-trigger=".tg-trigger"

></script>

---