In this article, we'll walk you through the process of opening a chat through a button in Flatsome and provide examples for three popular live chat widgets: JivoChat, HelpScout, and Tawkto.
It's essential to watch the video, otherwise you'll not achieve the expected result. Below is the respective javascript function you need:
Widget Javascript Function
The class you must add to the button is called toggle-chat , but you can change it at any time. Remind to change it also in the javascript function document.getElementsByClassName("toggle-chat");
The function below must be added on Flatsome > Advanced > Global Scripts > Body Scripts - Bottom
For JivoChat
<script>
document.addEventListener("DOMContentLoaded", function() {
var toggleChatElements = document.getElementsByClassName("toggle-chat");
for (var i = 0; i < toggleChatElements.length; i++) {
toggleChatElements[i].addEventListener("click", function() {
jivo_api.open(); // Chat function to open chat
});
// Add href attribute
toggleChatElements[i].href = "javascript:void(0);";
}
});
</script>
For Beacon (from HelpScout)
<script>
document.addEventListener("DOMContentLoaded", function() {
var toggleChatElements = document.getElementsByClassName("toggle-chat");
for (var i = 0; i < toggleChatElements.length; i++) {
toggleChatElements[i].addEventListener("click", function() {
Beacon('toggle'); // Chat function to open chat
});
// Add href attribute
toggleChatElements[i].href = "javascript:void(0);";
}
});
</script>
For Tawk.to
<script>
document.addEventListener("DOMContentLoaded", function() {
var toggleChatElements = document.getElementsByClassName("toggle-chat");
for (var i = 0; i < toggleChatElements.length; i++) {
toggleChatElements[i].addEventListener("click", function() {
window.Tawk_API.toggle(); // Chat function to open chat
});
// Add href attribute
toggleChatElements[i].href = "javascript:void(0);";
}
});
</script>
Opening your chat through a native Flatsome button enhances customer interaction and support. Make sure to follow these steps and use the provided JS sample codes.