<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Bold360 AI Seamless Chat with Fake Agent #1</title>
</head>
<body>
<h1>Custom Chat Provider - Seamless Chat with Fake Agent #1</h1>
<script type="text/javascript" src="conf.js"></script>
<script>
//alert('BOLD360_AI_ACCOUNT is ' + BOLD360_AI_ACCOUNT);
//alert('BOLD360_AI_DOMAIN is ' + BOLD360_AI_DOMAIN);
//alert('BOLD360_AI_KBID is ' + BOLD360_AI_KBID);
//alert('BOLD360_AI_CONFIGID is ' + BOLD360_AI_CONFIGID);
//alert('BOLD360_AI_APIKEY is ' + BOLD360_AI_APIKEY);
//alert('BOLD360_AI_SUPPORT is ' + BOLD360_AI_SUPPORT);
var jsScript = "https://" + BOLD360_AI_ACCOUNT + "." + BOLD360_AI_DOMAIN + "/web/include.js?sdk=channeling-bar";
document.write('<scr'+'ipt type="text/javascript" src="' + jsScript + '"></scr'+'ipt>');
</script>
<p>Demonstrating the Custom Chat Provider, with the nanorep.sdk and a fake agent, that has already been added to this web page.</p>
<p>Please click CUSTOM CHAT UI below.</p>
<div id="demo-seamless" style="margin-top: 410px;"></div>
<script>
nanorep.sdk.init({
kb: BOLD360_AI_KBID
});
nanorep.sdk.addChatProvider('TestSeamlessUI', {
getCapabilities: function() {
return {
customUI: true, // indicates that provider support seamless chat integration
vendorUI: false, // indicates that provider supports nativeUI within the page
vendorPopup: false // indicates that provider can open chat in a new window
}
},
constructor: function(channel) {
// a place to initialize chat provider instance (executed only once)
},
isAvailable: function(callback) {
// this method is used to report availability
// just execute callback with truthy value to indicate that chat is available
callback(true);
},
requestChat: function() {
// this method is executed when widget is requesting chat with agent
var self = this;
setTimeout(function() {
// simulate delay to show "waiting for agent..." state
self.emit('chatStarted');
// simulate initial incoming message from agent
self.emit('newMessage', { text: 'Hello there! Type anything and I will reply something!' });
}, 1000);
},
setVisitorTyping: function(isTyping) {
// this method is executed when visitor starts/stops typing (isTyping is boolean value)
},
getAgentName: function(callback) {
// this method might be executed by widget to retrieve agent name
callback('John Doe');
},
sendMessage: function(message) {
// this method is executed by widget when user submits the text (message argument is plain object with "text" property containing user input)
var self = this;
self.emit('agentTyping', true);
setTimeout(function() {
// simulate agent typing activity and show agent reply message by emitting "newMessage" event
self.emit('agentTyping', false);
self.emit('newMessage', { text: 'AGENT REPLY FOR: ' + message.text });
}, 1000);
},
endChat: function() {
// this method is executed by widget when user wants to stop chat with agent
this.emit('chatEnded'); // provider decides when chat is really terminated (additional confirmation dialogs or post-chat surveys might be shown)
}
});
// create actionbar instance with predefined channels
new nanorep.sdk.ChannelingBar({
rechanneling: [
{
actionEsc: '0',
buttonText: 'Custom Chat UI',
channel: '3',
chatProvider: 'CUSTOM',
description: 'first_custom_chat',
isPopup: false,
name: 'test_CustomChatProvider',
popupSize: '200,200',
providerConfig: 'meta config!',
providerName: 'TestSeamlessUI'
}
]
}, document.getElementById('demo-seamless'));
</script>
</body>
</html>