Bot Previews
Previewing the Bot
Webex Bot Builder platform provides users with an easy way to preview their bots while developing it and even after development is done. This provides developers with an easy way to test the functioning of their bots and determine if the desirable responses are generated corresponding to respective input queries. There are several ways to launch the Bot Preview.
- Bot dashboard: On hovering over a bot card the _preview _option for that bot become visible. Clicking that launches the bot preview.
- Bot header section: After entering the Edit mode for any bot by clicking on the bot card or the Edit button on the bot card the Preview button is _always visible _on the header section.
- Minimized widget: After a preview is launched and then minimized a chat head widget is created at the bottom right of the page and be used to easily relaunch the preview mode.
In addition to this, Webex Bot Builder also provides a shareable preview. Users can copy the shareable preview link from within a bot by clicking the menu on the top right and selecting Copy Preview Link option. This link can be shared with testers or consumers of the bot.

Launching from dashboard

Launching from the bot section header

Launching from the widget

Copy preview link option for shareable preview.
Platform preview widget

Bot Preview
The preview widget opens up on the bottom right of the screen. One can provide utterance (or sequence of utterances) for which the bot's response needs to be checked. This functionality enables the developer to ensure that the bot is responding as expected.
The preview widget can be maximized. There are other useful features available such as providing consumer information and initiating multiple rooms to better test the Bot.

Full screen preview
Shareable preview widget
The shareable preview widget enables bot developers to share their bot with stakeholders and consumers in a presentable manner without the need of developing a custom UI to surface the bot. By default, the copied preview link renders the bot with phone casing. Developers can do some quick customization by changing certain parameters in the preview link. They two major customizations are:
- Widget color: By appending brandColor parameter to the link. Users can define simple colors using color names or use hex code of colors.
- Phone casing: By changing the value of phoneCasing parameter in the link. This is set to true by default and can be disabled by making it false
Example preview link with these parameters: ?botunique_name=<yourbot_unique_name>&enterpriseunique_name=<yourenterprise_unique_name>&root=.&phoneCasing=true&brandColor=_4391DA

Shareable preview widget with phone casing enabled
Formatting the text in bot responses
Markdown is a lightweight and easy-to-use syntax for styling the text on the Web. Using Markdown, you can bold, italicize, create ordered or unordered list, and add hyperlinks. The Markdown syntax is used to format and highlight these areas on the IMIbot preview widgets:
- Text of the bot responses
- Text of quick reply template
- Description of carousel template

Using markdown in response designer to format a response

Response rendered on the live chat widget
You can also use HMTL to format the text in the bot responses, but this text cannot be rendered on the IMIbot’s preview widget.
Previewing the bot through API
In the bot builder, every feature is developed with an API approach initially. Users can preview and access the bots built on the platform through APIs. This can be used to test scenarios that are difficult to replicate through the GUI preview or to integrate with their custom UIs and applications.
Getting bot access token
To integrate the bot with other systems, an access code is required. Follow these steps to get the access code of the bot:
- Navigate to the appropriate bot type (Q&A or Task bots) tab on the dashboard.

- Click the ellipses icon on a specific bot card and click Copy Access Token.

Interacting with the bot
Here we will use postman as an example to interact with the bot API using the access token.
- On a new postman tab, select POST as the method.
- Enter the request URL: https://imibot.ai/api/v1/webhook/web/
- Select the Headers section to provide these values:
Key | Value |
---|---|
bot-access-token | |
Content-Type | application/json |
- Navigate to Body section, select type as ‘raw’, and enter your request in this format, with "msg" field containg the user message:
{"consumer":{
"phone":"473487789789",
"extras":{}
},
"msg":"ticket booking from bangalore to raipur through hyderabad",
"type":"human",
"platform":"web",
"extras": {"name":"AT"},
"is_test": true
}
- Hitting send will give you a response from the bot being used. The bot response is available in the "generated_msg" field of the response. In addition, a bunch of other fields are also available that can be used by developers depending on their business use-case.
{
"TimeStamp": 1633071201649,
"bot_message_id": 26266116,
"bot_msg": "",
"extra_params": {
"name": "AT"
},
"extras": {
"name": "AT"
},
"generated_msg": [
{
"text": "Hi, I am MyBank's virtual assistant. You can ask queries which you need help with like generating statements, checking account balance, and much more. <br><br>How can I help you today?"
}
],
"language": "en",
"messageStore": {
"agent_handover_by_rules": false,
"algo_id": "deeppavlov",
"category_id": "2",
"category_name": "Smalltalk",
"corpus_id": 3743,
"n_sections": [
{
"closest_matches": "Hi",
"first_question": "Hello",
"score": 1.0,
"section_id": "12"
},
{
"closest_matches": "What can you do?",
"first_question": "What can you do?",
"score": 0.0,
"section_id": "help"
},
{
"closest_matches": "Talk to an agent",
"first_question": "Talk to an agent",
"score": 0.0,
"section_id": "agent"
}
],
"partial_match_sections": [],
"response_type": "rich",
"sendtoagent": false,
"thresholding_scores": {
"n_results": 3,
"threshold_diff_score": 0.05,
"threshold_min_score": 0.5
},
"top_match_section": {
"closest_matches": "Hi",
"first_question": "Hello",
"score": 1.0,
"section_id": "12"
}
},
"partial_match": false,
"platform": "web",
"progressive": false,
"response_flag": true,
"room": {
"_id": "6156ae6ad3f383003b0b072d",
"agent_handover": false,
"agent_handover_rules_count": {
"consecutive_count": 0,
"fallback_count": 0,
"last_triggered": "12",
"partial_match_count": 0
},
"allow_anonymization": false,
"bot_disabled": false,
"bot_id": 590,
"callback": false,
"channels": [
"web"
],
"consent_permissions": [],
"consumer_id": 4003929,
"created_at": 1633070698803,
"cross_retention_period": false,
"data_store": {},
"df_state": {},
"downvoted_message_count": 0,
"error_message_count": 0,
"feedback_count": {
"downvote": 0,
"upvote": 0
},
"id": 5471108,
"imichat_agent": {},
"imiconnect_conversation_id": "",
"is_anonymized": false,
"is_test": true,
"last_message_time": "2021-10-01T06:53:21.648374",
"last_updated_job_id": "6156b061d5abca668a26d1f8",
"manager_bot_room_id": 0,
"message_count": {
"agent": 0,
"bot": 3,
"total": 6,
"user": 3
},
"metadata": {},
"new_room": false,
"room_state_closed": false,
"selected_avatar": {},
"sendtoagent_count": 0,
"session_id": "",
"total_message_count": 6,
"updated_at": 1633070841740,
"upvoted_message_count": 0
},
"section_matched": [
{
"closest_matches": "Hi",
"first_question": "Hello",
"score": 1.0,
"section_id": "12"
}
],
"sendtoagent": false,
"thresholding_scores": {
"n_results": 3,
"threshold_diff_score": 0.05,
"threshold_min_score": 0.5
},
"transaction_id": "24ae3399b75d4ea6ad2e0ef3a1e3ea11"
}
Message routing via Webex Connect app
'Route via Webex Connect app' setting under 'Message routing' in Integration settings of each Q&A and Task bot allows you to test imiconnect flows in the bot preview and shareable preview for your bot. Most solutions bots are meant to be consumed in bot nodes as a part of larger connect flows. Most real-world solutions will require DB lookups, fulfillment, and communication with external systems, which is achieved through connect flows.
This feature has been developed to facilitate pre go-live end-to-end testing of Webex Connect flows and rules that use the current bot and not as a generic interface to test any Webex Connect flow. Using this feature for any other purpose is not recommended.
- Gather feedback setting will be disabled in this mode.
- Sessions and Curation will only contain messages received by the bot in your flow. Messages addressed by other components of the flow will not be recorded in bot sessions and curation.
- Testing section will continue to execute any configured test cases for the bot's trained or live corpus, and not the connect flow.
App Id and app secret for a mobile/web Webex Connect app can be found by visiting the 'Apps' section and opening your app. The service key can be found in the API tab of each service after selecting 'Service key' from the dropdown.

Configuring Webex Connect app details in a bot
When this setting is disabled, users will still be able to test their bots in the platform preview as well as the shareable preview as usual. Gather feedback, session, and curation features will also word as expected. In these scenarios, the bot preview interfaces directly with bot builder backend to get the appropriate responses for the current bot corpus.

Bot preview process without message routing enabled.
Once this setting is enabled and the bot is updated with the required app and service details, any message sent to bot preview will be redirected to the connect app. This in-turn will invoke any Webex Connect flows and rules configured for this app. Responses sent out to the users are now dependent on Webex Connect flow or rule runtime based on user configurations for the flow. The bot being used will continue to log any messages in session and curation depending on how it's used in the flow.

Preview schematic when routing messages via Webex Connect app.
This simple configuration allows your team to test any connect flow built for mobile/web channel end-to-end without building your own testing UI. The bot builder shareable preview also allows you to share the preview link and quickly gather feedback on your end-to-end Webex Connect solution.
Updated 3 months ago