Webchat Controls

Our custom webchat come with some controls, depending on your needs, you can go for the synchronous or asynchronous way.

🚧

Javascript utilities for your website

All the the code samples below is javascript, intend to be used in your website.
You can pick and add the functions you need in your HTML using the tags.
Also be sure to insert you webchat code snippet first.

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);}
)();

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

<script>

// Open the chat widget with the default welcome message
SmartlyWebchat.openWidget(); 
// Open the chat widget with a specific message
SmartlyWebchat.openWidget('Hi, are you interested by a demo?'); 
// Close the chat widget
SmartlyWebchat.closeWidget();
// Hide the chat widget
SmartlyWebchat.hideWidget();
// Show the chat widget
SmartlyWebchat.showWidget();
// The webchat will show a specific bot message on the webchat
SmartlyWebchat.showBotMessage('I am the bot');
// Same as below but after a certain delay, in ms
SmartlyWebchat.showBotMessage('I am the bot',5000);
// The webchat will send a message to the API on behalf of the user
SmartlyWebchat.sendUserMessage('I am the user');
// Same as below but after a certain delay, in ms
SmartlyWebchat.sendUserMessage('I am the user',5000);

</script>

πŸ“˜

Message format in webchat controls

Messages sent via webchat controls can be simple text or rich text.

For instance you could have:

<script>

// 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);
  
</script>

🚧

Wait for SmartlyWebchat to be loaded

Before using SmartlyWebchat library you will have to wait for it 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

<script>
  
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);})();
  
</script>

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

<script>
  
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);})();
  
</script>

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"