Skip to main content

Javascript Frontend API


When you sign up to Bento, you'll be able to copy and paste bento.js on your site. The script loads asynchronously and will not block your page from loading.


The following loads bento.js and fires off an event, bento:ready, that you can listen for. In this example it listens for the event and then fires off a bento.view() event. This is useful for tracking pageviews reliably.

<script src="{Site Key}.js" async defer></script>
window.addEventListener("bento:ready", function () {
if (typeof(bento$) != 'undefined') {
bento$(function() {
// bento.showChat();

Note: {Site Key} will automatically be replaced on the script page. Do not copy and paste the above verbatim.


In Bento, all new visitors are anonymous. If you'd like to identify a visitor, simply run the following command before you track an event or pageview.

bento.identify("[email protected]");

After you do so, all future events sent from this users device will be correctly identified as that person. Worth mentioning that all previous events sent from that visitors device will also be associated to that user. Magic, right?

Identify — Chat

In Bento, if you wish to identify a user in chat (not requiring self-identification) then you can use the following method. It requires both an email AND an identifier (like a user_id or account_id in your database).

window.addEventListener("bentochat:ready", function () {
window.$bentoChat.setUser("<identifier>", {
email: "<email>",
name: "Jane Doe",
phone_number: "",
console.log("running this");

Update Fields

If you'd like to update a visitors custom field (firstname, last_name, status, etc) run the following command _before you track an event or pageview.

bento.updateFields({ first_name: "Ash", last_name: "Ketchum" });

This will send their fields inside the event and update the visitor.


The following will build an event with a custom type/name and a details payload that you can filter by in Workflows.

bento.track("optin", { organisation_name: "Team Rocket" });

Track Purchase (Create Unique Events)

The following will track a purchase and increase/decrease the LTV of a customer. Note that the key stops duplicate values being tracked, this is important if you're loading this script on a thank you page and it loads multiple times. Cool, huh?

bento.track("purchase", {
unique: {
key: "INV1234", // a unique key — this stops duplicate unique events
value: {
currency: "USD",
amount: 1000, // in cents
cart: {
items: [
// an array of items, can be any format
product_name: "Product 1",
product_id: "1234",
quantity: 1,
price: 1000,


Fires an event with a tag inside. This can trigger automations.



// Renders or hides chat bubble.

// Opens or closes the chat window.

Get Email

If you have identified the device at least once during the session you can fetch that information for your own use. This will usually be available if someone has logged in, opted in via Bento Capture, or used a form on your site.


Spam Check

Got an important piece of content behind an opt-in and don't want your users putting fake emails in to get it? Leverage Bento's Spam API to ensure their email is correct before proceeding. NOTE: This does not check MX records as that can be super slow.

await bento.spamCheck(email);


This fetches the visitors details (email and whitelisted fields) and automatically fills out all forms on the page.


[BETA] Track Subdomains

If you have traffic going to multiple subdomains and wish to track people throughout that journey simply run the following at least once per pageview. We will attempt to add the visitors identifier to each link. Please test this thoroughly before going live.

bento.trackSubdomains(["", ""]);