Open Chat Through a Button

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>

For Tidio

<script>
(function() {
function onTidioChatApiReady() {
window.tidioChatApi.hide();
}

if (window.tidioChatApi) {
window.tidioChatApi.on("ready", onTidioChatApiReady);
}

document.querySelector(".chat-button").addEventListener("click", function() {
window.tidioChatApi.show();
window.tidioChatApi.open();
});
})();
</script>

Conclusion

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.