3Dolphins
5.1 EN
5.1 EN
  • Get Started
  • Pre-Requisite
  • FAQ User
    • User Management
      • What should I do if the user still has an active session?
      • What should I do if the user is locked?
    • Ticket Management
      • What should I do if the customer ticket cannot enter the assigned tab?
    • Bot Settings
      • What should I do if the bot doesn’t respond?
      • What should I do if the bot doesn’t respond as expected?
    • Data Settings
      • Which App Server, Web Server, and Database are used by Chatbot 3Dolphins SRM?
      • When ChatBot is running on Linux. What process does UP / RUNNING signify that the app is running?
      • If the process experiences an abnormal stop (fall) and cannot be increased again in the normal way.
      • How to monitor 3rd party service?
      • On performance monitoring. Can it be monitored and does it have a dashboard?
      • What needs to be backup?
      • How do backup Solr? Is there a menu from apps to do backups?
      • What Backup cycle is used? Full or incremental?
      • What data is stored on the server?
      • Housekeeping data procedures and technical guidelines. Is there a menu from Apps?
      • How to convert milliseconds API fields to Apache Solr Date format using Microsoft Excel
  • Task Management
    • Task Management
      • Task Feature
      • Create Task
      • Edit Task
      • Detail Task Feature
  • Administration
    • User Privilege
      • User Role and Permission Level
      • Grant and Revoke Module Access
      • Create New Privilege
      • Remove Privilege
    • User Management
      • Group
      • User
      • Blocked
      • Active
      • Upload
      • Dual Control
      • Team Collaboration Chat
    • System Setting
      • Ticket Configuration
        • Number of Ticket History
        • Reply Signature
        • Enable Watermark on Attachment
        • Operator Allow Ticket Redistribute
        • Pop-Up Chat On Idle
        • Severity Required Before Closed
        • Auto Send Feedback
        • Claim Ticket Count
        • Default Sorting Mode
        • Word Sensor on Live Agent Message
        • Auto Greeting
        • Group Ticket Distribution
        • Ask Feedback Message
        • Image URL Link and Font Color for Feedback Link
        • Feedback Appreciate Message
        • Number of Live Chat History
        • Walk in SLA Time (in Second)
        • Closure Types
      • User Configuration
      • Bot Configuration
      • Contact Configuration
      • Deal Configuration
      • Custom Submenu Configuration
    • Data Settings
      • Create New Collection
        • Add Fields in Collection
        • Purge Data Collection
      • Remove Collection
      • Archive Collection
    • Public Holiday
      • Create New Holiday
      • Edit an Existing Public Holiday
      • Delete an Existing Public Holiday
    • Co-Browsing
      • Add Co-Browsing Menu
      • How to Use Co-Browsing
  • Integration
    • Channel Connector
      • Telegram Bot
        • Create Telegram Bot
        • Create a New Channel of Telegram Bot
        • Create New Rule
        • Attach Bot
        • Start Chat
      • Email Inbox
        • Create a New Email Inbox Channel
        • Gmail Settings
        • Create New Rule
        • Reply Email
        • Forward Email
      • Live Chat
        • Create a New Channel of Live Chat
        • How to Connect Client to Live Chat Channel
        • Create New Rule
        • Live Chat Message
        • Live Chat Capabilities
        • Include Livechat to your Website / Mobile (Webview)
          • Website
          • Mobile (Android Webview)
        • Live Chat SDK for React Native
      • Telegram Account
        • Create a New Telegram Account
        • Create a New Channel of Telegram Account
        • Create New Rule
        • Attach Bot
      • Twitter
        • Twitter Developers Page
        • Create an App in Twitter Developers
        • Create a New Channel of Twitter
        • Create New Rule
        • Result of Create New Twitter Channel
        • Best Practice Twitter
          • Customer
          • Agent (Operator) or Supervisor
        • Twitter Gateway
      • Facebook
        • Facebook Developers
        • Verify Your Business
        • How to Create Facebook App
          • Change Additional Information About the App
          • How to Add Facebook Login Platform to Your Facebook App
          • How to Add Messenger Platform to Your Facebook App
          • Permission And Feature
        • Create New Page on Facebook
        • Create a New Channel of Facebook
        • How to Add Webhooks Platform to Your Facebook App
        • Create New Rule
        • Mechanism for using BOT in Facebook Messenger
        • How to Add an Email from My Facebook Account
        • Best Practice Facebook
          • BOT
          • Customer
          • Agent (Operator) and Supervisor
        • Facebook Gateway
      • WhatsApp Business API
        • How to Set Up Whatsapp Business API
        • Create New Whatsapp Channel
        • How to Add New Whatsapp Channel Rule
      • Instagram Bussiness
        • How to Register as a Facebook Developers
        • Go To Developers Facebook
        • Verify Your Business
        • How to Create Facebook App
          • Change Additional Information About the App
        • How to Add “Facebook Login” Platform to Your Facebook App
        • Change Status Development Mode Into Public
        • How to Create New a Instagram Business Channel
        • How to Add “Webhooks” Platform to Your Facebook App
        • How to Add “Instagram” Platform to Your Facebook App
        • How to Add Permissions and Feature
        • How to Create a New Instagram Business Channel Rule
        • Result of Create New Instagram Business Channel
        • Best Practice Instagram
        • Instagram Gateway
      • Line
        • Create New Line Official Account
        • Create Line Developer
        • Create a New Channel of Line Account
        • Create New Rule
        • Result of Create New Line Account Channel
      • Skype
        • Create a Bot With Microsoft Bot Framework and Microsoft Azure
        • Create a New Channel of Skype
        • Create New Skype Account
        • Create New Rule
        • Result of Create New Skype Channel
      • App Follow
        • Create a New Channel of App Follow
        • Create New Rule
        • How to Create Ticket on App Follow
      • YouTube
        • Create a New Channel on YouTube
        • How to Create YouTube API Credentials
        • Create a New Channel of YouTube
        • Create New Rule
        • Result of Create New Youtube Channel
      • Smartcall
        • Create a New Channel of Smartcall
        • Add Telephony Credentials
        • Create New Rule
        • Result of Create New Smartcall Channel
    • Live Chat Designer
      • New Design
        • Style
        • Live Chat Connection
        • On Boarding Form
        • Livechat Label
        • Messaging Setting
      • Member Mode
      • Queue
      • Error Message
      • Voice and Speech
      • Campaign
      • Service Hour
      • Generate Script
      • View Script Widget
      • Edit Widget
      • Remove Widget
    • Third-Party Integration
  • Employee
    • Operator Shift
      • Add New Shift
      • Edit an Existing Shift
      • Assign Operator Shift
      • Delete Shift
    • Shift Mapping
      • Upload Agent’s Attendance
      • Edit an Existing Shift
      • Delete Shift
      • Filter Shift
    • Operator Target
      • Add Multiple Target
      • Add Operators Target (Independent Target)
  • Marketing
    • Public Post
      • Create New Public Post
        • Upload File
        • Schedule, Post, and Draft
      • Filter and Search Public Post
    • Notification
      • Create Notification
        • Account & Recipients
        • Message
        • Send or Schedule
      • Filter and Search Notification
      • Edit and Delete Notification
    • Template
      • Request Template
        • Header Template
        • Body Template
        • Footer Template
        • Buttons Template
      • Filter and Search Template
      • Delete Template
    • Audience
      • Create New Audience
      • Edit and Delete Existing Audience
      • Import Audience
      • Create New Audience Group
      • Edit and Delete Existing Audience Group
      • Search Feature
    • Maker Checker
      • Public Post Maker
      • Public Post Checker
      • Notification Maker
      • Notification Checker
  • Sales Activity
    • Lead
      • Create New Lead
      • Detail Lead
        • Contact Info
        • Company Info
        • Transfer Lead Ownership
        • Note
        • Task
      • Filter and Search Lead
      • Lead Automation
        • Automation Component
        • Create Automation
        • Duplicate and Delete Automation
      • Convert Lead to Deal or Archive Lead
      • Unarchive Lead
      • Delete Lead
    • Deal
      • Create New Deal
      • Detail Deal
        • Add Product on Deal
        • Contact Info
        • Company Info
        • Transfer Deal Ownership
        • Note
        • Task
        • Add On-Site Visit
      • Transfer Deal to Another Pipeline
      • Pipeline
        • Add New Pipeline
        • Edit Pipeline
        • Delete Pipeline
      • Filter, Sort, and Search Deal
      • Advanced Setting
      • Closed Deal to Won or Lost Deal
      • Delete Deal
    • Contact
      • Create New Contact
      • Detail Contact
        • Switch and Unlink Companies
        • Add Deal
        • Set Contact as VIP
        • Block and Unblock Contact
        • Merge Contact
        • Note
        • Task
      • Delete Contact
    • Company
      • Create New Company
      • Detail Company
      • Search Company and Configuration Table
      • Delete Company
    • Product
      • Create New Product
      • Detail Product
        • Open Deals
        • Stock and Restock Product
        • Transfer Product Ownership
        • Note
        • Filter and Search Product
      • Configuration Table
      • Delete Product
  • Customer Service
    • Introduction
    • Customer Support
      • Monitoring Dashboard Agent
      • Monitoring Dashboard Supervisor
      • Search in Dashboard
      • Change Status Agent
      • Reply Ticket
      • Send File or Attachment
        • Send File
        • Send Library
        • Send Form
        • Chat History
        • Send FAQ
        • Video Conference Call
      • Watermark
      • Ticket Activity
        • Add Customer Case
        • Add Task based on Ticket
        • Customer Identify
      • Ticket Priority
      • Ticket Notification
      • Filter Ticket
      • Team Member
      • Escalated Ticket
      • Transferred Ticket
      • Reassign Ticket
      • Takeover Ticket
      • Closed Ticket
      • Share Ticket Link
      • View Chat History
      • Merge and Unmerge Ticket
      • Merge Contact
      • Merge Contact Suggestion
      • Blocked Ticket
      • Reopen Ticket
      • Canned Message
      • How to Find FAQ
      • How to Export Ticket
      • How to Create Outbound Email
      • How to Create Offline Ticket
      • View Assignment Rule
    • Customer Contact
      • Create New Contact
      • Edit Contact
      • Case Timeline
      • Chat History
      • Merge Contact
      • Merge Contact Suggestion
      • New Email Message
      • Blocked Contact
      • Remove Contact
    • Ticket Automation
      • Automation Component
      • Tag, Severity and Process Flow
      • On Idle Trigger Ticket
      • Auto Greeting with Time Based Response
      • Bypass Ticket Distribution for High Profile Customer
    • Rule Management
      • Add New Rule
      • Add Team Members
      • Add Rule Criteria
      • Configuration Rule
        • SLA Settings
        • Assignment
        • Service Hour
      • Clone Rule
      • Remove Rule
      • Filter Rule
      • Reload Rule
    • Form Management
      • Form Records
        • Filter Form Records
        • Download Form Records
      • Form Builder
        • Create New Form Builder
          • Settings
          • Generate Link
        • Edit Form Builder
        • Remove Form Builder
    • Paragraph Classifier
      • Add New Classifier Module
      • Add Classifier
      • Add Tags to Chat Tickets
      • Edit Classifier
      • Remove Classifier
    • Email Template
      • New Email Template
      • Edit Email Template
      • Remove Email Template
      • Email Signature
      • Auto-Reply
    • Auxiliary Mapping
      • Create a New Agent Status
      • Edit an Existing Agent Status
      • Remove Agent Status
  • Quality Assurance
    • Performance Rating
      • Add Appraisal
      • Transfer Appraisal Report
      • Change Appraisal
      • Filter Ticket
    • Customer Feedback
    • Feedback Template
      • Create New Feedback Question
        • Agent Rating Survey
        • NPS Survey
      • Activate Feedback Template
      • Edit an Existing Template
      • Delete Feedback Template
    • Rating Criteria
      • Add New Template Criteria
      • Add Criteria
      • Active and Inactive Template
      • Duplicate Template Criteria
      • Delete Template Criteria
  • Bot Settings
    • Bot Manager
      • Create New Bot
        • Attach Dialog
        • Attach FAQ
        • Channel Deployment
        • Timeout Message
        • Unrecognized Setting
        • Fallback Message
        • 3Dolphins Think Integration
        • Bot Option Configuration
        • Bot Assistant
        • Bot Contextual
        • Bot Language
      • Bot Profile Settings
      • General Synonym
      • Evaluate BOT
        • Create Validation Script
        • Validate the Script
        • Upload Script Validation
      • Automatic Detection Language
    • Process Flow
      • Component of Workflow
        • Webhook
        • Execute Command
        • HTTP Request
        • MVEL Function
        • Execute Workflow
        • Timer Interval
        • Send Message
        • Send Email
        • Show Growl
        • Connector Setting
      • Integration
      • List of Workflow
      • Edit Workflow
      • Remove Workflow
      • Workflow Log
    • Dialog Flows
      • Create New Dialog
        • Intention and Entity
        • Prompt Response
        • Integration
        • Configuration
        • Build Dialog Model
        • Test the Dialog on Bot Emulator
      • Search and Filter Dialog
      • Switch Dialog
      • Change Contact Name
      • Get Customer
      • Get User Token
      • API Configuration
      • 3Dolphins SRM Bot Macro Commands
      • JSON Body Request for 3Dolphins SRM Dialog Rest Integration
      • JSON Body Response for 3Dolphins SRM Dialog Rest Integration
    • FAQ Knowledge
      • Create New FAQ Knowledge
      • FAQ Knowledge Contextual
      • How to Show Fallback
      • Remove, Edit and Clone Knowledge
      • Search and Filter Knowledge
      • Macro First Name and Last Name
    • FAQ Suggestion
      • Mechanism of Using FAQ Suggestion
    • Digital Library
      • Create New Digital Library
        • Send Card
        • Send Option
        • Send Image
        • Send Document
        • Send Video
        • Send Audio
      • Edit Digital Library
      • Remove Digital Library
    • Page Builder
      • Add New Page
        • New Page Feature
      • Edit Page Builder
      • Generate Link Page
      • Download Raw Data of Pages as JSON Format
      • Remove Page Builder
    • Payment Library
      • Add New Payment
      • Edit Payment Library
      • Delete Payment Library
    • Think Paragraph
      • Add Document (Article)
      • Edit Document (Article)
      • Ask Question Article
      • Delete Document (Article)
      • Think Paragraph Configuration
  • Analytic
    • Live Agent
      • Conversation History
      • Appraisal Report
      • Channel Interaction
      • Channel Group SLA
      • Live Agent SLA
      • Live Agent Performance
      • Live Agent Productivity
      • Live Agent Rating
      • Customer Rating
      • Visitor Volume
      • Bot Visitor Volume
      • Conversation Audit
      • User Access Audit
      • User AUX Audit
      • Net Promotor Score
      • Datetime Configuration
      • Create New Service Analytic
    • Virtual Agent
      • Bot Overview
        • Intent Data
        • Intent Score
      • Bot Engagement
      • Business Service
      • Intents Fallback
      • User Transaction
    • Employee
      • Operator Target
      • Attendance Report
      • Task Report
    • Sales
      • Deal Progress
      • Deal Conversion
      • Deal Overdue
      • Deal Won
      • Deal Lost
      • Filter Report
      • Download Report
    • WhatsApp
    • Wallboard
      • Wallboard Channel
      • Wallboard Agent
      • Wallboard Classifier
      • Wallboard Configuration
  • API
    • Service API
      • Ping API
      • Get Token
      • Auxiliary Mapping
      • Channel Connector API
      • Support Chart API
      • Contact API
      • File Upload Service
      • Form API
      • Location API
      • Marketing API
        • WhatsApp Broadcast
        • Line Broadcast
      • Profile API
      • Push Notification API
      • Report API
      • Ticket File Media API
      • Operator API
      • Ticket API
      • Supervisor API
      • Users API
      • Email Outbound API
      • Task API
    • Bot API
      • Get Token
      • Get Bot Response
      • Get Bot by Bot Id and Get list of Bots
      • Get Bot Deployment Channel by Bot Id
      • Get Bot FAQ Modules by Bot Id
      • Get Bot Dialogs by Bot Id
      • Get Bot Responses by Bot Id and User Message
      • NLP API
      • Think Paragraph API
    • Sales API
      • Get Token
      • Company API
      • Product API
      • Pipeline API
      • Deal API
      • Notes API
      • Lead API
Powered by GitBook
On this page

Was this helpful?

  1. Integration
  2. Channel Connector
  3. Live Chat
  4. Include Livechat to your Website / Mobile (Webview)

Mobile (Android Webview)

First, choose the HTML file index-debug-standard.html and rename it to index-mobile.html. (This is optional or you may choose to leave it like that)

Open the HTML file and copy the below codes to your website index or entry HTML file. Paste the codes inside your <head> tag.

<html>
<head>
  <meta charset="UTF-8">
  <title>Enterprise Web Chat</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'>
  <link rel="stylesheet" href="css/indigo.css">
  <link rel="stylesheet" href="css/widget.css">
  <link rel="stylesheet" href="css/lightslider.css">
  <link rel="stylesheet" href="css/intlTelInput.css">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />
	<style type="text/css">
		html {
			background: url(images/bg-login.svg) no-repeat;
			height: 100%;
			background-size: cover;
		}
	</style>
  <!-- <script src="https://maps.googleapis.com/maps/api/js?key=<KEY>&libraries=places"></script> -->
  <script src="https://www.google.com/recaptcha/api.js"></script>
  <!-- <script src="http://code.responsivevoice.org/responsivevoice.js"></script> -->
  <script src='js/jquery-2.1.3.min.js'></script>
  <script src='js/iframeResizer.contentWindow.js'></script>
  <script src='js/iframeResizer.js'></script>
  <script src='js/lightslider.js'></script>  
  <script src='js/lazyload.min.js'></script>  
  <script src="js/cryptojs/pbkdf2.js"></script>
  <script src="js/cryptojs/aes.js"></script>
  <script src="js/cipher/aes-util.js"></script>
  <script src="js/stp.js"></script>
  <script src="js/sjs.js"></script>
  <script src="js/chat.js"></script>
  <script src="js/fuse.js"></script>
  <script src="js/speech.js"></script>
  <script src="js/intlTelInput.js"></script>
  <script>
  $(document).ready(function() {
	    Chat.init({
	        header: 'Welcome to Our Chat',
	        login_sub_header: 'Please tell us about yourself',
	        connect_message: 'Do you have questions ? <br>Come chat with us, we are here to help you',
	        chat_sub_header: 'Our agent will serve you shortly',
			url: 'https://<host>:<port>',
			client_id: '<client_id>',
			client_secret: '<client_secret>',	
	        type_placeholder: 'Type message...',
			avatar: '<bot_image>',
			icon_avatar: '<icon_image>',
			agent_avatar: '<agent_image>',
	        enable_attachment: true,
	        enable_voice: true,
	        enable_speech: true,
	        enable_queue: true,
	        enable_history: true,
	        compatibility_mode: false,
	        queue_text: "⏰NOMOR URUT: ",
	        enable_campaign: false,
	        campaign_avatar: '<campaign_image>',
			campaign_title: '<campaign_title>',
	        campaign_text: 'Hello 👋, What do you think about our service ?',
	        campaign_timer: 5000,
	        campaign_menu: [{
	            "label": "<Campaign Label>",
	            "value": "<Campaign Payload>",
	            "icon": "<campaign_icon>"
	        }, {
	            "label": "<Campaign Label>",
	            "value": "<Campaign Payload>",
	            "icon": "<campaign_icon>"
	        }, {
	            "label": "<Campaign Label>",
	            "value": "<Campaign Payload>",
	            "icon": "<campaign_icon>"
	        }],
	        max_upload_message: "File size limit exceeded. Maximum filesize is [max_filesize]",
	        selection_topic_placeholder: "Please select a topic",
	        selection_topic_member: ["Product", "Service"],
	        selection_topic_non_member: ["Hai", "Hello"],
			member_mode: false,
	        selection_topic_placeholder: "Please select a topic",
	        enable_service_hour: false,
	        service_hour: [{
	                "days": "sunday",
	                "startHour": "00:00",
	                "endHour": "23:59",
	                "holiday": true
	            },
	            {
	                "days": "monday",
	                "startHour": "00:00",
	                "endHour": "23:59",
	                "holiday": true
	            },
	            {
	                "days": "tuesday",
	                "startHour": "00:00",
	                "endHour": "15:52",
	                "holiday": true
	            },
	            {
	                "days": "wednesday",
	                "startHour": "00:00",
	                "endHour": "23:59",
	                "holiday": true
	            },
	            {
	                "days": "thursday",
	                "startHour": "00:00",
	                "endHour": "23:59",
	                "holiday": true
	            },
	            {
	                "days": "friday",
	                "startHour": "00:00",
	                "endHour": "23:59",
	                "holiday": true
	            },
	            {
	                "days": "saturday",
	                "startHour": "00:00",
	                "endHour": "23:59",
	                "holiday": true
	            }
	        ],
	        channel_id_email: "25b7fe4f7bd81aa0533be4963972ac74", /* channel id email */
	        subject_email: "Of service hour ticket",
	        send_email_success_message: "Email sent successfully !<br/><br/>Thanks, we have received your question or your complaint",
	        process_send_email_message: "Sending Email...",
	        process_send_email_error_message: "Email sent failed !",
			is_waiting_text_icon: true
	    });
	});
  </script>
</head>
<body>  
</body>
</html>

Remove all the HTML file but keep the index-mobile.html instead.

Copy the whole live chat directory to your designated path of your web hosting server.

Assume that you want to choose is the indigo theme, then navigate on the index-mobile.html and change the code using the color that you want.

<link rel="stylesheet" href="css/indigo.css">
  <link rel="stylesheet" href="css/widget.css">
  <link rel="stylesheet" href="css/lightslider.css">
  <link rel="stylesheet" href="css/intlTelInput.css">

Don’t forget to adjust the resource paths which are in index-mobile.html that are used to load files like js, CSS, or image, correspond to where the resources are kept in your server.

<html>
<head>
  <meta charset="UTF-8">
  <title>Enterprise Web Chat</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'>
  <link rel="stylesheet" href="css/indigo.css">
  <link rel="stylesheet" href="css/widget.css">
  <link rel="stylesheet" href="css/lightslider.css">
  <link rel="stylesheet" href="css/intlTelInput.css">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />
	<style type="text/css">
		html {
			background: url(images/bg-login.svg) no-repeat;
			height: 100%;
			background-size: cover;
		}
	</style>
  <!-- <script src="https://maps.googleapis.com/maps/api/js?key=<KEY>&libraries=places"></script> -->
  <script src="https://www.google.com/recaptcha/api.js"></script>
  <!-- <script src="http://code.responsivevoice.org/responsivevoice.js"></script> -->
  <script src='js/jquery-2.1.3.min.js'></script>
  <script src='js/iframeResizer.contentWindow.js'></script>
  <script src='js/iframeResizer.js'></script>
  <script src='js/lightslider.js'></script>  
  <script src='js/lazyload.min.js'></script>  
  <script src="js/cryptojs/pbkdf2.js"></script>
  <script src="js/cryptojs/aes.js"></script>
  <script src="js/cipher/aes-util.js"></script>
  <script src="js/stp.js"></script>
  <script src="js/sjs.js"></script>
  <script src="js/chat.js"></script>
  <script src="js/fuse.js"></script>
  <script src="js/speech.js"></script>
  <script src="js/intlTelInput.js"></script>
  <script>
  $(document).ready(function() {
	    Chat.init({
	        header: 'Welcome to Our Chat',
	        login_sub_header: 'Please tell us about yourself',
	        connect_message: 'Do you have questions ? <br>Come chat with us, we are here to help you',
	        chat_sub_header: 'Our agent will serve you shortly',
			url: 'https://<host>:<port>',
			client_id: '<client_id>',
			client_secret: '<client_secret>',	
	        type_placeholder: 'Type message...',
			avatar: '<bot_image>',
			icon_avatar: '<icon_image>',
			agent_avatar: '<agent_image>',
	        enable_attachment: true,
	        enable_voice: true,
	        enable_speech: true,
	        enable_queue: true,
	        enable_history: true,
	        compatibility_mode: false,
	        queue_text: "⏰NOMOR URUT: ",
	        enable_campaign: false,
	        campaign_avatar: '<campaign_image>',
			campaign_title: '<campaign_title>',
	        campaign_text: 'Hello 👋, What do you think about our service ?',
	        campaign_timer: 5000,
	        campaign_menu: [{
	            "label": "<Campaign Label>",
	            "value": "<Campaign Payload>",
	            "icon": "<campaign_icon>"
	        }, {
	            "label": "<Campaign Label>",
	            "value": "<Campaign Payload>",
	            "icon": "<campaign_icon>"
	        }, {
	            "label": "<Campaign Label>",
	            "value": "<Campaign Payload>",
	            "icon": "<campaign_icon>"
	        }],
	        max_upload_message: "File size limit exceeded. Maximum filesize is [max_filesize]",
	        selection_topic_placeholder: "Please select a topic",
	        selection_topic_member: ["Product", "Service"],
	        selection_topic_non_member: ["Hai", "Hello"],
			member_mode: false,
	        selection_topic_placeholder: "Please select a topic",
	        enable_service_hour: false,
	        service_hour: [{
	                "days": "sunday",
	                "startHour": "00:00",
	                "endHour": "23:59",
	                "holiday": true
	            },
	            {
	                "days": "monday",
	                "startHour": "00:00",
	                "endHour": "23:59",
	                "holiday": true
	            },
	            {
	                "days": "tuesday",
	                "startHour": "00:00",
	                "endHour": "15:52",
	                "holiday": true
	            },
	            {
	                "days": "wednesday",
	                "startHour": "00:00",
	                "endHour": "23:59",
	                "holiday": true
	            },
	            {
	                "days": "thursday",
	                "startHour": "00:00",
	                "endHour": "23:59",
	                "holiday": true
	            },
	            {
	                "days": "friday",
	                "startHour": "00:00",
	                "endHour": "23:59",
	                "holiday": true
	            },
	            {
	                "days": "saturday",
	                "startHour": "00:00",
	                "endHour": "23:59",
	                "holiday": true
	            }
	        ],
	        channel_id_email: "25b7fe4f7bd81aa0533be4963972ac74", /* channel id email */
	        subject_email: "Of service hour ticket",
	        send_email_success_message: "Email sent successfully !<br/><br/>Thanks, we have received your question or your complaint",
	        process_send_email_message: "Sending Email...",
	        process_send_email_error_message: "Email sent failed !",
			is_waiting_text_icon: true
	    });
	});
  </script>
</head>
<body>  
</body>
</html>

In that section we put our code in the existing website, while in this section we have to host the live chat independently.

Below is a sample code for configuring your webview which displays that already hosted index-mobile.html.

Configure Web View

You need to set enable Javascript and DomStorage For LocalStorage.

webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setDatabaseEnabled(true);
webview.getSettings().setDomStorageEnabled(true);

Now you can load the URL.

webview.loadUrl("https://hostname/webchat/index-debug-standard.html");

To customize after page load finish, you may run this code.

webview.setWebViewClient(new WebViewClient() {
     @Override
     public void onPageFinished(WebView view, String url) {
          progressBar.setVisibility(View.GONE);
          super.onPageFinished(view, url);
     }
});

Enable Voice to Text (Speech Recognition)

To enable this feature, first, you need to enable permission for RECORD_AUDIO on android manifest.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.imi.dolphin.bella">

    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.RECORD_AUDIO"/>
		...
		...
</manifest>

Then, initialize Properties to enable Record Audio Permission.

private static final int RECORD_AUDIO_REQUEST_CODE = 123;
private PermissionRequest permissionRequest;

The permissionRequest property is used to accommodate requests from the web view that will be granted access later.

When the microphone icon is clicked, the browser will ask for permission to the device, your application must catch the request. can be done by:

private void loadLiveChat() {
		...
		...

    webview.setWebChromeClient(new WebChromeClient() {
        @Override
        public void onPermissionRequest(PermissionRequest request) {
            if (request != null) {
                permissionRequest = request;
                askPermission();
            }
        }
    });
}

private void askPermission() {
    if (ContextCompat.checkSelfPermission(getApplicationContext(), 
						Manifest.permission.RECORD_AUDIO) != PackageManager.PERMISSION_GRANTED) {
        
				ActivityCompat.requestPermissions(
						MainActivity.this, 
						new String[]{Manifest.permission.RECORD_AUDIO}, 
						RECORD_AUDIO_REQUEST_CODE
				);
    } else {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            permissionRequest.grant(permissionRequest.getResources());
        }
    }
}

@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
    if(requestCode == RECORD_AUDIO_REQUEST_CODE){
        if(grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED){
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                permissionRequest.grant(permissionRequest.getResources());
            }
            Toast.makeText(getApplicationContext(), "Permission Granted", Toast.LENGTH_SHORT).show();
        }
    }
}

Enable Attachment

You need to enable permission for READ_EXTERNAL_STORAGE on android manifest.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.imi.dolphin.bella">

    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.RECORD_AUDIO"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
		...
</manifest>

Then, initialize Properties to access file.

private static final int INPUT_FILE_REQUEST_CODE = 1;
private ValueCallback<Uri[]> mFilePathCallback;

Configure Web View to access file access.

private void loadLiveChat() {
		...
    webview.getSettings().setLoadWithOverviewMode(true);
    webview.getSettings().setAllowFileAccess(true);
		...
		...
}

When the attachment icon is clicked, the browser will ask to open device storage. Can be done by:

private void loadLiveChat() {
    ...
		...

    webview.setWebChromeClient(new WebChromeClient() {
        ...
				...
				@Override
        public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) { 
            if (mFilePathCallback != null) {
                mFilePathCallback.onReceiveValue(null);
            }
            mFilePathCallback = filePathCallback;

            Intent chooserIntent = new Intent(Intent.ACTION_PICK, android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
            startActivityForResult(chooserIntent, INPUT_FILE_REQUEST_CODE);
            return true;
        }
    });
}

@Override
protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        if (requestCode != INPUT_FILE_REQUEST_CODE || mFilePathCallback == null) {
            super.onActivityResult(requestCode, resultCode, data);
            return;
        }
        Uri[] results = null;
        if (resultCode == Activity.RESULT_OK) {
            if (data != null) {
                String dataString = data.getDataString();
                results = new Uri[]{Uri.parse(dataString)};
            }
        }
        mFilePathCallback.onReceiveValue(results);
        mFilePathCallback = null;
    }
}

Below is an example of the final code if you are already following the step above.

package com.imi.dolphin.bella;

import android.Manifest;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.view.View;
import android.webkit.PermissionRequest;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityCompat;
import androidx.core.content.ContextCompat;

public class MainActivity extends AppCompatActivity {

    /**
     * Properties to access file
     */
    private static final int INPUT_FILE_REQUEST_CODE = 1;
    private ValueCallback<Uri[]> mFilePathCallback;

    /**
     * Properties to enable Record Audio Permission
     * <p>
     * the permissionRequest property is used to accommodate requests from the web view that will be granted access later
     */
    private static final int RECORD_AUDIO_REQUEST_CODE = 123;
    private PermissionRequest permissionRequest;

    /**
     * Initial Component Web View and Progress Bar
     */
    private WebView webview;
    private ProgressBar progressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();
        loadLiveChat();
    }

    /**
     * Configure Web View
     */
    @SuppressLint("SetJavaScriptEnabled")
    private void loadLiveChat() {
        webview.loadUrl("<Server URL>");

        // Configure WebView To set Enable Javascript True And To Activate DomStorage True For LocalStorage
        webview.getSettings().setJavaScriptEnabled(true);
        webview.getSettings().setDatabaseEnabled(true);
        webview.getSettings().setDomStorageEnabled(true);

        // Configure WebView to access file access
        webview.getSettings().setLoadWithOverviewMode(true);
        webview.getSettings().setAllowFileAccess(true);

        webview.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                progressBar.setVisibility(View.GONE);
                super.onPageFinished(view, url);
            }
        });
        webview.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onPermissionRequest(PermissionRequest request) {
                if (request != null) {
                    permissionRequest = request;
                    askPermission();
                }
            }

            @Override
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
                // Double check that we don't have any existing callbacks
                if (mFilePathCallback != null) {
                    mFilePathCallback.onReceiveValue(null);
                }
                mFilePathCallback = filePathCallback;

                Intent chooserIntent = new Intent(Intent.ACTION_PICK, android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
                startActivityForResult(chooserIntent, INPUT_FILE_REQUEST_CODE);
                return true;
            }
        });
    }

    /**
     * Binding Item
     */
    private void init() {
        webview = findViewById(R.id.web_view);
        progressBar = findViewById(R.id.progress_bar);
        progressBar.setVisibility(View.VISIBLE);
    }

    /**
     * ask permission for Record Audio
     */
    private void askPermission() {
        if (ContextCompat.checkSelfPermission(getApplicationContext(), Manifest.permission.RECORD_AUDIO) != PackageManager.PERMISSION_GRANTED) {
            ActivityCompat.requestPermissions(MainActivity.this, new String[]{Manifest.permission.RECORD_AUDIO}, RECORD_AUDIO_REQUEST_CODE);
        } else {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                permissionRequest.grant(permissionRequest.getResources());
            }
        }
    }

    /**
     * Catch permission from user
     */
    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
        if (requestCode == RECORD_AUDIO_REQUEST_CODE) {
            if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                    permissionRequest.grant(permissionRequest.getResources());
                }
                Toast.makeText(getApplicationContext(), "Permission Granted", Toast.LENGTH_SHORT).show();
            }
        }
    }

    /**
     * Catch File data from user
     */
    @Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            if (requestCode != INPUT_FILE_REQUEST_CODE || mFilePathCallback == null) {
                super.onActivityResult(requestCode, resultCode, data);
                return;
            }
            Uri[] results = null;
            if (resultCode == Activity.RESULT_OK) {
                if (data != null) {
                    String dataString = data.getDataString();
                    results = new Uri[]{Uri.parse(dataString)};
                }
            }
            mFilePathCallback.onReceiveValue(results);
            mFilePathCallback = null;
        }
    }
}
PreviousWebsiteNextLive Chat SDK for React Native

Last updated 4 years ago

Was this helpful?

Lastly, adjust the url, client_id and client_secret properties to correspond your backend’s channel configuration. Please refer back to for more information.

If you want to try our code, please click to get started.

How to Connect Client to Live chat Channel
this
Remove HTML File