Setting up OnClick Trigger for the widget

To enable the onClick trigger for your widget, follow these simple steps:

1. Add the Script Tag

First, include the following script tag in your website’s HTML:

  <script>
     // First, set up the widget settings
     window.AISellerSettings = {
       agent_id: 'agent_id',
     };


     // Then load the widget loader script
     (function () {
       var w = window;
       var ew = w.AISeller;
       if (typeof ew === 'function') {
         ew('update', w.AISellerSettings);
       } else {
         var d = document;
         var i = function () {
           i.q.push(arguments);
         };
         i.q = [];
         i.q.push(['update', w.AISellerSettings]);
         w.AISeller = i;
         var l = function () {
           var s = d.createElement('script');
           s.type = 'text/javascript';
	   s.defer = true;
           s.src = 'https://d33t2173eag6fx.cloudfront.net/script/app/inbound-se-script/ai-seller.js
'; // Path to your widget script
           var x = d.getElementsByTagName('script')[0];
           x.parentNode.insertBefore(s, x);
         };
         if (document.readyState === 'complete') {
           l();
         } else if (w.attachEvent) {
           w.attachEvent('onload', l);
         } else {
           w.addEventListener('load', l, false);
         }
       }
     })();
   </script>

2. Whitelist Your Domain

3. Configure Widget Behavior

In the Widget Behavior section:

Expand the Behavior accordion.
Navigate to your domain from the list.
Under trigger options, choose:

✅ onClick (Function Call) to trigger the widget manually via a function call.

4. Paste the trigger function

Include the following function in your website code:

function callWidget(action = 'showAndConnect') {
 // Input validation
 if (typeof action !== 'string') {
   return false;
 }


 const windowWithAISeller = window;
 const { AISeller } = windowWithAISeller;


 if (!AISeller) {
   return false;
 }


 try {
   // Handle function-based AISeller (fully loaded)
   if (typeof AISeller === 'function') {
     if (typeof AISeller[action] === 'function') {
       AISeller[action]();
       return true;
     } else {
       AISeller(action);
       return true;
     }
   }


   // Handle object-based AISeller
   if (typeof AISeller === 'object') {
     // Queue-based (still loading)
     if (Array.isArray(AISeller.q)) {
       AISeller.q.push([action]);
       return true;
     }


     // Direct method call
     if (typeof AISeller[action] === 'function') {
       AISeller[action]();
       return true;
     }


     // Action not found
     return false;
   }


   // Unexpected AISeller type
   return false;
 } catch (error) {
   return false;
 }
}

5. Add the Button to Trigger the Widget

Here’s a simple HTML example with a button that injects the script and triggers the widget on click:

<!DOCTYPE html>
<html lang="en">
 <head>
   <title>Docket Widget Trigger</title>
      <script>
     // First, set up the widget settings
     window.AISellerSettings = {
       agent_id: 'agent_id',
     };


     // Then load the widget loader script
     (function () {
       var w = window;
       var ew = w.AISeller;
       if (typeof ew === 'function') {
         ew('update', w.AISellerSettings);
       } else {
         var d = document;
         var i = function () {
           i.q.push(arguments);
         };
         i.q = [];
         i.q.push(['update', w.AISellerSettings]);
         w.AISeller = i;
         var l = function () {
           var s = d.createElement('script');
           s.type = 'text/javascript';
           s.async = true;
           s.src = 'https://d33t2173eag6fx.cloudfront.net/script/app/inbound-se-script/ai-seller.js
'; // Path to your widget script
           var x = d.getElementsByTagName('script')[0];
           x.parentNode.insertBefore(s, x);
         };
         if (document.readyState === 'complete') {
           l();
         } else if (w.attachEvent) {
           w.attachEvent('onload', l);
         } else {
           w.addEventListener('load', l, false);
         }
       }
     })();
   </script>
   <script>
function callWidget(action = 'showAndConnect') {
 // Input validation
 if (typeof action !== 'string') {
   return false;
 }


 const windowWithAISeller = window;
 const { AISeller } = windowWithAISeller;


 if (!AISeller) {
   return false;
 }


 try {
   // Handle function-based AISeller (fully loaded)
   if (typeof AISeller === 'function') {
     if (typeof AISeller[action] === 'function') {
       AISeller[action]();
       return true;
     } else {
       AISeller(action);
       return true;
     }
   }


   // Handle object-based AISeller
   if (typeof AISeller === 'object') {
     // Queue-based (still loading)
     if (Array.isArray(AISeller.q)) {
       AISeller.q.push([action]);
       return true;
     }


     // Direct method call
     if (typeof AISeller[action] === 'function') {
       AISeller[action]();
       return true;
     }


     // Action not found
     return false;
   }


   // Unexpected AISeller type
   return false;
 } catch (error) {
   return false;
 }
}
   </script>
 </head>




 <body>
   <button onclick="callWidget(‘showAndConnect’)">Book a meeting</button>
 </body>
</html>

Have questions?

For any further assistance or troubleshooting, please reach out to our customer support team at [email protected].

Configuring Docket's Multi-Agent Platform

Setting up Dynamic Context Ingestion and Form Based Triggers