Besides directly supported chat platforms, Product Fruits also supports the custom integration of any widget. It requires a bit of programming, but overall it's easy to implement.
To use the custom integration, follow these steps:
productfruits_button_ext_widget_init
event on the window object. This event is triggered when the user clicks on the Chat button in the Life Ring Button. You'll need to call your chat platform API to open the chat window.Here is 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 a 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-->
To finish off this above example integration of tawk.to, you will also need to hide the presence of the default widget by changing its visibility settings.