{"id":23374,"date":"2020-04-04T04:32:28","date_gmt":"2020-04-04T03:32:28","guid":{"rendered":"https:\/\/developer.kore.ai\/v10-1\/?p=23374"},"modified":"2022-09-29T11:38:33","modified_gmt":"2022-09-29T10:38:33","slug":"digital-views","status":"publish","type":"post","link":"https:\/\/developer.kore.ai\/v10-1\/docs\/bots\/bot-builder-tool\/digital-views\/","title":{"rendered":"Digital Views"},"content":{"rendered":"
\r\n\t
\r\n\t\t
\r\n\t\t\t

Interactions with Virtual Assistants are typically conducted using chat\/messaging tools, voice channels, or other types of assistants. In the majority of the cases, the Virtual Assistants respond to the user queries only when the users have requested some information. This works well for conducting on-demand tasks that need user input for execution and the result is usually a short response, confirmation, or acknowledgment. But the need for more proactive user updates and less user input through an engaging interface has become a key requirement. <\/span><\/p>\n

Using <\/span>Digital Views<\/strong> from the Kore.ai XO Platform, you can design and launch rich visual experiences through interactive components, panels, and widgets, to proactively present relevant information to your users or customers. <\/span>Panels<\/strong> are the placeholders that hold one or more widgets. <\/span>Widgets<\/strong> are individual components that display information to the end-users. Your users or customers can interact with your VA either in conversation mode or directly get the required information from the widgets.<\/span><\/p>\n

This article provides an overview of the working and implementation of <\/span>Panels & Widgets<\/strong>. For step-by-step usage instructions, <\/span>refer to this article<\/span><\/a>.<\/span><\/p>\n

<\/div><\/div>\n

How It Works <\/span><\/span><\/h1>\n
    \n
  1. Using Digital Views, an organization offers to its VA end-users a single interface for various activities.<\/span><\/li>\n
  2. Multiple panels constitute a Digital View.<\/span><\/li>\n
  3. Each of the panels gives access to various functions.<\/span><\/li>\n
  4. The end-user accesses these panels for information pertaining to each of the functions and performs follow-up actions.<\/span><\/li>\n
  5. As an example, a Panel within a travel VA  could have multiple widgets showing:<\/span><\/li>\n
      \n
    1. Upcoming Trips,<\/span><\/li>\n
    2. Completed Bookings,<\/span><\/li>\n
    3. Canceled Bookings. <\/span><\/li>\n<\/ol>\n<\/ol>\n

      \"\"<\/a><\/span><\/p>\n

      <\/div><\/div>\n

      You can access Digital Views by selecting the VA you want to work with then going to <\/span>Build > Digital Skills > Digital Views<\/strong>. <\/span><\/p>\n

      <\/div><\/div>\n

      How to use Digital Views?<\/span><\/span><\/h1>\n

      You can enable Digital Views for your Virtual Assistant by designing the required widgets, adding them to the relevant panels and publishing them on the WidgetSDK channel.<\/span><\/p>\n

      Here are the steps we recommend for efficient design of Digital Views: <\/span><\/p>\n

        \n
      1. Set up<\/strong>: Panels are containers to host one or more widgets. You may create multiple panels and each panel can host widgets that present relevant information. Widgets are the interactive components that can contain information to be presented to the end-users and allow them to perform actions and follow-ups.<\/span><\/li>\n
      2. Configure<\/strong>: Define widgets by connecting them either to your tasks or by directly defining the widget. If you have connected your widget to a Dialog Task, make sure to use a Message node to present the required information in the widget using any of the supported widget templates.<\/span><\/li>\n
      3. Preview & Publish<\/strong>: Preview your widgets from the XO Platform to review the visual representation of the information. Enable the WidgetSDK channel and publish your panels and widgets to make them available for your end-users.<\/span><\/li>\n
      4. Host with Kore.ai SDK \/ Host Independently<\/strong>: You can choose to host your widgets independently or co-host them along with the WebSDK. You can download the SDKs from the <\/span>Kore.ai GitHub page<\/span><\/a>.<\/span><\/li>\n<\/ol>\n
        <\/div><\/div>\n

        General Setup<\/span><\/span><\/h1>\n

        Here is the general setup process to follow when you want to configure Panels and Widgets for Digital Views: <\/span><\/p>\n

          \n
        1. Configure Widgets<\/strong>: Define widgets by connecting them either to your tasks or any other source like JavaScript generating JSON file. In cases where you are using a task as a source, ensure that the message is formatted properly for the Widget SDK channel.<\/span><\/li>\n
        2. Preview the Widgets<\/strong>: Preview your widgets from the XO Platform.<\/span><\/li>\n
        3. Set up Panels<\/strong>: You may create multiple panels and each panel can host widgets that present relevant information. You can use the predefined widgets or create new ones.<\/span><\/li>\n
        4. Test the Panels<\/strong> to see how the Panels and Widgets are rendered in the chat window.<\/span><\/li>\n
        5. Publish the VA<\/strong>: Publish the VAso that the panels and widgets are made available for your end-users.<\/span><\/li>\n
        6. Host the Panel<\/strong>: You can choose to host your widgets independently or co-host them along with the web SDK. You can download the SDKs from the Kore.ai GitHub page. Do ensure to enable WidgetSDK as a channel.<\/span><\/li>\n<\/ol>\n
          <\/div><\/div>\n

          Configure Widgets<\/span><\/span><\/h1>\n

          Widgets are individual components that can communicate with the VA for presenting information to the end-users. The source of information for widgets is from a Dialog Task or a JSON using any of the predefined widget templates.<\/span><\/p>\n

          To configure widgets, follow the below steps:<\/span><\/p>\n

            \n
          1. Click <\/span>Create Widget<\/strong> to create a widget.
            \"\"<\/a><\/span>
            <\/span><\/li>\n
          2. The New Widget dialog opens.
            \"\"<\/a> <\/span>
            <\/span><\/li>\n
          3. On the <\/span>New Widget<\/strong> window, enter the following details:<\/span><\/li>\n
              \n
            1. Name<\/strong> of the widget<\/span><\/li>\n
            2. Display Name<\/strong> for the widget<\/span><\/li>\n
            3. Auto Refresh<\/strong> to set the frequency with which this widget needs a poll for fresh data. The refresh is applicable only when the panel containing the widget is active.<\/span><\/li>\n
            4. Source<\/strong> for a widget can be set either from the execution of Dialog Task, from JavaScript by defining a JSON, or by linking an existing Digital Form.<\/span><\/li>\n<\/ol>\n
            5. Save<\/strong> the Widget when ready.<\/span><\/li>\n<\/ol>\n
              <\/div><\/div>\n

              Configure Widget Sources<\/span><\/span><\/h2>\n
              <\/div><\/div>\n

              Dialog Task<\/span><\/span><\/h3>\n

              The <\/span>Dialog Task<\/strong> option allows you to trigger a task and present the output in the widget.<\/span><\/p>\n

              The <\/span>Select Dialog Task<\/strong> drop-down will list all available tasks in the current VA. Select the task you want to trigger using this widget.<\/span>
              <\/span>Note<\/strong>: In the connected Dialog Task make sure to use a Message node to present the required information in the widget using any of the supported widget templates.<\/span><\/p>\n

              You can use the icon next to the Dialog Task to open the Dialog Task for checking the task details like entity names etc.<\/span><\/p>\n

              Any entities used by the selected Dialog Task need to be pre-populated with values by mapping <\/span>Entity Name<\/strong> with <\/span>Entity Values<\/strong>.<\/span><\/p>\n

              If the selected Dialog Task has any <\/span>Authorization Profile <\/strong>defined, it is displayed here.<\/span><\/p>\n

              \"\"<\/a><\/span><\/p>\n

              JSON<\/span><\/span><\/h3>\n

              When selecting JSON as a source, you will be presented with a Javascript editor, where you can add your code.<\/span><\/p>\n

              \"\"<\/a><\/span><\/p>\n

              Digital Form<\/span><\/span><\/h3>\n

              When selecting <\/span>Digital Form<\/strong> as a widget source, you will have the option to select the Digital Form, as well as the Dialog Task to trigger upon submission. <\/span><\/p>\n

              Note <\/em><\/strong>that a Digital Form can be used to define multiple Widgets and can also be added to multiple Panels. However, it will be associated with the same Dialog Task across all Widgets and Panels.<\/span><\/em><\/p>\n

              \"\"<\/a><\/span><\/em><\/p>\n

              <\/div><\/div>\n

              Edit, Run & Preview a Widget<\/span><\/span><\/h2>\n

              After you save, the widget will be <\/span>In Development <\/strong>state. You can <\/span>Edit<\/strong> or <\/span>Delete<\/strong> the widget.<\/span><\/p>\n

              \"\"<\/a><\/span><\/p>\n

              When you<\/span> Edit<\/strong> widget, apart from being able to modify any of the above fields, you will have the option to <\/span>Run & Preview<\/strong> the widget. You can save the preview as the thumbnail display for the widget.<\/span><\/p>\n

              \"\"<\/a><\/span><\/p>\n

              <\/div><\/div>\n

              Configure Panels<\/span><\/span><\/h1>\n
              <\/div><\/div>\n

              Create a Panel<\/span><\/span><\/h2>\n

              Panel refers to containers that hold one or more widgets. You can add an existing widget to the panel or create new widgets within it.<\/span><\/p>\n

                \n
              1. Click <\/span>Create Panel<\/strong> to create a panel.<\/span>
                <\/span><\/li>\n
              2. On the <\/span>New Panel<\/strong> window, enter the following details:<\/span>\n
                  \n
                1. Name<\/strong> of the Panel.<\/span><\/li>\n
                2. Display Name<\/strong> for the Panel.<\/span><\/li>\n
                3. Panel Icon<\/strong> to display in the chat window (URL to the location).<\/span><\/li>\n
                4. Save<\/strong> the Panel.
                  \"\"<\/a>
                  <\/span><\/li>\n<\/ol>\n<\/li>\n
                5. After you save, the panel will be <\/span>In Development <\/strong>and will be displayed on your Digital Views screen. <\/span><\/li>\n<\/ol>\n
                  <\/div><\/div>\n

                  Add Widgets<\/span><\/span><\/h2>\n
                    \n
                  1. Click <\/span>Add Widget<\/strong> to add widgets to the panel.
                    \"\"<\/a> <\/span>
                    <\/span><\/li>\n
                  2. Select widgets from the drop-down list and click <\/span>Add<\/strong>..You can add multiple widgets to the same panel.
                    \"\"<\/a>
                    <\/span><\/li>\n<\/ol>\n
                    <\/div><\/div>\n

                    Panel Options<\/span><\/span><\/h2>\n

                    You have the following options for a given panel:<\/span><\/p>\n

                      \n
                    1. Edit<\/strong> the panel details;<\/span><\/li>\n
                    2. Add Form <\/strong>to add existing forms to the Panel. Once added, forms will behave as a widget with the sourse set to Digital Form;<\/span><\/li>\n
                    3. Add Widget<\/strong> to add existing widgets;<\/span><\/li>\n
                    4. Panel Management<\/strong> to add existing forms\/widgets, or remove already added forms\/widgets from the panel.<\/span><\/li>\n
                    5. Test<\/strong> the individual panel – this opens the <\/span>Talk to Bot<\/em><\/strong> window along with the panel listing with the current panel active and data presented. You can interact with the VA and test the panel.<\/span><\/li>\n
                    6. Delete<\/strong> the Panel.<\/span>
                      <\/span><\/li>\n<\/ol>\n

                      \"\"<\/a><\/span><\/p>\n

                      <\/div><\/div>\n

                      Publish<\/span><\/span><\/h1>\n

                      When you publish your Virtual Assistant,  please ensure that the panels and widgets you want to include are selected.<\/span><\/p>\n

                      Refer here for details on Publishing a <\/span><\/a>Virtual Assistant.<\/span><\/p>\n

                      \"\"<\/a><\/span><\/p>\n

                      <\/div><\/div>\n

                      Host<\/span><\/span><\/h1>\n

                      The Kore.ai XO Platform provides the Widget SDK, which you can use for hosting and managing panels and widgets. You can choose to host your widgets independently or co-host them along with the WebSDK. You can download the SDKs from the Kore.ai GitHub page. Do ensure to enable WidgetSDK as a channel. <\/span>Refer to this tutorial on how to do so<\/span><\/a>.<\/span><\/p>\n

                      <\/div><\/div><\/span><\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n
                      <\/div><\/div>[vc_raw_html]JTNDZGl2JTIwY2xhc3MlM0QlMjJ3LXBvc3QtZWxtJTIwcG9zdF9uYXZpZ2F0aW9uJTIwbGF5b3V0X3NpbXBsZSUyMGludl9mYWxzZSUyMiUzRSUwQSUzQ2ElMjBjbGFzcyUzRCUyMnBvc3RfbmF2aWdhdGlvbi1pdGVtJTIwb3JkZXJfZmlyc3QlMjB0b19wcmV2JTIyJTIwaHJlZiUzRCUyMiUyRmRvY3MlMkZib3RzJTJGYm90LWJ1aWxkZXItdG9vbCUyRmRpZ2l0YWwtZm9ybXMlMkYlMjIlM0UlM0MlMkZwJTNFJTBBJTNDZGl2JTIwY2xhc3MlM0QlMjJwb3N0X25hdmlnYXRpb24taXRlbS1hcnJvdyUyMiUzRSUzQyUyRmRpdiUzRSUwQSUzQ2RpdiUyMGNsYXNzJTNEJTIycG9zdF9uYXZpZ2F0aW9uLWl0ZW0tbWV0YSUyMiUzRVByZXZpb3VzJTIwUG9zdCUzQyUyRmRpdiUzRSUwQSUzQ2RpdiUyMGNsYXNzJTNEJTIycG9zdF9uYXZpZ2F0aW9uLWl0ZW0tdGl0bGUlMjIlM0UlM0NzcGFuJTNFRGlnaXRhbCUyMEZvcm1zJTNDJTJGc3BhbiUzRSUzQyUyRmRpdiUzRSUwQSUzQ3AlM0UlM0MlMkZhJTNFJTNDYnIlMjAlMkYlM0UlMEElM0NhJTIwY2xhc3MlM0QlMjJwb3N0X25hdmlnYXRpb24taXRlbSUyMG9yZGVyX3NlY29uZCUyMHRvX25leHQlMjIlMjBocmVmJTNEJTIyJTJGZG9jcyUyRmJvdHMlMkZib3QtYnVpbGRlci10b29sJTJGa25vd2xlZGdlLXRhc2slMkZrbm93bGVkZ2Utb250b2xvZ3klMkYlMjIlM0UlM0MlMkZwJTNFJTBBJTNDZGl2JTIwY2xhc3MlM0QlMjJwb3N0X25hdmlnYXRpb24taXRlbS1hcnJvdyUyMiUzRSUzQyUyRmRpdiUzRSUwQSUzQ2RpdiUyMGNsYXNzJTNEJTIycG9zdF9uYXZpZ2F0aW9uLWl0ZW0tbWV0YSUyMiUzRU5leHQlMjBQb3N0JTNDJTJGZGl2JTNFJTBBJTNDZGl2JTIwY2xhc3MlM0QlMjJwb3N0X25hdmlnYXRpb24taXRlbS10aXRsZSUyMiUzRSUzQ3NwYW4lM0VLbm93bGVkZ2UlMjBHcmFwaCUzQyUyRnNwYW4lM0UlM0MlMkZkaXYlM0UlMEElM0NwJTNFJTNDJTJGYSUzRSUzQyUyRmRpdiUzRQ==[\/vc_raw_html]
                      <\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"Interactions with Virtual Assistants are typically conducted using chat\/messaging tools, voice channels, or other types of assistants. In the majority of the cases, the Virtual Assistants respond to the user queries only when the users have requested some information. This works well for conducting on-demand tasks that need user input for execution and the result...","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-23374","post","type-post","status-publish","format-standard","hentry","category-bot-builder-tool"],"_links":{"self":[{"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/posts\/23374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/comments?post=23374"}],"version-history":[{"count":12,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/posts\/23374\/revisions"}],"predecessor-version":[{"id":46254,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/posts\/23374\/revisions\/46254"}],"wp:attachment":[{"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/media?parent=23374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/categories?post=23374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/tags?post=23374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}