Web SDK

<script type="text/javascript">
  $botbrains = [];
  $botbrains.push(["set", "config", {
      frameId: 'YOUR_FRAME_ID',
  }]);
  (function(){d = document;s = d.createElement('script');s.src = 'https://chat.botbrains.io/loader.js';s.type = 'module';s.async = 1;d.getElementsByTagName('head')[0].appendChild(s);})();
</script>

// Check if the current page matches a specific URL
if (window.location.pathname === "/specific-page") {
  $botbrains.push(["do", "chat.hide"]);
}

// Check the screen width and hide the launcher if the width is below a threshold (e.g., 600px)
if (window.innerWidth < 600) {
  $botbrains.push(["do", "chat.hide"]);
}

<button
  onclick="$botbrains.push(['do', 'message.send', 'How does Feature XY work?'])"
>
  Get Help
</button>

const data = {
	first_name: "Liam",
	last_name: "van der Viven",
	email: "liam@botbrains.io",
	phone: "+4915168433056",
	external_attributes: {
		"plan": "business",
	}
};
$botbrains.push(["set", "user.data", data]);

if (window.location.pathname === "/product-abc")
	$botbrains.push(["set", "chat.suggestions", ["What ROI did customers see with ABC?", "Does ABC have regional hosting?", "Can I get a demo of ABC?"]])

// Handle Visibility of complete system
$botbrains.push(["do", "chat.show"]);
$botbrains.push(["do", "chat.hide"]);

// Expand Chat
$botbrains.push(["do", "chat.open"]);
$botbrains.push(["do", "chat.close"]);
$botbrains.push(["do", "chat.toggle"]);

// Change Position
$botbrains.push(["set", "chat.side", "left"]); // or 'right'
$botbrains.push(["set", "chat.marginSide", "20px"]); // or '10rem' or '10vw' or ...
$botbrains.push(["set", "chat.marginBottom", "20px"]); // ...

// Only if Previews are enabled, you can manually control them
$botbrains.push(["set", "preview.show"])
$botbrains.push(["set", "preview.hide"])

// Setting custom message tags
$botbrains.push(["set", "message.tags", [["Name", "Value"]]]);

// Prefill the message box
$botbrains.push(["set", "message.text", "Hi, how does product XY work?"]);

// Send the current message box
$botbrains.push(["do", "message.send"]);

// Combined: Prefill and send question immediately
$botbrains.push(["do", "message.send", "Hi, how does product XY work?"]);

// Check if the other commands are available
$botbrains.is("chat.ready");
$botbrains.is("chat.visible");
$botbrains.is("chat.opened");

$botbrains.is("preview.visible");

// Theme - defaults to user preference; values are "light"|"dark"|"auto"
$botbrains.push(["set", "config.theme", "dark"]);

// Locale - defaults to user preference; Values must be in BCP 47 'de' or 'de-CH'
$botbrains.push(["set", "config.locale", "de-CH"]);

// You can register and unregister functions with the same identity to run on a event.
// Callbacks take a single payload argument.
$botbrains.push(["on", event, callback]);
$botbrains.push(["off", event, callback]);

// Example
$botbrains.push(["on", "config.loaded", (config) => console.log(config)]);

$botbrains.push(["on", "message.sent", (event) => {
  console.log("User sent:", event.text);
  console.log("Conversation ID:", event.conversationId);
}]);

$botbrains.push(["set", "user.data", {
	first_name: "Liam",
	last_name: "van der Viven",
	email: "liam@botbrains.io",
	phone: "+4915168433056",
	external_attributes: {
		plan: "business",
		joined_on: "2024-04-09"
	}
}]);

$botbrains.push(["do", "user.identify", ["user_58066af9-eae5-4315-99e7-967993f43c07", {
	first_name: "Liam",
	// ... properties that are also supported by user.data
}]]);