Webchat SDK

Our webchat comes with a software developer kit with some useful functions and events management mechanisms
Depending on your needs, you can go for the synchronous or asynchronous way.

Synchronous controls

Synchronous controls are powerful and can act on real time with your webchat BUT you have to wait for the SmartlyWebchat library to be loaded in your website and that the webchat is fully ready.
Here is a code you can use:

var SMARTLY_APP_ID = "(YOUR BOT ID)";
var SMARTLY_LANG = "(YOUR BOT LANGUAGE)";
var SMARTLY_USER_DATA={};
(function(){d=document;s=d.createElement("script");
	s.onload = function() {
		// Use setInterval to check if SmartlyWebchat is ready
		// If SmartlyWebchat is ready, we clear the interval
		var interSmartlyWebchatLoaded = window.setInterval(function() {
			if(typeof SmartlyWebchat !== 'undefined' && SmartlyWebchat.ready) {
				window.clearInterval(interSmartlyWebchatLoaded);
				SmartlyWebchat.openWidget();
			}
		},1000);
	};
    s.src="https://(YOUR CDN SUB DOMAIN).smartly.ai/webchat.min.js" + "?ts=" + new Date().getTime();s.async=1;d.getElementsByTagName("head")[0].appendChild(s);}
)();

🚧
Warning
In the code below (YOUR CDN SUB DOMAIN) should be replaced with the subdomain relative to your bot instance, as a reminder here there are

Instance name	CDN url subdomain
Smartly.AI PROD	cdn
Virtual Agent PROD	cdn-virtual-agent-enriched

And here is all the webchat controls that you can use with our widget.

// Open the webchat 
SmartlyWebchat.openWidget(); 
  
// Open the webchat and display a specific message
SmartlyWebchat.openWidget('Hi, are you interested by a demo?'); 
  
// Close the webchat
SmartlyWebchat.closeWidget();
  
// Hide the webchat
SmartlyWebchat.hideWidget();
  
// Show the webchat
SmartlyWebchat.showWidget();
  
// The webchat will display a specific bot message on the webchat
SmartlyWebchat.showBotMessage('I am the bot');
  
// The webchat will display a specific bot message on the webchat after a certain delay, in ms
SmartlyWebchat.showBotMessage('I am the bot', 5000);
  
// Send a user message to the bot 
SmartlyWebchat.sendUserMessage('I am the user');
  
// Send a user message to the bot after a certain delay, in ms
SmartlyWebchat.sendUserMessage('I am the user', 5000);
  
// Send a user message to the bot without showing it in web chat
SmartlyWebchat.sendHiddenUserMessage('This is a secret message');

// Hide the popup (a small window that provides additional information or interactions on top of the main interface)
SmartlyWebchat.hidePopup();

// Show the popup
SmartlyWebchat.showPopup();

// Show the popup with customizable messages
SmartlyWebchat.showPopup(title, description, buttonText);

// Customize the behavior of the popup's button when clicked
SmartlyWebchat.showPopup('Title', 'Description', 'Click here to chat with us', function(){
   SmartlyWebchat.openWidget('Hello everyone');
});

📘
Messages syntax
Messages sent and displayed can be plain text or structured JSON

For instance you could have:

// Simple text message
var message;
message='Hi, are you interested by a demo?';
SmartlyWebchat.openWidget(message); 

// or

// Rich message
var message = ' [{"quick_replies": [{"content_type": "text","title": "Yes","payload": "I agree"},{"content_type": "text","title": "No","payload": "I disagree"}],"text": " Do you agree with our terms and conditions?"}]';
SmartlyWebchat.openWidget(message);

🚧
Wait for SmartlyWebchat to be loaded
Before using the sdk to be fully loaded in your web page

Some use cases based on webchat controls

1. Open the webchat with a specific message if the user clicks 3 times in the current page

const maxCountClick = 3;
function openOnClicks() {
SmartlyWebchat.openWidget('You have clicked 3 times');
}
(function(){var countClick = 0;function bindSmartlyWebchatWithWindowClick(){countClick++;if(countClick == maxCountClick) {document.removeEventListener("click", bindSmartlyWebchatWithWindowClick, false);openOnClicks();}}document.addEventListener("click", bindSmartlyWebchatWithWindowClick, false);})();

2. Open the webchat with if the user load the webpage, then do nothing during a defined amount of time

const inactivityDuration = 10000;
function doActionAfterInactivity() {
SmartlyWebchat.openWidget('Since the page loaded, you have been inactive during 10s!'); 
}
(function(){function stopTimer(){document.removeEventListener("mousemove", stopTimer, false);document.removeEventListener("mousedown", stopTimer, false);window.clearTimeout(myTimeout);}document.addEventListener("mousemove", stopTimer, false);document.addEventListener("mousedown", stopTimer, false);myTimeout = window.setTimeout(doActionAfterInactivity, inactivityDuration);})();

Can I hide the input field of the webchat?

Sure,
If you want your user to only use buttons clics, you can hide the whole input field by setting the following value from the Node.js bloc code.

output.webchat_hidden_input = true;

Can I customize the webchat placeholder?

Sure, you do it by adding the following code in the Node.js bloc code where you want to see the change. Otherwise, the default placeholder will be shown.

output.webchat_input_place_holder = "Please type your phone number"

Can I stop the autocompletion ?

Sure, you do it by adding the following code in the Node.js bloc code where you want to see the change. Otherwise, the default placeholder will be shown.

output.payload.autocompletion = false;

Can I catch events from the webchat?

Yes, here is the event list you will receive in the hosting page
Here is the available events that you can catch

conversationRestarted
This event is fired anytime the user is reintialising the conversation.

SmartlyWebchat.on('conversationRestarted', function(event, output){
	// your code
});

webchatClosed
This event is fired anytime the webchat is closed by the user

SmartlyWebchat.on('webchatClosed', function(){
	// your code
});

webchatOpened
This event is fired anytime the webchat is opened by the user

SmartlyWebchat.on('webchatOpened', function(){
	// your code
});

userMessageSent
This event is fired anytime a message is sent by the user is sent to the platform.
The message can be the result of a button click or a text

SmartlyWebchat.on('userMessageSent', function(event, output){
	// your code
});