Is the helpbot widget mobile-friendly?

Get started with Faqprime Helpbot for Mobile

1Answer

With Faqprime Helpbot for Mobile, you can seamlessly deliver in-product contextual self-service help to your customers across your mobile and web product portfolio.

 

Faqprime webview integration

A WebView allows you to seamlessly serve your web content in your mobile app. It is useful when you need increased control over the UI and advanced configuration options that will allow you to access web pages in a specially-designed environment for your app.

The Faqprime Webview integration provides Helpbot across all of your app versions.

  • The integration takes a few lines of code.
  • The content is agnostic to app versions, allowing you to make updates without needing to change any thing on mobile apps.
  • The Helpbot can seamlessly blend with your native UX/UI design and structure. For e.g. it could be triggered by actions such as clicking a floating button, accessing a hamburger menu, or using an icon from the top menu - essentially aligning with your app's user experience.

 

Add a Helpbot to your app

  1. Create a web page as <https://example. com/faqprime.html> - Sample Code for the webpage is available Here.
  2. Use your design components to visually display the button or hamburger menu or an icon in your mobile app.
  3. After creating the webpage in step 1, trigger it by clicking the button or selecting a field in the hamburger menu - Find specific instructions for How-to-call (Android) | How-to-call(iOS). 
  4. Optimize performance by enabling caching.

 

Sample code for the web page

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- START of FAQPRIME Code -->
    <div id="faq-bot-codestart-id" class="faq-bot-codestart"></div>
    <script>
       var faqbotStartTime = 0;
       var faqbotTopText = '';
       var faqbotKey = '<Your Key>';
    </script>
    <script src="https://myfaqprime.appspot.com/bot/bot.js"></script>
    <link href="https://myfaqprime.appspot.com/bot/bot.css" rel="stylesheet" type="text/css">
    <!-- END of FAQPRIME Code -->
    
    <style>
        .faq-bot-top-banner-cross{
        display:none;
        }
        .faq-bot-top-banner, .faq-bot-bottom-banner {
        width: 100% !important;
        max-width: 100% !important;
        }
        .faq-bot-top-banner {
        height: 20px;
        padding: 0;
        }
        .faq-bot-container {
        right: 0px !important;
        bottom: 0px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        }
        .faq-bot-iframe {
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vh - 95px) !important;
        max-height: calc(100vh - 95px) !important;
        }
        .faq-bot-bottom-contactus-container, .faq-bot-bottom-whatsapp-livechat-container, .faq-bot-bottom-livechat-container, .faq-bot-bottom-calendy-container{
        height: 51px;
        }
        .faq-bot-bottom-contactus-container img, .faq-bot-bottom-whatsapp-livechat-container img, .faq-bot-bottom-livechat-container img, .faq-bot-bottom-calendy-container img{
        max-height: 30px; max-width: 30px;
        }
        .faq-bot-bottom-contactus-container p, .faq-bot-bottom-whatsapp-livechat-container p, .faq-bot-bottom-livechat-container p, .faq-bot-bottom-calendy-container p{
        height:40px;
        }
    </style>
</body>
</html>
Did this answer your question?
...