When it comes to the chatbot setup, you have two options.

Option 1 (easier) - download the starter .story file from the Use the Chatbot tab on the same page where you created the chatbot. The starter .story file will contain all triggers and variables that are needed to set up the chatbot in Storyline, so the JavaScript code and all other triggers will already be there for you. You will only need to update the variable clabsAnswersWidgetID and that is it.

Option 2 (harder) - manually add all JavaScript code.

First, make sure to create a variable clabsAnswersWidgetID and set its value to the ID given to you when you created the widget. Then, you can copy the trigger code either from the snippets below.

To initialize the widget when the course loads (this must complete before the user attempts to engage with the chatbot):


if(void 0===window.stencilsetanswers){let e="https://cluelabs.com/ai/display/chatbotops.js.php";(xhttp=new XMLHttpRequest).onreadystatechange=function(){if(4==this.readyState&&200==this.status&&""!=this.responseText){let e=this.responseText,t=document.getElementsByTagName("head")[0],i=document.createElement("script");t.appendChild(i),i.appendChild(document.createTextNode(e)),clabsChatbotRecorder.mode="storyline";let s=`
<style>.clabs_waiting_container{width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:1000;position:absolute;top:0;left:0;display:none;align-items:center;justify-content:center}.clabs_waiting_loader{width:60px;height:60px;border:10px solid #587885;border-top-color:#708c98;animation:1s linear infinite spin013151;border-radius:100%}@keyframes spin013151{to{transform:rotate(360deg)}}</style>
<div id="clabs_waiting_container" class="clabs_waiting_container"><div class="clabs_waiting_loader"></div></div>
`;document.body.insertAdjacentHTML("beforeend",s),window.stencilsetanswers=!0;GetPlayer().SetVar("clabsAnswersWidgetLoaded",1)}},xhttp.open("GET",e,!0),xhttp.send()}




To show the loading screen:
document.getElementsByClassName('clabs_waiting_container')[0].style.display = 'flex';

To hide the loading screen:
document.getElementsByClassName('clabs_waiting_container')[0].style.display = 'none';

To turn the microphone ON:
clabsAudioStartMicrophone();

To turn the microphone OFF:
clabsAudioStopMicrophone(false);

To completely disable the microphone:
clabsAudioReleaseMicrophone();

To send the user's message to the chatbot (assumes the message is stored in the variable clabsAnswersUserMessage):

clabsAudioStopMicrophone(false);
let player = GetPlayer();
let message = player.GetVar('clabsAnswersUserMessage');
clabsChatbotProcessUserMessage({text: message});


The name of the variable that will contain the chatbot response after the message is processed:
clabsAnswersResponseMessage