You can use WebView to embed your bot in your mobile apps. A WebView is an embeddable browser inside a native mobile application. The native mobile application, also known as an app, is written with a language and a UI framework specifically designed for a particular platform (Android, iOS). The WebView is a browser engine that runs like an iframe on the app. The app uses WebView to serve websites to the end-user.


WebViews need to be created specifically for each mobile platform. You can create a WebView using the following instructions for the specific platform: 


As you're loading the bots with WebView, you can apply any customization for a web browser widget on the WebView as well. Here are a few customizations that you can make to offer a seamless customer experience while using the bot widget on your mobile app.


Expand the widget when webview is triggered

  • To expand the widget, you can use the following script. Please make sure to replace the client-hash and the bot-hash in the code.


<script>
(function(d, w, c) {
    if (!d.getElementById("spd-busns-spt")) {
        var n = d.getElementsByTagName('script')[0],
            s = d.createElement('script');
        var loaded = false;
        s.id = "spd-busns-spt";
        s.async = "async";
        s.setAttribute("data-self-init", "false");
        s.setAttribute("data-init-type", "opt");
        s.src = 'https://cdn.in-freshbots.ai/assets/share/js/freshbots.min.js';
        s.setAttribute("data-client", "< client - hash >");
        s.setAttribute("data-bot-hash", "< bot - hash > ");
        s.setAttribute("data - env ", "prod ");
        s.setAttribute("data - region ", " in ");
        if (c) {
            s.onreadystatechange = s.onload = function() {
                if (!loaded) {
                    c();
                }
                loaded = true;
            };
        }
        n.parentNode.insertBefore(s, n);
    }
})(document, window, function() {
    Freshbots.initiateWidget({
        autoInitChat: false,
        getClientParams: function() {
            return {};
        }
    }, function(successResponse) {
        Freshbots.showWidget(true);
//This line of code keeps the widget open when your customer lands on the page
 
    }, function(errorResponse) {});
}); < /script>



Other customizable parameters for webview include the data-init-type parameter which can be set to one of these three different values. These are

  • normal | s.setAttribute("data-init-type", "normal"); 
    When set to normal, this will initialize and execute the code without any performance optimization.

  • opt | s.setAttribute("data-init-type", "opt"); 
    When you set the value of the parameter to opt, it will initialize and execute the code with all the available performance optimization techniques.
     
  • delayed | s.setAttribute("data-init-type", "delayed");
    When you set the value of the parameter to delayed, it will initialize and execute the code without initializing the chat and will hide the widget. 


Note: To use data-init-type as delayed, parameter data-self-init has to be set to false.


The delayed parameter is ideal when you want the chat widget to appear after your customer carries out a certain action so that the code can be executed on the initial pages or the WebView.


Call the below functions to Initialise Chat and Show Widget

  • Freshbots.initiateChat();

  • Freshbots.showWidget(true); for the maximised widget or Freshbots.showWidget(false); for the minimized widget


Removing the header from your bot widget

  • Click on Widget customization from the navbar > Apply Custom CSS > and apply the following CSS code to remove the header.

    .chat - head {
      visibility: hidden!important;
    }



  • Once you've removed the header you can provide a back button in your app's screen that calls the Freshbots.hideWidget(true); function. This function hides the bot widget and takes the customer back to the mobile app.

  • If you prefer to keep the header, you can hide the minimize icon using CSS. This will ensure the chat widget does not minimize and the chat bubble isn't visible in the mobile app experience. 


Prefill data for better context


You can also choose to create a better experience for your customers by prefilling the bot by using Custom Parameters and custom JS functions. For example, you can prefill details such as the email address or the phone number before the bot loads so that the customers enjoy a personalized experience.


Note: The Freddy Self-service bot does not natively offer SDK support. However, if you are looking to deploy bots using SDK, you can consider the Freddy integration with Freshchat and, in turn, use the Freshchat SDK.


Please write to freshbots-support@freshworks.com if you have any more questions. We'll be happy to help you.