Custom Chat Widget

Besides supported chat platforms, Product Fruits supports also custom integration of any widget. It requires a bit of programming, but it's overall easy to implement.

To use the custom integration, select Custom as a chat provider in the Life Ring Button -> Tools Buttons settings. Then, listen to productfruits_button_ext_widget_init event on window object. This event is triggered when the user clicks on the Chat button in the Life Ring Button. Then, when the custom widget is closed, use Life Ring button API to show the button again.

A quick example:

window.addEventListener('productfruits_button_ext_widget_init', () => {
    openMyChatWidget(); // your function that opens a custom widget
});

// your function that calls the callback when the custom widget is closed
whenMyChatWidgetIsClosed(() => {
    window.productFruits.api.button.showButton();
});

Here is an example of working Tawk.to integration:

<!--Start of Tawk.to Script-->
<script type="text/javascript">

var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();

window.Tawk_API = window.Tawk_API || {};
window.Tawk_API.onChatMinimized = function(){
    window.productFruits.api.button.showButton();
};
window.Tawk_API.onChatMaximized = function() {
    window.productFruits.api.button.hideButton();
}

window.addEventListener('productfruits_button_ext_widget_init', () => {
	window.Tawk_API.maximize();
});

// TAWKTO JAVASCRIPT SNIPPET
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/xxxxxxxxxxxxxxx/xxxxxxx';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->