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. Tabs configuration", select Custom Provider as the chat provider. 
   1. Please ensure the life ring button is published or otherwise the api call will not be able to open it.
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.inAppCenter.show();
});

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

           // Hide Product Fruits when Tawk.to chat is maximized 
window.Tawk_API.onChatMaximized = function () {
        if (window.productFruits.api.inAppCenter.isOpened()) {
          window.productFruits.api.inAppCenter.close();
        }
      };

      // Show Product Fruits when Tawk.to chat is minimized
      window.Tawk_API.onChatMinimized = function () {
        window.productFruits.api.inAppCenter.show();
      };

      // Initially hide the Tawk.to widget when it loads
      window.Tawk_API.onLoad = function () {
        window.Tawk_API.hideWidget();
      };

      // Event listener for Life Ring Button chat button to open custom chat widget
      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.