We have recently refreshed our branding across our offerings and changed the names of our pricing plans. If you have signed up before Aug 9, 2021, please click Previous plans to view your applicable plans.
We assure you that this change will not impact your product experience, and no action is required on your part.

You can use WebView to embed your bots 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 designed for the 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 designed specifically for each mobile platform. You can create a WebView using the following instructions for the specific platform: 


Note: Once you're done setting up the bot flows, navigate to the Deploy screen, and pick the self-service widget. The conversations widget can not be deployed on mobile apps. Learn more about the differences between the two widgets here.




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 self-service 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 parameter's value 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 parameter's value to "delayed", it will initialize and execute the code without initializing the chat and will hide the widget. 


Note: To use data-inti-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
  • 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: Remember to use the self-service widget on WebView to deploy your bots on your mobile apps. You won't be able to deploy the bot on your mobile apps if you use the conversations widget or if you use the SDK.