Bot view template node

Owned by Rajkiran Alla (Deactivated)
Last updated: Jul 14, 2021
4 min read

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

       

  • Chatbot CDN. You can now set the CDN path at msg.payload.cdnPath. This property will take priority over the path set in the Chatbot CDN textbox of the Bot view template node (Setting the path in the CDN field is disabled post v4.0.84).

  • 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'/>

 

Related Articles