Custom Chat Widget

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:

  1. In the Life Ring Button settings under "3. Tools Buttons settings", select Custom as the chat provider. 
  2. In your code, listen for the 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.
  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 documents 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();
});

Additional 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.