How to Enable Automatic URL Tracking with Webchat

With Chatbot Builder AI, your webchat agent can now automatically detect the current URL of the page it’s embedded on. This functionality enables your bot to deliver more contextual responses, gather page-specific analytics, and streamline user interactions. Below are two primary ways to leverage this feature, along with notes on how to reference the captured URL inside your bot’s scripts.

1. Default Usage (Simple Script Embed)

By default, you can embed the Chatbot Builder AI script as shown below. No further configuration is needed for basic functionality:

<script src="https://app.chatgptbuilder.io/webchat/plugin.js?v=6"></script> 

<script>  

ktt10.setup({    

id: "ko7Oedc9lPy",      

accountId: "1970516",    

color: "#36D6B5"         

}); 

</script>

How the URL is Tracked:

• The script (plugin.js?v=6) automatically captures the URL if loaded on the same page.
• You can reference the current URL in your chatbot logic using the custom field {{webchat_parent_url}}.

2. Advanced Usage (Dynamic Script Loading)

If you need greater control over how the chatbot script operates—such as dynamically loading the script, managing specific states, or automatically opening the chat—you can use a custom initialization function. This approach provides flexibility and allows you to tailor the chatbot's behavior to your specific needs.

Custom Webchat Initialization

let webchatInitialized = false; // Ensure the script is only loaded once 

function initializeWebchat() {  

if (webchatInitialized) return; // Prevent multiple initializations  

webchatInitialized = true;  // Capture the current page URL and encode it  

const parentURL = encodeURIComponent(window.location.href);  // Dynamically load the chatbot script with the 'parent' parameter  

const script = document.createElement('script');  

script.src = `https://app.chatgptbuilder.io/webchat/plugin.js?v=6&parent=${parentURL}`;  // Configure the chatbot after the script loads  script.onload = () => {    window.ktt10.setup({      id: "C7rHYMsMXUh",       // Replace with your Chatbot ID      accountId: "1970516",    // Replace with your Account ID      color: "#36D6B5",        // Customize the chat widget color      type: "container",       // Embed the chat widget in a container      element: "#FGZiRJTkavlYm2", // Target HTML element for the chatbot      headerTitle: "Get in Touch", // Header text for the chat widget      hideHeader: false,       // Show or hide the header      loadMessages: true,      // Automatically load chat history      showPersona: false       // Enable or disable chatbot persona display    });    // Optionally open the chat widget immediately    window.ktt10.open();  };  // Append the script to the document  document.head.appendChild(script); } // Trigger the initialization on page load or user action window.addEventListener('DOMContentLoaded', initializeWebchat);

3. Optional <iframe> Embedding

If you embed the chatbot within an <iframe>, you must manually pass the parent parameter to the webchat URL:

<iframe  

src="https://app.chatgptbuilder.io/webchat/?v=6&p=1970516&hideHeader=true&parent=ENCODED_URL"  

width="400"  

height="600"> 

</iframe>

Where ENCODED_URL = encodeURIComponent(window.location.href).

Usage Notes:

• Embedding via <iframe> is typically less flexible than loading the script directly on the page.
• Remember to keep the parent parameter updated for accurate URL tracking if the user navigates within an SPA (Single-Page Application).

Referencing the Current URL ({{webchat_parent_url}})

Inside your chatbot’s flows, logic, or custom scripts, use the {{webchat_parent_url}} field to retrieve the current page URL. 

Quick Reference Table

Important Notes & Best Practices

1. Use the Latest Version (v=6):

   • If you’re still using v=5, update your script source to v=6 for automatic URL tracking.

2. Single-Page Applications (SPA):

   • If your site uses an SPA framework, ensure you update or reinitialize the chatbot on route changes, so the parent parameter remains accurate.

3. Monitoring & Analytics:

   • Use the URL data for detailed analytics. For instance, see which pages trigger the most chatbot interactions or track user engagement flows across your site.

Support

If you have additional questions or run into any issues, feel free to reach out to our support team at [email protected]. We’re here to help you get the most out of Chatbot Builder AI!