Xenioo Official Docs
  • Welcome!
  • Product Overview
    • Definitions
    • Building & Sending
    • All Integrations
    • Mobile App
    • Artificial Intelligence
    • Reporting Dashboard
    • Professional Service & Support
    • Privacy & Security
    • GDPR
  • Basic Concepts
    • Your Account
      • The Trial plan
      • Upgrading your trial
      • Additional Packages
      • Canceling your current plan
      • Deleting your account
      • Messages Count
      • Data Retention
      • Multi-factor Authentication (MFA)
        • MFA Configuration
        • MFA Login
      • Multiple Owners
    • Designing your Chatbot
      • My Bots
      • Introduction
      • Flow Design
      • Behaviors
      • Interactions
      • Actions and Operations
    • Chatbot Details
      • Chatbot Settings
        • General Settings
        • Localization Settings
        • Conversation Settings
        • Integration Settings
        • Payment Integration Settings
        • Developers Setting
      • Teams
        • Team Permissions
        • Team Message Templates
        • Availability Calendars
        • Takeover Default Message
        • Team Member Access
      • Backup & Restore
      • Master and Child Bot
    • Publishing
      • Live & Draft Chatbots
      • Publish Your Bot
      • Channels
        • Web
          • Web Variables
          • WordPress
          • Widget Customization
            • Initialization
            • Scripting
        • WhatsApp
          • WhatsApp Variables
          • First Message Processing
          • Opt-in QR code generation
        • RCS
          • RCS Variables
          • Configuring Providers
            • LINK Mobility
          • Opt-in QR code generation
        • Google Business Messages (Deprecated)
          • Google Business Messages Variables
        • SMS
          • SMS Variables
          • Configuring Providers
            • LINK Mobility
        • Facebook
          • Facebook Ads Integration
          • Feed Integration
          • Messenger Referral
          • Facebook Variables
          • Moving users from an existing bot to Xenioo
        • Instagram
          • Instagram Variables
        • Telegram
          • Telegram Deep Linking
          • Telegram Variables
        • Slack
          • Configuring Slack
          • Slack Variables
        • Microsoft Teams
          • Microsoft Teams Variables
        • Discord
          • Discord Variables
        • Alexa
          • Troubleshooting
          • Alexa Variables
        • Phone
          • Phone Variables
          • Configuring Providers
            • Voximplant
        • Genesys
          • Genesys Variables
        • Viber
          • Viber Variables
        • Custom
          • REST Reference Guide
          • API Variables
  • Artificial Intelligence
    • NLP
      • Intents
      • Expressions
      • Entities
        • Creating Manually
        • Entity Types
        • Synonims
      • Training & Testing your Model
        • Using the NLP Parse Logs
        • Importing Intents From File
      • NLP Master
    • Large Language Models
      • Settings
      • Guidelines
      • Resources
      • Functions
      • Train & Test
  • Database
    • Xenioo Database
    • Collections
      • Import And Export Collections Data
    • Database API Interface
      • Url Filtering Syntax
      • Read Record
      • Save To Collection
      • Delete From Collection
      • Query Collection
        • Open Query
        • Read Records
      • CSV Direct Data
  • Broadcasts
    • Broadcasts
      • Settings
        • On Demand
          • HubSpot
        • On Date And Time
        • On Time
        • On Trigger
        • On Interval
        • On Conversation State Changed
    • Broadcast Widget Page
    • Campaigns
    • Distribution Lists
    • Audiences
    • Distribution Logs
  • Conversations
    • Conversations
    • My Conversations
    • Contacts
    • Chat Commands
    • Contact Details
  • Analytics
    • Dashboards
    • Goals
    • Audit Logs
    • Widgets
      • List of Widgets
  • Actions And Operations
    • Execution
      • Execution Diagram
    • Actions Availability
    • Variables and Tags
    • Dynamic Parsing And Content
    • Content
      • Text Action
      • Random Text Action
      • Quick Reply Action
      • Database Quick Reply Buttons Action
      • Quick Reply Array Action
      • Chat Delay Action
      • Phone Quick Reply Action
      • Email Quick Reply Action
      • Location Quick Reply Action
      • Display Location
      • Image Action
      • QR Code Action
      • Video Action
      • Audio Action
      • File Action
      • Url Action
      • NLP Topics Summary Action
      • Highly Structured Message
      • Custom Class
      • Comment Action
    • Input
      • Voice Recognition Action
      • Global Detection
        • Text Parse Action
        • NLP Processing Action
        • Dialogflow Detection Action
        • IBM Watson Assistant Intent Detection Action
        • OpenAI Assistant Detection
        • AI Detection
      • Generic Input Action
      • NLP Input Action
      • Number Input Action
      • Email Input Action
      • Phone Number Action
      • Media Attachment Action
      • Voice Input Action
      • Global Detection Action
      • OpenAI
        • OpenAI Assistant Input
        • OpenAI Assistant Detection
      • Dialogflow
        • Dialogflow Input Action
        • Dialogflow Detection Action
      • IBM Watson Assistant
        • IBM Watson Assistant Input Action
        • IBM Watson Assistant Detection Action
      • Large Language Models
        • AI Detection
        • AI Input
    • Flow
      • Agent State Check
      • Calendar Check
      • Channel Check
      • Conversation Bookmark Action
      • Create Conversation URL Action
      • Flow Control Action
      • Go To Action
      • Goal
      • Include Interaction Action
      • Log Message
      • Random Split Action
      • Reset Conversation Action
      • Set Chat Operator State Action
      • Schedule Behaviour Action
      • Tag Switch Action
      • Variable Switch Action
      • Set Context Action
      • Control Conversation Transfer Action
        • Forward Variable Value Action
    • Forms
      • Form Container
      • Fields
        • Text Box
        • Password
        • Text Area
        • Dropdown
        • Checkbox
        • Number
        • Date Picker
        • Time Picker
        • Calendar
        • File Upload
      • Layout
        • Image
        • Literal
        • Divider
        • Html Content
        • Custom CSS
    • Database
      • Load Single Record
      • Delete Records
      • Save Record
      • Save Raw Model
      • Query Collection Data
      • Move To Next Record
      • Set Field Filter Value
      • Order By Field
      • Set Field Value
      • Database Function
    • Cards
      • Carousel Template Action
      • List Card Template Action
      • Buttons Card Template Action
      • Card Container Action
      • Interactive Message Action
      • One-Time Notification Request Action
      • Database Carousel Action
      • Dynamic Carousel Action
      • Card And Menu Buttons
        • Postback Button Action
        • URL Button Action
        • Call Phone Button
        • Share Button Action
        • Nested Button Action
        • Interactive Button
    • Profile
      • Set Variable Action
      • Delete Variable Action
      • Set Tag Action
      • Delete Tag Action
      • Set Campaign Subscription Action
    • Privacy
      • Forget User
      • Privacy Opt-In
      • Privacy Flag Condition
    • IoT
      • Control Device State
      • Device State Switch
    • Integration
      • Call API Service Action
      • Execute Cloud Script Action
        • Base Conversation object methods
        • Firebase Connection methods
        • Xenioo Database Collection Methods
      • Execute Client Script Action
      • Send SMS Message
      • LINK Mobility Payment API Action
      • Marketing Platform Action
      • Dynamic Content Action
      • Post To Facebook Action
      • Firebase Database Action
      • ActiveCampaign Action
      • Zapier Webhook Action
      • Microsoft Teams Webhook Action
      • MailChimp Contact Action
      • Marketing Platform Action
      • Wordpress Search Action
      • RSS & Podcast Feed Action
      • SendGrid Mail Action
      • Send Mail Action
      • Send Custom Mail Action
  • Xenioo API
    • Choosing your API
    • Global Platform API
      • Authorization
      • Platform SSO
      • Bots
        • List
        • Publishing
          • Publish
          • Get Channel Settings
          • Set Channel Settings
        • Variables
        • Cloning and Referencing
          • Clone
          • Reference Clone
          • Attach Child
          • Detach Child
        • Backup And Restore
          • Backup
          • Restore
          • Restore With Overwrite
      • Teams
        • Members
          • List
          • Add Or Update
          • Delete
        • Profiles
          • List
          • Add Or Update
          • Delete
      • Conversations
        • Audiences
        • Audience Contacts
        • Entries
        • Share Url
      • NLP Query
      • Large Language Models
        • Settings
        • Guidelines
        • Add Resource
        • Delete Resource
        • Add Function
        • Delete Function
        • Train
        • Train State Check
        • Test
      • Statistics
        • Account Statistics Data
        • Bot Statistics Data
        • Report Files
        • Download Report File
      • Broadcasts
        • Broadcasts List
        • Broadcast State
  • Changelog
Powered by GitBook
On this page
  • Events
  • Functions

Was this helpful?

  1. Basic Concepts
  2. Publishing
  3. Channels
  4. Web
  5. Widget Customization

Scripting

PreviousInitializationNextWhatsApp

Last updated 1 year ago

Was this helpful?

The Xenioo widget script supports multiple functions you can use to interact with the chat from an external script or to alter chat rendering during execution. an interactive example of the most widely used functions.

Events

Events are fired as the user or the bot execute specific operations. Your script can implement these events by simply supplying your own function inside the initialization script. In the following example, the initialization script is attaching to the onChatShow event:

<script [...] src="https://res.xenioo.com/plugin/xenioo.js"></script>
<script>
    xenioowebchat.Start("<chatbotid>",{
        onChatShow : function(){
        	console.log( "Chat area is now visible." );
        }
    });
</script>

Below you can find the full list of the supported events:

Event

Description

Parameters

onInit

Fired as soon as chatbot initializations is started

None

onReady

Fired when initialization ends and the chatbot is ready

None

onChatClose

Happens every time the user closes the chat window

None

onChatShow

Happens every time the user or a script opens the chat window

None

onChatHide

Happens every time the user or a script closes the chat window

None

onWidgetClick

Fired as the user clicks on the chat widget on the bottom right

calloutclicked = true if the user opened the chat by clicking on the callout bubble, false otherwise.

onDataConnection

Fired whenever the chatbot is retrieving data from the Xenioo servers

None

onItemRender

Fired every time a single item is rendered in the chat window

obj = the instance of the chat part to be rendered

onElementRender

Fired after the chat element to be rendered is ready to be added to the DOM

element = DOM node instance

obj = the instance of the chat part to be rendered

onButtonClick

Fired as a button is clicked in the chat window

say = The text of the button, command = the id of the button

onUserSays

Happens as soon as the user types something in the chat

say = the text sent by the user.

onChatInteractionStarted

Fired as soon as Xenioo starts rendering the first interaction chat element

None

onChatInteractionCompleted

Fired as soon as interaction rendering is done and control is given back to the user

None

onVoiceConfigured

Fired as soon as Xenioo completes the initialization of languages and voices for text-to-speech

speechutterance = a SpeechSynthesisUtterance object that will be used to for speech-to-text

onDestroy

Fired as soon as the whole Xenioo widget is destroyed and removed from the page contents

None

onCalloutDisplay

text = the text to be displayed in the callout bubble.

The following script implements all of the above events:

<script [...] src="https://res.xenioo.com/plugin/xenioo.js"></script>
<script>
    xenioowebchat.Start("d07be17d-9be1-4f57-b220-af5559f61f8e", {
		onInit : function( options ){
				console.log( "Starting initialization." );
				console.log( options );
		},
		onReady : function(){
				console.log( "Xenioo chat instance is now ready." );
		},
		onChatClose : function(){
				console.log( "User has closed the chat area." );
		},
		onChatShow : function(){
				console.log( "Chat area is now visible." );
		},
		onChatHide : function(){
				console.log( "Chat area is now hidden." );
		},
		onWidgetClick : function( calloutclicked ){
				console.log( "User clicked Xenioo chat widget." );
		},
		onDataConnection : function(){
				console.log( "Connecting to Xenioo servers." );
		},
		onItemRender : function( obj ){
				console.log( "Rendering item in chat area (check console log for object details)" );
				console.log( obj );
		},
		onElementRender: function( element, obj ){
				console.log( "Rendering item in chat area (check console log for object details)" );
				console.log( obj );
		},
		onButtonClick : function( say, command ){
				console.log( "User clicked '" + say + "' button." );
		},
		onUserSays : function( say ){
				console.log( "User input:" + say );
		},
		onChatInteractionStarted : function(){
				console.log( "Interaction started." );
		},
		onChatInteractionCompleted : function(){
				console.log( "Interaction finished. Control is back to the user." );
		},
		onVoiceConfigured: function( utterance ){
				console.log( "Voice is initialized!" );
		},
		onDestroy : function(){
				console.log( "Chat widget erased removed from page" );
	  },
		onCalloutDisplay: function( text ){
   			console.log( "Callout bubble displayed:" + text );
		}
});
</script>

Functions

To use Xenioo web widget functions all you need to do is refer to the global xenioowebchat JavaScript variable that is created automatically by the Web Widget script.

isChatOpened()

Returns true if the chat area is visible, otherwise false.

openChat()

Open the chat area if closed. If the chat area is already visible, nothing happens.

closeChat()

Close the chat area if open. If the chat area is already hidden, nothing happens.

toggleChat()

This function will open the chat area if closed or close it if opened.

resetChat()

This function will reset the chat area, removing all message bubbles and clearing the current user id. Using this function will create a new conversation on Xenioo but will not reset the chat layout and personalization.

scrollCarousel( speed, id, indexmove )

This function will make the carousel specified by id move by speed. If speed is negative, the carousel will scroll to the left otherwise to the right. The active index of the carousel will be the result of the current index value plus indexmove.

say( text, command )

The say function will send a text or command to the chatbot. This is exactly as the user writes something or click on a specific button.

showBubble( text )

hideBubble()

getVariable( name )

setVariable( name, value )

goTo( behavior, interaction, params )

This function will redirect the conversation the the specified behaviour and interaction. Additionally, one or more parameters can be specified. These parameters will be translated to variables sent to the chatbot runtime. The script below shows an example of a goTo call:

xenioowebchat.goTo( "My Bot Behaviour", "Bot Interaction Name", 
    { 
      mycustomvariable : "sometest",
      myothervariable : "moretest"
    }
);

closeFloatContent()

Close the floating content area if open. If the floating content area is already hidden, nothing happens.

openFloatContent();

Open the floating content area if closed. If the floating content area is already visible, nothing happens.

toggleFloatContent();

This function will open the floating content area if closed or close it if opened.

showFloatingUrl( { Text, Command } );

This function will open the floating content area and display the Url set in Command. The floating area will have the title set in Text. The floating area can be seen only if the chat area is opened.

xenioowebchat..showFloatingUrl( 
						{ 
						  Text:"Xenioo Home!!!",							//title
						  Command: "https://www.xenioo.com" 	//target url
						} );

setVoiceLanguage( language, voice );

This function will change the current voice configuration setting by applying a new language or a new voice to the current utterance instance. The following example will change the current language to Italian:

xenioowebchat.setVoiceLanguage( "it-IT" );

In the following example instead, we're switching to the first available voice on the current browser:

xenioowebchat.setVoiceLanguage( null, window.speechSynthesis.getVoices()[0] );

Voice changes will take effect starting from the next sentence to be said by the text-to-speech engine.

destroy();

This function will stop the Xenioo chat widget and remove any content generated from the page.

Fired when the of the widget is displayed

Display the chat widget with the message specified in text. The bubble is displayed only if the chat area is closed.

Hides the currently displayed . If no bubble is displayed the command is ignored.

Returns the value of a conversation variable sent to the client by. Only variables selected for forwarding are available here. If the variable is not found, null is returned.

Will add a variable with a given value to the next message sent to Xenioo. Differently from the this command does not set the variable value right away: a user interaction is required in order to send the data back to the bot.

You can find here
Web Publishing configuration
Cloud Scripting SetVariable
callout bubble
callout bubble
callout bubble