{"id":23144,"date":"2020-02-07T11:54:23","date_gmt":"2020-02-07T11:54:23","guid":{"rendered":"https:\/\/developer.kore.ai\/v8-1\/?p=23144"},"modified":"2022-02-02T03:49:24","modified_gmt":"2022-02-02T03:49:24","slug":"storyboard","status":"publish","type":"post","link":"https:\/\/developer.kore.ai\/v8-1\/docs\/bots\/bot-builder-tool\/bot-creation\/storyboard\/","title":{"rendered":"Storyboard"},"content":{"rendered":"<section class=\"l-section wpb_row height_auto\"><div class=\"l-section-h i-cf\"><div class=\"g-cols vc_row type_default valign_top\"><div class=\"vc_col-sm-12 wpb_column vc_column_container\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<p>Visualizing how end-users are expected to interact with the bots is a very essential exercise in building successful bots. This helps you design engaging conversations as well as simplifies the communication between business users, conversation designers, language experts, and bot developers.<br \/>Designing <a href=\"https:\/\/blog.kore.ai\/a-complete-guide-to-chatbots\" rel=\"noopener noreferrer\" target=\"_blank\">chatbots<\/a> comes with different challenges as compared to the development of traditional websites or apps. Most of the design tools like flow charts, tracking tools, and versioning software cater to app development.<\/p>\n<p>Kore.ai\u2019s <strong>Storyboard<\/strong> is an intuitive conversation designer that simplifies and streamlines the bot development process. It allows you to design various scenes that are representative of the actual end-user conversations with the bot. You can share scenes with your teams for collaborative development. You can also present scenes as prototypes to the business owners to receive feedback.<\/p>\n<p>Note: This feature was introduced in v7.2 of the platform<\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h1><span class=\"ez-toc-section\" id=\"Features\">Features<\/span><\/h1>\n<p>The Storyboard feature is in Beta Version. The features of Storyboard are as follows:<\/p>\n<ul>\n<li>Design conversations using simple text messages, carousels, lists, and more.<\/li>\n<li>Elaborate the conversations with link messages across the paths.<\/li>\n<li>Visualize the complete conversation across different paths as a unified flow.<\/li>\n<li>Build a comprehensive user flow by linking various conversations.<\/li>\n<li>Co-create conversations by collaborating with other designers.<\/li>\n<li>Share interactive prototypes with stakeholders for reviews and feedback.<\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h1><span class=\"ez-toc-section\" id=\"Overview\">Overview<\/span><\/h1>\n<p>The Storyboard consists of multiple scenes. Each scene depicts a conversation as a series of bot and user messages. Bot messages are defined as <em>plain text messages<\/em> or using <em>rich templates<\/em>. Scenes have the following features:<\/p>\n<ul>\n<li>You can view the scenes either in an interactive <em>conversation view or<\/em>\u00a0<em>flow view<\/em> for easy tracking and understanding.<\/li>\n<li>There can be multiple inter-linked <em>paths <\/em>in a scene to represent various alternate flows of the conversation.<\/li>\n<li>It allows for a <em>collaborative <\/em>effort. You can share with various stakeholders for review, approval, and\/or development.<\/li>\n<li>Stakeholders can review and add their c<em>omments<\/em>.<\/li>\n<li>There is a provision for developers to<em> add notes <\/em>to describe or explain a particular path or message.<\/li>\n<li>A story <em>timeline <\/em>is generated to mark crucial states in the conversation using either predefined hashtags or custom tags.<\/li>\n<li><em>Preview <\/em>the flow for a real-time experience and much more.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Let us look into each of these features in detail.<\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h1><span class=\"ez-toc-section\" id=\"Storyboard\">Storyboard<\/span><\/h1>\n<p>The storyboard is the primary module that provides a complete overview of all the scenes available in that bot, the status of these scenes, and various other options associated with these scenes. You can access it from the <strong>Storyboard<\/strong> option on the left navigation pane of the Kore.ai Bot Builder platform.<\/p>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/18\/storyboard_access.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22936\" src=\"\/wp-content\/uploads\/sites\/18\/storyboard_access.png\" alt=\"\" width=\"1366\" height=\"768\" \/><\/a><\/p>\n<p>This page allows you to create a <strong>New Scene<\/strong>. To create, follow the below steps:<\/p>\n<ol>\n<li>Click <strong>New Scene<\/strong> on the top-right.<\/li>\n<li>On the New Scene dialog box, enter a name in the<strong> Scene Name<\/strong> field and a description in the <strong>Description<\/strong> field.<\/li>\n<li>Select a status from the <strong>Status<\/strong> drop-down list. Available statuses are In Progress,\u00a0Completed, and Approved. You can also create a custom status if needed.<\/li>\n<li>Click <strong>Proceed<\/strong>.<\/li>\n<\/ol>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/18\/storyboard_new_scene.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22775\" src=\"\/wp-content\/uploads\/sites\/18\/storyboard_new_scene.png\" alt=\"\" width=\"492\" height=\"458\" \/><\/a><\/p>\n<p>You can also perform the below-listed actions:<\/p>\n<ul>\n<li><strong>Import<\/strong> an existing scene in a CSV format.<\/li>\n<li><strong>Filter<\/strong> scenes based upon their status.<\/li>\n<li><strong>Search<\/strong> for a scene by name.<\/li>\n<li>For each scene, you have an option to:\n<ul>\n<li><strong>Share<\/strong> the scene with other users or teams.<\/li>\n<li><strong>Duplicate<\/strong> the scene to create a copy.<\/li>\n<li><strong>Export<\/strong> the scene into CSV format.<\/li>\n<li><strong>Edit<\/strong> the name, description, and status of the scene.<\/li>\n<li><strong>Delete<\/strong>\u00a0the scene.<\/li>\n<\/ul>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/18\/storyboard_options.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22776\" src=\"\/wp-content\/uploads\/sites\/18\/storyboard_options.png\" alt=\"\" width=\"1301\" height=\"331\" \/><\/a><\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h1><span class=\"ez-toc-section\" id=\"Scenes\">Scenes<\/span><\/h1>\n<p>As mentioned in the <em>Overview<\/em> section, a scene depicts the conversation as a series of bot and user messages.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conversation_View\">Conversation View<\/span><\/h2>\n<p>After you add a scene to your Storyboard, you are presented with a blank <strong>Conversation View<\/strong>, where you can enter the user-bot messages.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene-1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene-1.png\" alt=\"\" width=\"1366\" height=\"768\" \/><\/a><\/p>\n<p>The editor has the following features to help you design the conversation:<\/p>\n<ul>\n<li><strong>User Tab<\/strong>: It is used to enter possible messages from users either requesting information or providing input to a request by the bot. These messages are defined as:\n<ul>\n<li>Plain text messages. For example, in a Banking Bot, <em>I want to transfer<\/em> <em>money<\/em> or <em>I want to know my account balance.<\/em><\/li>\n<li>Attachments. For example, in a Banking Bot, <em>to upload documents to complete KYC requirements<\/em>.<\/li>\n<\/ul>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_user-1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_user-1.png\" alt=\"\" width=\"495\" height=\"237\" \/><\/a><\/li>\n<li><strong>Bot<\/strong> <strong>Tab<\/strong>: It is used to design bot messages. Bot Messages are messages that the bot sends to users as a greeting, information, answer to a user query, or requesting for input. These messages are defined as:\n<ul>\n<li>Plain text messages with options to mark text as bold, italics, indent, multi-line, and lists &#8211; ordered and unordered.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_bot.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_bot.png\" alt=\"\" width=\"490\" height=\"148\" \/><\/a><\/li>\n<li>Rich messages using the predefined templates like buttons, list, quick reply, etc,. (<a href=\"#Bot_Messages_Templates\">see below for a list of supported templates<\/a>).<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_button-1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_button-1.png\" alt=\"\" width=\"496\" height=\"409\" \/><\/a><\/li>\n<\/ul>\n<\/li>\n<li><strong>Notes<\/strong>: It is used to add text between messages describing an action or portion of the conversation.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_notes-1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_notes-1.png\" alt=\"\" width=\"496\" height=\"387\" \/><\/a>Notes also provide an option to define the timeline of the conversation by using <em>hashtags<\/em>. Thus defined notes help denote an important state in the conversation. It appears on the left of the conversation under the <strong>Story Timeline<\/strong>. You can move to the relevant place in the conversation by clicking the tag on the timeline.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/18\/storyboard_scene_hashtag.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22783\" src=\"\/wp-content\/uploads\/sites\/18\/storyboard_scene_hashtag.png\" alt=\"\" width=\"746\" height=\"332\" \/><\/a><br \/>\nYou can define your own <em>custom tags<\/em> or use one of the <em>pre-defined tags<\/em>. Each of these pre-defined tags is depicted by a unique symbol in the timeline indicating its purpose. These pre-defined tags include:<\/p>\n<ul>\n<li>#Start_&lt;intent-name&gt;<\/li>\n<li>#Hold_&lt;intent-name&gt;<\/li>\n<li>#End_&lt;intent-name&gt;<\/li>\n<li>#Resume_&lt;intent-name&gt;.<\/li>\n<\/ul>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/18\/storyboard_scene_timeline.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22784\" src=\"\/wp-content\/uploads\/sites\/18\/storyboard_scene_timeline.png\" alt=\"\" width=\"1366\" height=\"768\" \/><\/a><\/p>\n<p>With the <em>tag <\/em>option, you can classify notes using an existing or by creating a new custom tag. These tags are color-coded for reference.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_notes_tag.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_notes_tag.png\" alt=\"\" width=\"795\" height=\"341\" \/><\/a><\/li>\n<li><strong>Paths<\/strong>: Paths are different flows in which the conversations provide based on the options provided by the bot or the user. For example, a bot expects a <em>yes<\/em> or <em>no<\/em> response from the user, and the path differs based upon the user response. Using the bot message, the template pre-defines the number of alternate paths allowed. The business logic can also decide the number of paths.<br \/>\nTo continue the scene along a specific path, you can select the path either using the <strong>Previous Path<\/strong> (<strong>&lt;-<\/strong>) and <strong>Next Path<\/strong> (<strong>-&gt;<\/strong>) or select the options given to the user. You can also add additional paths using the <strong>New Path<\/strong> (<strong>+<\/strong>) option.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/18\/storyboard_scene_path1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23251\" src=\"\/wp-content\/uploads\/sites\/18\/storyboard_scene_path1.png\" alt=\"\" width=\"748\" height=\"379\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/wp-content\/uploads\/sites\/18\/20221201100153\/storyboard_scene_path1.png 748w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/wp-content\/uploads\/sites\/18\/20221201100153\/storyboard_scene_path1-300x152.png 300w\" sizes=\"auto, (max-width: 748px) 100vw, 748px\" \/><\/a><\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h3><span class=\"ez-toc-section\" id=\"Message_Options\">Message Options<\/span><\/h3>\n<p>You can reorder the messages by a simple drag and drop action. When you hover over a message you can find the following options:<\/p>\n<ul>\n<li>Go to <strong>Previous <\/strong>and <strong>Next<\/strong> Paths<\/li>\n<li>Add <strong>New Path<\/strong><\/li>\n<li>Add\u00a0<strong>Comments<\/strong><\/li>\n<li><strong>Delete <\/strong>a message<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_edit-1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_edit-1.png\" alt=\"\" width=\"877\" height=\"328\" \/><\/a><\/li>\n<li><strong>Link a Message<\/strong>: You can use this option to link another message in this scene and continue a flow that is already designed. When selected, this option transitions to the Flow view from where you can select the message node, and the same is linked to the current node.<br \/>\nNote: This option is available only for the leaf nodes with no flow defined.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_linkmsg-1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_linkmsg-1.png\" alt=\"\" width=\"880\" height=\"390\" \/><\/a><\/li>\n<li><strong>Link a Scene<\/strong>: You can use this option to link a pre-defined scene in the storyboard. This scene is invoked during the preview. When selected, this option gives a list of scenes for you to select from and the same is linked to the current node. You can also perform the below-listed actions:\n<ul>\n<li>View Scene: Click <strong>View Scene<\/strong> to open in a read-only window.<\/li>\n<li>Unlink: Click <strong>Unlink<\/strong> to unlink the scene.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_linkscene.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_linkscene.png\" alt=\"\" width=\"865\" height=\"298\" \/><\/a><\/li>\n<\/ul>\n<\/li>\n<li><strong>Edit<\/strong>: You can edit a message.<\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h3><span class=\"ez-toc-section\" id=\"Comments\">Comments<\/span><\/h3>\n<p>Comments are a very useful collaborative tool. Storyboard allows users to add comments to any component of the scene like user messages, bot messages, and notes. You can also reply to an existing comment thus maintaining a comments thread.<\/p>\n<p>You can access comments using the comment icon next to the corresponding message\/note. You can access the full comment history using the comments icon at the scene level.<\/p>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_comments.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_comments.png\" alt=\"\" width=\"969\" height=\"767\" \/><\/a><\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h3><span class=\"ez-toc-section\" id=\"Scene_Options\">Scene Options<\/span><\/h3>\n<p>From the Scene page, you can perform the following actions:<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_options-1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_options-1.png\" alt=\"\" width=\"457\" height=\"317\" \/><\/a><\/p>\n<ul>\n<li><strong>Preview<\/strong>: It is used to see how the conversation flows on your website. This opens in a mock website with the chat window. You can <strong>Play\/Pause<\/strong>, <strong>Restart<\/strong>, <strong>Customize,<\/strong> and <strong>Exit<\/strong> the preview. (<a href=\"#customize\">See here for customizing options<\/a>)<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/18\/storyboard_scene_preview.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22801\" src=\"\/wp-content\/uploads\/sites\/18\/storyboard_scene_preview.png\" alt=\"\" width=\"1366\" height=\"768\" \/><\/a><\/li>\n<li><strong>Share<\/strong>: This option gives you a URL that you can share with others. This URL presents the scene preview and you can let the various stakeholders a glimpse of what to expect and take their feedback. You can secure the scene preview URL with a password.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/18\/storyboard_scene_share.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22803\" src=\"\/wp-content\/uploads\/sites\/18\/storyboard_scene_share.png\" alt=\"\" width=\"500\" height=\"318\" \/><\/a><br \/>\nThe Share link allows the viewer to add comments that are communicated back to the developer for further action.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/18\/storyboard_scene_sharecomments.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22813\" src=\"\/wp-content\/uploads\/sites\/18\/storyboard_scene_sharecomments.png\" alt=\"\" width=\"1366\" height=\"768\" \/><\/a><\/li>\n<li>Click the <strong>More<\/strong> icon to perform the below-listed actions. Most of these actions are available on the Storyboard page also.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_options-1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_options-1.png\" alt=\"\" width=\"457\" height=\"317\" \/><\/a><\/p>\n<ul>\n<li><strong>Edit<\/strong>: Edit the name, description, and status of the scene.<\/li>\n<li><strong>Clone<\/strong>: Clone the scene to create a copy.<\/li>\n<li><strong>Export<\/strong>: Export the scene into CSV format.<\/li>\n<li><strong>Import<\/strong>: Import an existing scene in CSV format. Import fails if the import scene has linked scenes which are not present in the current bot.<\/li>\n<li><strong>Delete<\/strong>: Delete the scene. Unlink all linked scenes before deleting it.<\/li>\n<li><strong>Version History<\/strong>\n<ul>\n<li>A list of recent 20 changes made to a scene.<\/li>\n<li>Version is automatically created whenever the following changes are made:\n<ul>\n<li>Message Added<\/li>\n<li>Message Edited (included edits to templates)<\/li>\n<li>Message Removed<\/li>\n<li>Message Reordered<\/li>\n<li>Scene Restored<\/li>\n<li>Note Added<\/li>\n<li>Note Modified<\/li>\n<li>Note Removed<\/li>\n<li>Linked to a Message<\/li>\n<li>Linked to a Scene<\/li>\n<\/ul>\n<\/li>\n<li>An option to restore to any of those versions.<\/li>\n<li>You can also download a particular version in CSV format.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h4 id=\"customize\">Preview Customization<\/h4>\n<p>The customize option from the scene preview allows you to view the conversation in the widget view. By default, the platform provides two themes:<\/p>\n<ul>\n<li>Light<\/li>\n<li>Dark<\/li>\n<\/ul>\n<p>These themes set the light or dark background for the widget and the text accordingly.<\/p>\n<p>You can create your own theme, save it, and use it across the scenes in your storyboard. There are four aspects of the conversation widget that you can customize:<\/p>\n<ul>\n<li>Background Image<\/li>\n<li>Overall Chat Widget<\/li>\n<li>User Message Bubbles &#8211; text and background colors.<\/li>\n<li>Bot Message Bubbles &#8211; text and background colors for various components.<\/li>\n<\/ul>\n<h5>Background Image<\/h5>\n<p>The background image that is displayed on the mock website where the conversation widget is previewed can be customized. You need to provide a valid URL with the location of the image.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_previewcustom_image.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_previewcustom_image.png\" alt=\"\" width=\"1361\" height=\"349\" \/><\/a><\/p>\n<h5>Chat Widget<\/h5>\n<p>This option will let you customize the entire chat widget. This includes:<\/p>\n<ul>\n<li>Widget background-color<\/li>\n<li>Widget text color<\/li>\n<li>Widget border-color<\/li>\n<li>Widget divider color<\/li>\n<\/ul>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_previewcustom_chat.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_previewcustom_chat.png\" alt=\"\" width=\"1366\" height=\"768\" \/><\/a><\/p>\n<h5>User Message<\/h5>\n<p>This option is used to customize the color of the user message bubble and text.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_previewcustom_user.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_previewcustom_user.png\" alt=\"\" width=\"1307\" height=\"495\" \/><\/a><\/p>\n<h5>Bot Message<\/h5>\n<p>This option is used to customize the color of the bot message bubble and text. You can also customize the button template messages if any are used.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_previewcustom_bot.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/s3-us-east-2.amazonaws.com\/kore-wordpress\/developer.kore.ai\/v8-1\/wp-content\/uploads\/sites\/18\/20201124101615\/storyboard_scene_previewcustom_bot.png\" alt=\"\" width=\"1303\" height=\"559\" \/><\/a><\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h3><span class=\"ez-toc-section\" id=\"Bot_Messages_Templates\">Bot Messages Templates<\/span><\/h3>\n<table>\n<tbody>\n<tr>\n<td style=\"text-align: center\"><strong>Template Type<\/strong><\/td>\n<td style=\"text-align: center\"><strong>Template Definition<\/strong><\/td>\n<td style=\"text-align: center\"><strong>Comments<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Carousel<\/td>\n<td>\n<ul>\n<li>Carousels<\/li>\n<\/ul>\n<p>For each Carousel:<\/p>\n<ul>\n<li>Image<\/li>\n<li>Header<\/li>\n<li>Description<\/li>\n<li>Buttons<\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li>Maximum of five carousels per template.<\/li>\n<li>Maximum of three buttons per carousel.<\/li>\n<li>The image denotes the URL where the image is hosted.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td>Buttons<\/td>\n<td>\n<ul>\n<li>Message<\/li>\n<li>Buttons<\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li>Maximum of three buttons.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td>List<\/td>\n<td>\n<ul>\n<li>List Items<\/li>\n<li>An optional Primary button<\/li>\n<\/ul>\n<p>For each List Item:<\/p>\n<ul>\n<li>Header<\/li>\n<li>Description<\/li>\n<li>Image<\/li>\n<li>Button<\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li>Maximum of four list items per template.<\/li>\n<li>One button per list item.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td>Quick Reply<\/td>\n<td>\n<ul>\n<li>Text<\/li>\n<li>Buttons<\/li>\n<li>Button Images<\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li>Maximum of 10 buttons.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td>Attachment<\/td>\n<td>\n<ul>\n<li>Attachment URL<\/li>\n<li>Text<\/li>\n<\/ul>\n<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Image<\/td>\n<td>\n<ul>\n<li>Image Template URL<\/li>\n<li>Image Title &#8211; optional<\/li>\n<\/ul>\n<\/td>\n<td><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h2><span class=\"ez-toc-section\" id=\"Flow_View\">Flow View<\/span><\/h2>\n<p>After you design, switch to the <strong>Flow<\/strong> <strong>View<\/strong> to see the scene in a flowchart.<\/p>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/18\/storyboard_scene_flow.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22786\" src=\"\/wp-content\/uploads\/sites\/18\/storyboard_scene_flow.png\" alt=\"\" width=\"1366\" height=\"768\" \/><\/a><\/p>\n<p>All the <a href=\"#Scene_Options\">Scene Options<\/a> mentioned in the previous section are available with the following exceptions:<\/p>\n<ul>\n<li>You cannot import a scene from the flow.<\/li>\n<li>Export results in a PDF document.<\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"Visualizing how end-users are expected to interact with the bots is a very essential exercise in building successful bots. This helps you design engaging conversations as well as simplifies the communication between business users, conversation designers, language experts, and bot developers.Designing chatbots comes with different challenges as compared to the development of traditional websites or...","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[66],"tags":[],"class_list":["post-23144","post","type-post","status-publish","format-standard","hentry","category-bot-creation"],"_links":{"self":[{"href":"https:\/\/developer.kore.ai\/v8-1\/wp-json\/wp\/v2\/posts\/23144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.kore.ai\/v8-1\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/developer.kore.ai\/v8-1\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v8-1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v8-1\/wp-json\/wp\/v2\/comments?post=23144"}],"version-history":[{"count":11,"href":"https:\/\/developer.kore.ai\/v8-1\/wp-json\/wp\/v2\/posts\/23144\/revisions"}],"predecessor-version":[{"id":29819,"href":"https:\/\/developer.kore.ai\/v8-1\/wp-json\/wp\/v2\/posts\/23144\/revisions\/29819"}],"wp:attachment":[{"href":"https:\/\/developer.kore.ai\/v8-1\/wp-json\/wp\/v2\/media?parent=23144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developer.kore.ai\/v8-1\/wp-json\/wp\/v2\/categories?post=23144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developer.kore.ai\/v8-1\/wp-json\/wp\/v2\/tags?post=23144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}