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",