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
  • Embedding Xenioo into your web site
  • Chat Widget
  • Embed
  • Full Page
  • Web channel and conversations
  • General Channel Settings
  • Domains
  • Display History
  • Enable Sounds
  • Enable Text Bubble Html and Scripting
  • Voice
  • Language
  • Enable User Voice
  • Enable Text Reader
  • Reader Specific Voice
  • Behavior Settings
  • Chat Widget Appear Delay
  • Wait for Widget Click
  • Auto Display Chat Delay
  • Disable Auto Display On Mobile Devices
  • Disable Auto Display For Returning User
  • Disable Auto Display After First Conversation
  • Display Callout Message Bubble
  • Context Menu Mode
  • Chat Area Settings
  • Send Button Text
  • Message Time Text
  • Input Text Placeholder
  • Description
  • Display Mode
  • Message Start Position
  • Hide Message Area when Interaction User Chat is disabled
  • Avatar
  • Icon
  • Avatar Display
  • Display User Avatar Image
  • Bubble Position
  • Style
  • Background Color
  • Foreground Color
  • Style Sheet
  • Style Sheet Mode
  • Variables
  • Further Reading

Was this helpful?

  1. Basic Concepts
  2. Publishing
  3. Channels

Web

PreviousChannelsNextWeb Variables

Last updated 1 year ago

Was this helpful?

The Xenioo Web plugin can integrate your chatbot in any web page regardless of the underlying technology.

By leveraging all the different functions and methods offered by our default integration script you can .

Embedding Xenioo into your web site

To embed Xenioo chat widget after publishing, you can just copy and paste the embed example you can find in the "How To Embed" tab of the publishing page.

There are three ways to embed the chatbot in your web site.

Chat Widget

This is the standard way to insert the chabot in your page as a chat widget.

The position of the embed code inside the page is not relevant: the Xenioo web widget will automatically and quickly create all the required components as child of your page body, without arming your existing page layout.

Embed

You can embed the full chatbot conversation area in any point of your web page.

Full Page

You can host your entire chatbot conversation area full page in your web site.

Web channel and conversations

Conversations happened inside the Web Channel are saved by Xenioo only if the user has interacted with the chatbot at least once.

This is done automatically by Xenioo to avoid cluttering your conversation are with potentially thousands of conversations that never had any interaction beside the chatbot initial greeting.

You can disable this default behaviour by setting the variable override_web_forget to true in any conversation you would like to keep, regardless of any interaction hanppened.

General Channel Settings

Domains

In this field you must specify the list of domains that will implement the Xenioo chat widget. You must use the full domain name (e.g. www.mysite.com). Multiple domains can be specified by dividing each entry with a semicolon (;). Your chatbot script will fail to initialize until the hosting domain is specified in this this field.

If, after publishing don't see the chatbot widget visible on your page try opening your browser console and check for the following message:

This Xenioo chatbot is not correctly configured. The chatbot is not published or the current domain is not whitelisted. Please review your settings or contact Xenioo support.

If you see this message, please make sure that the full name of the domain hosting the Xenioo web widget is specified in this field.

Display History

Each user is automatically identified by a unique id and Xenioo chat widget is capable of recalling the original conversation on each subsequent visit. Enabling this flag will force Xenioo to load any previous conversation inside the web widget. If this flag is disabled the conversation will always restart from the beginning at each web page visit.

Enable Sounds

Enable this flag to enable small chat sounds alerting for new messages when the chat widget is minimized.

Enable Text Bubble Html and Scripting

Voice

Language

Enable User Voice

Enabling this flag will enable speech-to-text on supported browsers. Your users will be prompted to allow microphone use by your web page. When enabled, this flag will display a small microphone near the send button of the chat area: the user can use that button to talk to the chatbot and send commands directly using his own voice.

Enable Text Reader

This flag will enable a small speaker icon on the top right corner of the chat widget and will enable the browser text-to-speech engine. If the speaker is turned on by the user, every text bubble will be read using the browser default voice or one of the configured voices.

Reader Specific Voice

In this area you can specify one or more voices you would like to be used by your chatbot. Different browsers may support different voices. Xenioo will try to configure a preferred voice starting from the first one to the bottom one, picking the first one existing. Please not that event when having the same name, different browsers and platforms may choose different pitch, intonation or general tone altogether.

Behavior Settings

Chat Widget Appear Delay

Use this setting to choose after how many seconds the chat avatar icon will appear on your web page. Setting a value of 0 (zero) means the avatar icon will appear as soon as the chat widget is initialized.

Wait for Widget Click

Enabling this setting will force Xenioo to start the chatbot only when the user actually clicks on the widget avatar icon. Enabling this setting may help you save some monthly messages on high traffic websites since no interaction is really fired until the user actually clicks on your chatbot.

Auto Display Chat Delay

This value sets the amount of seconds after which the chat area will automatically open without the user interacting. The default is zero seconds that translates to no automatic display.

Disable Auto Display On Mobile Devices

Enabling this flag will disable chat area opening on mobile devices if configured through the Auto Display Chat Delay option.

Disable Auto Display For Returning User

This flag will prevent the web chatbot from automatically opening if the user has already visited your web page.

Disable Auto Display After First Conversation

This flag will prevent the web chatbot from automatically opening if the user has already had a conversation with it.

Display Callout Message Bubble

Context Menu Mode

This setting changes the way context menus are displayed by the web plugin. By default context menus are displayed as a 3 lines button near the chat text area.

Choosing "Floating Dialog Window" instead will display the menu as an external window similar to the "Floating Card" content.

Open Automatically

Enable or disable automatic display of the context menu. This setting applies to both context menu visualization modes.

Floating Dialog Title And Text

Chat Area Settings

Send Button Text

Enable or disable the standard send button on the right of the user chat text area. This setting is off by default.

Message Time Text

This is the default text used under each Xenioo reply part to display the time of the message. You can change the text to anything you like using these pre-defined format placeholders:

Format

Value

HH

24H format hours value (eg. 14, 18 etc)

hh

12H format hours value (eg. 11, 12 etc)

mm

Minutes

ss

Seconds

AMPM

Will become AM or PM depending on actual time of message

Input Text Placeholder

This is the text that Xenioo will display as a placeholder for the user chat area

Description

This is the text that will appear right below your chatbot title inside the chatbot widget area.

Display Mode

Here you can choose if the chat area will be displayed as a box at the bottom right of the page or as a full height panel on the right side of the page.

Message Start Position

This is how new messages will be displayed in the chat area. Setting Top will make the chat start from the top of the area while choosing bottom will make the chat flow from the bottom to the top.

Hide Message Area when Interaction User Chat is disabled

If enabled, this flag will automatically hide the bottom chat area, where the user inputs all replies whenever the current interaction is set to disable user chat.

Avatar

Icon

Avatar Display

Choose if the avatar is displayed only on the title section of the chat area or beside each message.

Display User Avatar Image

Bubble Position

Choose if the avatar is displayed beside the first bubble of each interaction or beside the last one.

Style

Background Color

This is the main chatbot background color for the web widget. The default value is Xenioo Green.

Foreground Color

This is the chatbot main foreground color. The default value is white.

Style Sheet

Here you can upload a customized css file that will override (or be added to) the standard Xenioo styles. Please note that you cannot upload a customized css file unless your account has available storage space.

Style Sheet Mode

Using this field you can choose how your custom style sheet will be used. You can choose to completely overwrite the existing default Xenioo style or to load your custom style sheet together with the Xenioo one.

Depending on the amount of customization you're going to do it may be faster to simply fully replace the Xenioo style sheet or load an additional style sheet to override just some of the classes.

Variables

Variables forwarded to the client are not encrypted. We strongly advise against forwarding any variable value that contains sensitive data as it may be accessed by a debugging console.

Further Reading

For this reason, your may differ from the one you could infer from checking the actual conversations list.

Enable this flag to allow tags and scripts inside your chatbot .

Set the voice language to be used when initializing the browser text-to-speech and speech-to-text engines. Additional voices can be set using .

All of the voice options are not available to .

The Wait for Widget Click option is not available to .

This feature will display a bubble outside of the avatar area containing the same text you've configured in the start and with the same delays. If you select "Display First Message", only the first interaction message will appear in the callout bubble.

The floating menu content is managed by adding , or buttons at bot level inside your chatbot design. No context menu will be displayed on your chat area until the context menu has been configured.

Use these boxes to change the text that is displayed by the Floating Dialog Window context menu. Since the floating menu is built as the chatbot starts, only runtime, pre-defined variables are available for .

This is the image that will be used by your chatbot as web page icon and inline avatar during chat. If you already set the in your chatbot settings you do not need to specify it again here. Please note that you cannot upload an avatar unless your account has available storage space. are not allowed to personalize their chatbot avatar.

Enable this flag if you wish to see the user avatar image beside each user reply text. The avatar image is automatically retrieved from the .

In this free text area you can specify every variable you would like to be forwarded to your client widget by Xenioo. Forwarded variables are made available at client level so that your or any other client script can use them at run-time. Forwarded variables are sent to the client at every Xenioo reply and thus are updated in real-time.

Variable forwarding is not available to .

Just about all of the and by Xenioo can be applied to our web chat plugin. Additionally, these chatbot examples can be used as basic starting points for more advanced integrations.

Web Chat Widget supports text formatting. See to learn more.

messages count
text bubbles
scripting
free accounts
free accounts
interaction
Nested
Text
URL
automatic parsing
profile_pic variable
client scripts action
free accounts
articles
tutorials
here
drastically change both appearance and behavior of your Xenioo chatbot
Free accounts
Snippets/Web Chat at master · xenioo/SnippetsGitHub
Support Service Chabot | by Xenioo
Logo
Ask me anything | by Xenioo
Logo
https://www.xenioo.com/showcase/5/www.xenioo.com
Xenioo - HR Template Sample
Logo
global chatbot avatar