Bot View Template node lets you customize the appearance of your Web chatbot.
Bot View Template
Name. This field contains the name of the node (if given).
Endpoint. The endpoint this Bot view should point to is given here. (by default it is /bot/web)
Skill. This field will be populated with the current project name automatically. You cannot edit this property.
Chatbot Version. Choose the default orbita bot template here.
v1 = old view
v2 = new view
Custom CSS. You can customize your chatbot using the JS code here.
Custom JS. You can customize your chatbot using the JS code here.
Settings. The new Orbita chatbot template (Chatbot version v2) settings can be changed in this tab.
Header. You can customize the meta tag information here. By default, it will use the predefined settings.
The Header tab is available in v4.0.74 and above.
Chatbot Version v2
Chatbot Version v2 is introduced to change the look and feel of the default Orbita chatbot.
In the Settings tab of the Bot view template node, you can edit some properties like:
Title (header)
Subheader text
Banner title
Banner message.
Logo (avatar)
You can edit icons from the settings tab provided you use the correct image sizes.
Sample code for the Settings tab.
{
"header": {
"logoUrl": "/chatbot/v2/assets/branding-mark.svg",
"headerText": "Title",
"subHeaderText": "This is sub header text",
"speakerOnIconUrl": "/chatbot/v2/assets/volume-on.svg",
"speakerMuteIconUrl": "/chatbot/v2/assets/volume-muted.svg",
"closeIconUrl": "/chatbot/v2/assets/x-header.svg"
},
"banner": {
"title": "This is banner title",
"message": "This is banner message"
},
"profile": {
"defaultAvatarUrl": ""
},
"footer": {
"menuIconUrl": "/chatbot/v2/assets/plus-button.svg",
"menuIconDiabledUrl": "/chatbot/v2/assets/plus-btn-disabled.svg",
"micIconUrl": "/chatbot/v2/assets/mic.svg",
"micOnIconUrl": "/chatbot/v2/assets/mic-on.svg",
"sendButtonIconUrl": "/chatbot/v2/assets/button-circular-01.svg",
"sendButtonDisabledIconUrl": "/chatbot/v2/assets/send-circular-01-disabled.svg"
},
"theme": {
"dockFloat": {
"buttonSrc": "/chatbot/v2/assets/branding-mark.svg",
"buttonTitle": "button Title"
}
},
"botAvatarUrl": "/chatbot/v2/assets/orbita-icon.svg",
"animationAvatarImageUrl": "/chatbot/v2/assets/avatar_loading.gif",
"animationImageUrl": "/chatbot/v2/assets/msg_loading.gif",
"popover": {
"text": "Hi there",
"waitTime": 3000,
"documentTitle": "New Message!",
"titleChangeTime": 2000
}
}
The Experience Manager > Project Side navigation menu >Chatbot Settings > Settings tab will take the highest priority. Refer, Chatbot Settings.
Sample code in the Header tab
<title>Browser tab title</title> <meta http-equiv='X-UA-Compatible' content='IE=edge' /> <meta name='viewport' content='width=device-width, initial-scale=2.0, maximum-scale=1.0, user-scalable=no'/>
The popover property in the settings object is available in v4.0.68 and above.