Dynamic Chatbot Configuration

How to dynamically configure different chatbots based on page URL

Display different chatbots on different sections of your website using JavaScript to dynamically select which chatbot loads based on the current URL. This allows you to provide specialized support for different user segments or website sections.

---

Why Use Dynamic Configuration?

• Specialized Support: Show product-specific chatbots on product pages

• User Segmentation: Display different chatbots for members vs. visitors

• Multi-language Support: Load language-specific chatbots automatically

• Single Script: Manage multiple chatbots with one embed code

---

Implementation Script

<script defer>
    // Create the Wonderchat script element
    var wcs = document.createElement("script");
    wcs.setAttribute("data-name", "wonderchat");
    wcs.setAttribute("data-address", "app.wonderchat.io");
    
    // Get the current page path
    var path = window.location.pathname;
    
    // Configure different chatbots based on URL patterns
    if (/^\/members\/[^/]+/.test(path)) {
        // Members area - use specialized chatbot
        wcs.setAttribute("data-id", "YOUR_MEMBERS_CHATBOT_ID");
    } else if (path.startsWith("/support/")) {
        // Support section
        wcs.setAttribute("data-id", "YOUR_SUPPORT_CHATBOT_ID");
    } else if (path.startsWith("/products/")) {
        // Products section
        wcs.setAttribute("data-id", "YOUR_SALES_CHATBOT_ID");
    } else {
        // Default - general chatbot
        wcs.setAttribute("data-id", "YOUR_GENERAL_CHATBOT_ID");
    }
    
    // Set script source and widget configuration
    wcs.setAttribute("src", "https://app.wonderchat.io/scripts/wonderchat.js");
    wcs.setAttribute("data-widget-size", "normal");
    wcs.setAttribute("data-widget-button-size", "normal");
    
    // Append the script to the page
    document.body.appendChild(wcs);
</script>

---

Setup Steps

1. Get Your Chatbot IDs

• Log in to your Wonderchat dashboard

• Find each chatbot you want to use

• Copy the chatbot ID from the embed code or settings

• Example ID: cm1hzlrdz04bthxcy5b849lma

2. Plan Your URL Structure

Decide which chatbot appears where:

• / → General support chatbot

• /members/* → Members-only chatbot with account-specific knowledge

• /support/* → Technical support chatbot

• /products/* → Sales chatbot with product information

3. Implement the Script

• Copy the script above

• Replace all YOUR_*_CHATBOT_ID placeholders with actual IDs

• Modify the URL patterns to match your site structure

• Add the script to your website template before </body>

4. Test Your Implementation

• Visit different sections of your website

• Verify the correct chatbot loads on each page

• Test the chatbot functionality

---

Common URL Patterns

Members Area

// Matches: /members/john-doe, /members/dashboard, /members/settings
if (/^\/members\/[^/]+/.test(path)) {
    wcs.setAttribute("data-id", "YOUR_MEMBERS_CHATBOT_ID");
}

Language-Based

// Different chatbots for different languages
if (path.startsWith("/es/")) {
    wcs.setAttribute("data-id", "YOUR_SPANISH_CHATBOT_ID");
} else if (path.startsWith("/fr/")) {
    wcs.setAttribute("data-id", "YOUR_FRENCH_CHATBOT_ID");
}

Subdomain-Based

// Check subdomain instead of path
var hostname = window.location.hostname;
if (hostname.startsWith("support.")) {
    wcs.setAttribute("data-id", "YOUR_SUPPORT_CHATBOT_ID");
}

Multiple Conditions

// Complex logic with multiple checks
if (path.startsWith("/enterprise/") && !path.includes("/pricing")) {
    wcs.setAttribute("data-id", "YOUR_ENTERPRISE_CHATBOT_ID");
}

---

Advanced Configuration

Dynamic Widget Sizing

// Smaller widget on mobile devices
if (window.innerWidth < 768) {
    wcs.setAttribute("data-widget-size", "small");
    wcs.setAttribute("data-widget-button-size", "small");
}

Page-Specific Positioning

// Move widget up on checkout pages to avoid covering buttons
if (path.startsWith("/checkout/")) {
    wcs.setAttribute("data-offset-bottom", "120");
}

---

Troubleshooting

Chatbot not appearing?

• Verify the chatbot ID is correct (check for typos)

• Ensure the chatbot is active in your dashboard

• Check browser console for JavaScript errors

• Confirm the script is loading (check Network tab)

Wrong chatbot loading?

• Add console.log(path) to debug which path is detected

• Check your URL patterns match exactly (remember leading slashes)

• Test patterns in order - more specific patterns should come first

Multiple chatbots appearing?

• Remove any existing static Wonderchat embed codes

• Ensure this script only loads once per page

---

For additional support, contact us at [email protected]