Skip to main content

Setting up OnClick Trigger for the widget

F
Written by Fadhil Faisal
Updated yesterday

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.async = true;
S.defet = 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

Log in to the Docket AI Dashboard and 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/manual/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].

Did this answer your question?