# 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 \

```
--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.navless.ai/sharing/embed-codes/embedding-navless/implementing-navless-in-wordpress.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.