Website
Default Embed Live Chat Website
First, choose your live chat HTML file that is index-debug-standard.html.
Then, 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://adapter.3dolphins.ai:31632',
client_id: 'f181392d7b4f13ec1903d6359edf0cf2',
client_secret: 'e61f8a33cba79b79c541586b944a25cd',
type_placeholder: 'Type message...',
avatar: 'https://cdn.3dolphins.ai/assistant/images/bella.png',
icon_avatar: 'https://cdn.3dolphins.ai/assistant/images/bella.png',
agent_avatar: 'https://cdn.3dolphins.ai/assistant/images/bella.png',
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>After that, remove all the HTML files from the directory.
Copy the whole live chat directory to the designated path of your web hosting server.
Assume that you want to choose is the indigo theme, then navigate on the index-debug-standard.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-debug-standard.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://adapter.3dolphins.ai:31632',
client_id: 'f181392d7b4f13ec1903d6359edf0cf2',
client_secret: 'e61f8a33cba79b79c541586b944a25cd',
type_placeholder: 'Type message...',
avatar: 'https://cdn.3dolphins.ai/assistant/images/bella.png',
icon_avatar: 'https://cdn.3dolphins.ai/assistant/images/bella.png',
agent_avatar: 'https://cdn.3dolphins.ai/assistant/images/bella.png',
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>Next, adjust the url, client_id and client_secret properties correspond to your backend’s channel configuration. Please refer to the document How to Connect Client to Live chat Channel for more information.
Lastly, test the result.
Embed Live Chat Website Using Assistant
We also make it easier for you to embed live chat using assistant by embedding script js that points to the previously prepared live chat url.
You must prepare the files like this page and store them on the specified server first.
Where is the difference embed using assistant? It is located in the webchat folder. There is only file assistant and index.html for embedding live chat using the assistant, as shown below.
Then, add the following code to your HTML file's <head> section.
<script src="https://url_has_provided/widget/js/jquery-2.1.3.min.js"></script>
<script src="https://url_has_provided/widget/assistant.js"></script>Ensure that the assistant.js script is installed after jquery script.
Ensure there is no double jquery script on your website.
If you have multiple jquery scripts, choose one with a minimum version using 2.1.3 version (default widget version).
Last updated
