Installing the script (activation) code

Friendly, All-Access Guide to Installing the Funneler AI Script

This expanded guide covers all major CMS options and plain websites. The core goal is the same: insert the following tag just before the closing </body> on your pages.

In your Funneler dashboard, go to Chat Funnels, click the activation code button, and copy the unique account code found within the <script>…your account code…</script> snippet. You may save this code locally for future reference.

Now choose your platform from the list below to get started.

---

Table of Contents

• 1) WordPress
• 2) Elementor
• 3) Beaver Builder
• 4) Divi
• 5) Other WordPress page builders
• 6) Child Theme or Site-wide Plugin (safe, maintainable approach)
• 7) Plugins for “Insert Headers and Footers” style insertions
• 8) WordPress Multisite considerations
• 9) Wix
• 10) Webflow
• 11) Squarespace
• 12) Joomla
• 13) Drupal
• 14) Magento / Adobe Commerce
• 15) Weebly
• 16) Shopify
• 17) Plain non-CMS / hand-coded websites

---

1) WordPress

Quick recap

• You’re inserting a small JavaScript tag just before the closing </body> tag.
• The code snippet: <script>…your account code…</script>

Best-practice overview

• Use a maintenance-friendly path (child theme or site-wide plugin) to survive updates.
• Clear caches after insertion; test in incognito to verify loading.

Path options

Path A: Page-builder friendly approach (Elementor, Beaver Builder, Divi, etc.)

• Elementor (and similar editors)
• Beaver Builder
• Divi
• Other builders (Thrive, Brizy, Oxygen, etc.)

Path B: Safe, maintainable approach

• Child Theme (recommended)
• Lightweight plugin (Code Snippets / WPCode)
• Functions.php enqueue (advanced)

Path C: Plugins for “Insert Headers and Footers” style insertion

• Insert Headers and Footers
• WPCode (Snippets)
• Code Snippets

Testing & troubleshooting

• View Source to confirm tag before </body>.
• Incognito testing; check console for errors.

---

2) Elementor

Approach

• Use a site-wide footer insertion via a snippet plugin (recommended) OR
• Place a snippet in Elementor’s Theme Builder footer (if you have Elementor Pro).

Steps (recommended site-wide method)

1. Install and activate a snippet plugin (e.g., WPCode or Insert Headers and Footers).
2. Create a new snippet.
3. Location: Before </body> (Footer).
4. Content: html <script>...your account code...</script>
5. Save and set to All Pages.
6. Clear caches and test.

Alternative (page-level)

• Edit a page with Elementor.
• Add an HTML widget near the bottom and paste the script tag.
• Note: To cover all pages, you’d need to repeat or use the site-wide method.

---

3) Beaver Builder

Approach

• Prefer a global footer or code injection method.
• If your theme supports it, add to footer.php in a child theme; otherwise, use a snippet plugin.

Steps (global code injection)

1. Install a snippet plugin.
2. Create a new snippet with location: Before </body>.
3. Content: the script tag.
4. Save, enable on all pages, clear caches, test.

---

4) Divi

Approach

• Divi has integration areas for code snippets.

Steps

1. Divi > Theme Options > Integration.
2. In “Before </body>” (or similar) paste the code.
3. Save changes and test across pages.

---

5) Other WordPress page builders

• Oxygen Builder, Thrive Architect, Brizy, etc.
• General guidance: use a global code insertion path via a snippet plugin or theme integration area when available.
• If no global option exists, resort to editing footer.php in a child theme with caution.

---

6) Child Theme or Site-wide Plugin (safe, maintainable approach)

1) Child Theme (recommended)

• Create/edit footer.php in your child theme.
• Insert the snippet just before </body>.

Example:

?php// Footer content...?>
<script>...your account code...</script>

• Why child themes? Updates to the parent theme won’t overwrite your changes.

2) Lightweight Plugin (Code Snippets / WPCode)

• Create a snippet: Location = Before </body>; Content = script tag.

3) Site-wide functions.php alternative (advanced)

<?php
// Footer content...
?>
<script>...your account code...</script>

---

7) Plugins for “Insert Headers and Footers” style insertions

Common steps

1. Install and activate the plugin.
2. Create a new snippet:
   • Type: HTML or Script
   • Location: Before </body> (Footer)
   • Content: the script tag
3. Apply to All Pages; clear caches; test.

---

8) WordPress Multisite considerations

• Use a network-wide code injection (via a site admin plugin) if you want the script on all subsites.
• Alternatively, add to the shared footer template or use a central child theme that propagates to all sites.

---

9) Wix

• Wix Editor: Settings > Tracking & Analytics or Custom Code.
• Add a new tool, place code in Footer, paste snippet <script>…your account code…</script>, apply to all pages, publish.
• Confirm with Page Source in a live view.

---

10) Webflow

• Project Settings > Custom Code > Footer Code.
• Paste the snippet <script>…your account code…</script> ,save and publish.
• Code runs site-wide on all pages.

---

11) Squarespace

• Settings > Advanced > Code Injection > Footer.
• Paste snippet <script>…your account code…</script>; save and publish.
• Code runs site-wide on all pages.

---

12) Joomla

Approach

• Use a site-wide template override or a simple extension that injects code before </body>.

Steps

1. Identify the template’s footer file (e.g., index.php in your template).
2. Insert the snippet <script>…your account code…</script> just before the closing </body>.
3. Clear caches and verify.

---

13) Drupal

Approach

• Use a site-wide HTML head/footer injection module or add a small custom module.

Steps

1. Install a module like “Block” or “Footer Scripts” (depending on Drupal version).
2. Add a block that outputs: html <script>...your account code...</script>
3. Place block in the footer region; test across pages.

---

14) Magento / Adobe Commerce

Approach

• Use the layout XML to add a script to the footer, or use a module that supports custom JS.

Steps

1. Create/modify layout update to include:

xml<referenceContainer name="before.body.end"> <block class="Magento\Framework\View\Element\Text" name="funneler_ai_script"> <arguments> <argument name="text" xsi:type="string"><![CDATA[<script>...your account code...</script>]>   

2. Deploy and test.

---

15) Weebly

Approach

• Use the site-wide Settings > SEO > Header Code or Footer Code (depending on version).
• Paste snippet in Footer; save and publish.

---

16) Shopify

Shopify is a bit different because it uses theme-level liquid templates rather than inserting raw HTML into every page. Here are practical, safe options to include your script site-wide:

Pink note on Shopify architecture

• Shopify themes render pages via Liquid templates. To add a script site-wide, you typically insert it into the theme’s theme.liquid file, just before the closing </body> tag. If you’re using Shopify Online Store 2.0, you can also use an app or theme sections to manage code snippets, but the common approach remains editing theme.liquid.

Approaches

Approach A: Theme editing (site-wide)

1. From Shopify Admin, go to Online Store > Themes > Actions > Edit code.
2. Open layout/theme.liquid (or layout/theme.liquid in some themes).
3. Just before </body>, insert:

html<script>...your account code...</script>

4. Save changes and test on storefront.

Approach B: Theme app extension or Shopify app (per-page or app-managed)

• If you’re using a code injection app or a Shopify App that manages snippets, use its UI to inject your snippet before </body> on all pages or on specific templates.
• Ensure the app is configured to load on all pages and that the snippet is exactly:

html<script>...your account code...</script>

Testing

• Open a storefront page, View Page Source to confirm the script tag appears before the closing tag.
• Check on mobile and desktop, and verify it loads without blocking content.

---

17) Plain non-CMS / hand-coded websites

Steps

1. Open your HTML files (index.html, page.html, etc.).
2. Before the closing </body>, insert: html <script>...your account code...</script>
3. Save and upload; clear caches; test.

Tips

• Maintain a single source of truth by centralizing the code in a common footer include if you serve many pages via server-side templates.

---

Testing & Troubleshooting

• Verify the tag is present just before </body> via View Source.
• Test in an incognito window to bypass cache.
• Check the browser console for errors (e.g., mixed content, CSP blocks, or syntax errors).
• If the script doesn’t load:
  • Confirm the URL is correct and accessible (HTTPS).
  • Ensure no conflicting script blocks use the same globals.
  • Consider deferring or asynchronously loading the script if needed, though the current instruction requests before </body>.

---

Quick reference checklist

•  Identify the platform and method you’ll use (WordPress + plugin, child theme, or page builder)
•  Prepare the exact snippet to insert
•  Insert the snippet <script>…your account code…</script> just before </body>
•  Clear caches (site, plugin, browser)
•  Verify with View Source and incognito testing
•  Document where you kept the change (for future updates)

Advanced Installation Options

Install on Specific Pages Only

Modify the code to show widget only on certain pages:

<script>
  // Only load on homepage
  if (window.location.pathname === '/') {
    var script = document.createElement('script');
    script.src = 'https://app.funneler.ai/chat-widget.js';
    script.setAttribute('data-funnel-id', 'YOUR_FUNNEL_ID');
    document.head.appendChild(script);
  }
</script>

Delay Widget Load

Wait for page to fully load first:

<script>
  window.addEventListener('load', function() {
    var script = document.createElement('script');
    script.src = 'https://app.funneler.ai/chat-widget.js';
    script.setAttribute('data-funnel-id', 'YOUR_FUNNEL_ID');
    document.head.appendChild(script);
  });
</script>

Custom Positioning

Override default position with CSS:

<style>
  #funneler-chat-widget {
    bottom: 80px !important; /* Move up from bottom */
    right: 30px !important;  /* Adjust from right */
  }
</style>

---

Google Tag Manager Installation

Using GTM? Follow these steps:

1. Create New Tag:

• Go to GTM dashboard
• Click “Tags” > “New”
• Name it “Funneler Widget”

1. Configure Tag:

• Tag Type: Custom HTML
• Paste your activation code

1. Set Trigger:

• Trigger: All Pages (or specific pages)
• Or use Page View trigger

1. Save and Publish:

• Click “Save”
• Click “Submit”
• Publish changes

---

Verifying Installation

Check if widget is working:

1. Visit Your Website:

• Open your site in a browser
• Look for chat widget in corner
• Try different pages

1. Test the Widget:

• Click to open chat
• Send a test message
• Verify AI responds

1. Check Browser Console:

• Press F12 to open developer tools
• Look for errors in Console tab
• Funneler should load without errors

1. Verify in Funneler Dashboard:

• Go to your funnel analytics
• Check if conversations appear
• May take a few minutes to sync

---

Troubleshooting Installation

Problem: Widget doesn’t appear

Solutions:

1. ✅ Check code is pasted correctly
2. ✅ Verify it’s in the <body> section, before </body>
3. ✅ Clear browser cache and refresh
4. ✅ Check browser console for errors
5. ✅ Ensure funnel is published and active
6. ✅ Try incognito/private browsing mode

Problem: Widget shows but doesn’t work

Solutions:

1. ✅ Verify funnel ID is correct
2. ✅ Check if funnel is active in dashboard
3. ✅ Look for JavaScript errors in console
4. ✅ Disable browser ad blockers
5. ✅ Check if other scripts conflict

Problem: Widget appears on wrong pages

Solutions:

1. ✅ Use conditional code (see Advanced Options above)
2. ✅ Install in page-specific templates
3. ✅ Use GTM with page-specific triggers

Problem: Widget position is wrong

Solutions:

1. ✅ Use custom CSS to adjust position
2. ✅ Check for CSS conflicts
3. ✅ Use browser DevTools to debug positioning

Problem: Multiple widgets appear

Solutions:

1. ✅ Code may be pasted multiple times
2. ✅ Check theme template and plugin both have code
3. ✅ Remove duplicate installations

---

Performance Best Practices

Optimize Load Times:

1. Load Asynchronously: Our code already does this
2. Place in Footer: Loads after main content
3. Use CDN: We serve from global CDN (automatic)
4. Lazy Load on Scroll: Advanced option available

Mobile Optimization:

• Widget is automatically responsive
• Touch-friendly on mobile devices
• Adjusts size for small screens
• Can hide on mobile if needed:

<style>
  @media (max-width: 768px) {
    #funneler-chat-widget {
      display: none !important;
    }
  }
</style>

---

Removing the Widget

To remove Funneler widget:

1. Locate where you pasted the code
2. Delete the entire <script> block
3. Save changes
4. Clear cache
5. Refresh your site

Note: Removing the widget doesn’t delete your funnel or data. You can reinstall anytime.

---