👋 Hello! In this article, we will guide you on how to use Tidio with Buttonizer. Follow these steps to make your Buttonizer button open the Tidio chat:
First, make sure that you have installed Tidio on your website. If you haven't done this yet, please check out this article on how to Install Tidio on Your Website.
Install Tidio on your website
Create a Buttonizer button and choose the Custom Javascript button action.
Save the changes and copy the code that appeared under the button action chooser.
Paste the code into the footer of your site. You can use a plugin such as Head, Footer and Post injections to do this.
Replace the console log line in the code into window.tidioChatApi.show(); and window.tidioChatApi.open();. It should look something like this:
<script>
window.addEventListener("buttonizer_button_clicked", event => {
if(event.detail.button_id === "eb9b718d-d54f-40d0-962f-50a02273c0b3") {
window.tidioChatApi.show();
window.tidioChatApi.open();
}
});
</script>
Then, you can also add this script tag into the footer of your site:
<script>
(function() {
function onTidioChatApiReady() {
window.tidioChatApi.hide();
window.tidioChatApi.on("close", function() {
window.tidioChatApi.hide();
});
}
if (window.tidioChatApi) {
window.tidioChatApi.on("ready", onTidioChatApiReady);
} else {
document.addEventListener("tidioChat-ready", onTidioChatApiReady);
}
})();
</script>
Finally, save the changes and you're done! The Tidio chat button will now show up on the page and after clicking on the Buttonizer button, it should open up the Tidio widget.
We hope this guide has helped you! If you have any questions or encounter any issues, please feel free to reach out to us by creating a ticket.
