Custom Chat Widget

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

To use the custom integration, do the following steps:

1. Select Custom as a chat provider in the Life Ring Button -> Tools Buttons settings
2. In your code, listen to 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 should call your chat platform API to open the chat window.
3. Listen to an "on close" event on your chat platform. This event should be triggered when users close the chat window. Check your chat platform docs to figure out this event.
4. Then, when the custom widget is closed, use the Life Ring button API to show the button again.

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();
});

Example

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.