Implementing Navless in WordPress | Navless Product Documentation

The documentation provides detailed instructions for integrating Navless into a WordPress site by globally adding the Navless embed script via plugins, theme files, or child theme edits, and then launching Navless playlists from buttons using CSS class triggers or custom JavaScript, emphasizing testing on staging sites and careful placement of the script in the footer to avoid render blocking.

Before You Begin

WordPress admin access (install plugins and edit pages).
Your Navless site embed script URL (and any required attributes).
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.

Step 1 — Add the Navless script globally (footer / end of <body>)

Adding the site script site‑wide registers Navless so buttons and chat can open the experience on any page.

Option A — Headers/Footers plugin (no code theme edits)

1.WP Admin → Plugins → Add New → install a headers/footers plugin (e.g., WPCode – Insert Headers & Footers or Code Snippets).
2.Open Header & Footer (or Code Snippets → Header & Footer).
3.Paste your script in the Footer box and Save.

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

Notes:

data-trigger=".tg-trigger" tells Navless which elements should launch a playlist when clicked.
If you remove ?shareLinkSlug=..., chat can use the page’s visible text as context for suggestions.

Option B — Theme integration (developer)

Place the exact same script low in your theme (e.g., via wp_footer or a footer partial) so it renders near the end of <body>.

Tip: Keep the script low in the page (footer) so it doesn’t block initial render.

Option C (advanced): Child theme footer.php

Warning: Only use this if you’re comfortable editing theme files. Always use a child theme so updates don’t wipe changes.

1.WP Admin → Appearance → Theme File Editor → open footer.php in your child theme.
2.Paste the same script just above </body>.
3.Update File.

Step 2 — Launch a playlist from a Button

Choose one of the two methods below based on your theme/builder.

Method A — Class‑based trigger (no custom JS)

Use when your builder lets you add a CSS class to the button and (ideally) remove the URL.

1.Edit the page and select the Button block.
2.In Advanced → Additional CSS class(es), add: tg-trigger
3.If your builder forces a link, set URL to # so it won’t navigate away.
4.Update the page and test.

This method relies on data-trigger=".tg-trigger" in your site script: when clicked, Navless intercepts and opens.

Method B — onClick handler (most robust)

Use when your builder won’t allow a clean class-only approach, or adds the button dynamically.

Option 1 — Inline onClick (when allowed by your builder)

<button
  id="navless-launch-btn"
  onclick="window.Navless.openNavlessModal(null, 'YOUR_PLAYLIST_SLUG')">
  Take a Tour
</button>

Option 2 — Small JS listener (when inline handlers aren’t allowed)

Add this once (in a theme JS file or snippet plugin) and target your button by ID or class.

<script>
  // Delegate clicks so it still works if the button is injected later
  document.addEventListener('click', function (e) {
    const btn = e.target.closest('#navless-launch-btn'); // or '.your-button-class'
    if (!btn) return;
    e.preventDefault();
    window.Navless && window.Navless.openNavlessModal(null, 'YOUR_PLAYLIST_SLUG');
  });
</script>

Tip: Delegation handles buttons injected later (builders, A/B tools) and lets you preventDefault() to avoid unwanted navigation.

Optional — Per-button overrides (attributes)

If your embed supports per-element attributes on .tg-trigger, you can override what opens:

shareLinkSlug="YOUR_PLAYLIST_SLUG" — open a specific playlist
featuredContentId="YOUR_CONTENT_ID" — open with a featured item
chatInput="Your pre-prompted question here" — seed the chat input before open

Example:

<button
  class="tg-trigger"
  shareLinkSlug="YOUR_PLAYLIST_SLUG"
  featuredContentId="YOUR_CONTENT_ID">
  Take a Tour
</button>

If you are using Elementor, go to the button you want to edit → Advanced → Attributes, then enter the custom attributes you want to specify:

shareLinkSlug|yourSlugGoesHere
featuredContentId|contentIdGoesHere

Quick Checklist (copy/paste)

Site script added globally (footer/bottom of <body>).
Button configured with one of the following:
- Class method: .tg-trigger present and link doesn’t navigate away, or
- JS method: onClick handler attached (inline or delegated in theme JS).
(Optional) Per-button attributes added as needed (shareLinkSlug, featuredContentId, chatInput)
Tested in incognito; caches cleared or script versions bumped after JS changes

Troubleshooting

Click does nothing
- Confirm the site script is present on the published page (view source).
- For the class method, verify the class exactly matches your script’s data-trigger (case-sensitive).
- For the JS method, confirm your selector (ID/class) matches the button and that the handler loads on that page. Using delegated listeners solves timing issues.
Builder forces navigation away
- Use the onClick handler approach and call preventDefault() (as shown above) to intercept the click.
Performance concerns
- Keep the site script near the end of <body> so it doesn’t block initial render.

Step 3 — Place the chat input on a page

Why: The chat input (search bar) is what visitors type into; it forwards their question to Navless and can deep-link into content.

A. Add a Custom HTML block

In the block editor (or Elementor’s HTML widget), add a Custom HTML block where you want the chat box to appear.

B. Paste the chat input template

1.Paste the chat embed code found in the Embedding Navless Chat into the Embed editor.

Customize quickly:

Placeholder vs default text
- Use placeholder="..." for hint text.
- To prefill text, put the default text between <textarea>…</textarea> and (optionally) remove disabled on the send button.
Enable “Send” immediately
- Remove disabled on .tg-send-btn if you want a pre-prompted question to be submit-ready.
Branding colors
- Update .tg-send-btn { background: ... } and .tg-mic-btn { color: ... } in the <style> at the top.

Step 4 — Performance & caching (WP Rocket fix)

If you run WP Rocket with “combine/minify JS,” it WILL rewrite the Navless script into a combined bundle, which will BREAK the experience (e.g., wrong domain/path). The fix is to exclude your Navless subdomain from JS concatenation, then clear cache.

How to exclude in WP Rocket:

1.WP Admin → Settings → WP Rocket → File Optimization → JavaScript
2.Under Excluded JavaScript Files, add your Navless domain (e.g., your-subdomain.tourial.com).
3.Save and Clear/Preload cache.
4.Test in an incognito window.

Reference: WP Rocket guide — Excluding external JS from concatenation

Step 5 — How chat chooses content (what to expect)

Chat answers are LLM-driven and can vary; pinning specific chat responses isn’t supported. For curated, guaranteed order, use a playlist (covered in the above “playlist from a button” guide).

Testing & Publishing Checklist (copy/paste)

Site script added globally in Footer (Step 1) and published.
?shareLinkSlug=... removed if you want page-context behavior.
Chat input template added via Custom HTML block (Step 2).
Placeholder/default text and send enabled state set as desired.
Branding tweaks applied to .tg-send-btn and .tg-mic-btn.
WP Rocket (if used): Navless subdomain excluded from JS concatenation + cache cleared.
Tested in incognito (not logged-in) to verify caching isn’t masking changes.

Troubleshooting

Click opens wrong path or 404
- Exclude your Navless subdomain from WP Rocket JS concatenation, then clear caches.
Send button won’t activate
- If you want a pre-prompted question, remove disabled from the .tg-send-btn. Otherwise, the button is enabled automatically when the textarea has content.
Site styles look “off” after adding the chat
- Keep all styling scoped to .tg-* classes. If your global typography gets affected, avoid forcing global font-family outside the chat snippet.
Why are chat answers not identical each time? Can we pin them?
- Chat is dynamic. Use a playlist for curated, pinned experiences (covered in your upcoming “playlist from a button” guide).

Appendix — Example button & chat snippets

Trigger button (class method):

<button class="tg-trigger">Take a Tour</button>

Trigger button with playlist override:

<button class="tg-trigger" shareLinkSlug="YOUR_PLAYLIST_SLUG">Take a Product Tour</button>

Inline onClick button:

<button onclick="window.Navless.openNavlessModal(null, 'YOUR_PLAYLIST_SLUG')">
  Launch Tour
</button>

Minimal chat container reminder (structure varies by snippet):

<style>
  /* Scope styles to tg- classes */
  .tg-send-btn { border-radius: 10px; }
</style>
<div class="tg-chat">
  <!-- paste your provided chat snippet here -->
</div>

Implementing Navless in WordPress | Navless Product Documentation

Before You Begin

Step 1 — Add the Navless script globally (footer / end of <body>)

Option A — Headers/Footers plugin (no code theme edits)

Option B — Theme integration (developer)

Option C (advanced): Child theme footer.php

Step 2 — Launch a playlist from a Button

Method A — Class‑based trigger (no custom JS)

Method B — onClick handler (most robust)

Optional — Per-button overrides (attributes)

Quick Checklist (copy/paste)

Troubleshooting

Step 3 — Place the chat input on a page

A. Add a Custom HTML block

B. Paste the chat input template

Step 4 — Performance & caching (WP Rocket fix)

Step 5 — How chat chooses content (what to expect)

Testing & Publishing Checklist (copy/paste)

Troubleshooting

Appendix — Example button & chat snippets

Related