# Implementing Navless in WordPress
***
### 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 \)
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.
\
```html
```
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 \.
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 \.
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)**
```html
```
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.
```html
```
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:
```html
```
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 \).
* [ ] 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** `` 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 linked here](https://tourial.gitbook.io/tourial-customer-product-documentation/sharing/embedding-demos/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 \ 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 \