Getting started with widget sdk (v7.2 onwards)

sdk
widgets
panel
digital-views
websdk

(Swagat) #1

Hello Developers,

Lately Kore’s web-sdk underwent major changes post the 7.2 release. It is due to the introduction of “Digital Views” (Widgets and Panels).
image
This article is for the users who are finding it difficult to get started with this SDK. This is an end to end example of how to set up Widget-SDK (master branch in web-sdk).

Disclaimer:

Our web-SDK has branches w.r.t all major previous versions. The previous functionality (web-sdk without widgets) still works fine with 7.1.0 branch. Select the right branch for matching your version of Kore platform - on-premise users may be using older version.
image

Let us start step by step.

  1. Why Widget-SDK?
    The main difference between normal web and widget SDK is that widget is for proactively showing some information to the user while web-sdk is just a channel for communicating with bot (reactive in nature). Follow our documentation link more for details.

  2. Idea of widget-SDK in a nutshell
    Say you have a dialog task which when invoked just produces some result without any further interaction in between. Those are something which can be shown proactively to the bot-user. Digital Views / Widgets and Panels can be used for directly querying a service without calling and dialog tasks also. But for this example, we will take 2 dialog tasks which do not interact with the user and simply return some message or information in a template when invoked.
    image

  3. Creating the dialog tasks
    Let us now create 2 dialog tasks which we will use in 2 type of widgets. 1 additional dialog task will be to demonstrate how to deal with click actions from a widget. Let one dialog task be for leave balance summary and another is for credit account summary statement. We will be hiding these two (completely optional) so that we do not see them in help menu.
    image|300x7`1

  • Leave balance task:
    There is a response for all channel. There is another response specific to widget channel.
    image
    Select channel as Widget SDK and a template. In this case, pie chart was used. Refer to pie chart under documentation. I have just modified the same to my needs. In real-time, there would be a script node and service node before the message node to massage the data received from a service/ API and present it in prescribed template.
    Note - You may select a template from the drop down also.
    image

  • “show detailed leave report” task
    In case the user feels leave summary widget does not give adequate information, there will be a button to click for viewing detailed leave report. The above widget is configured to throw a payload “detailed leave report” to the bot in that case. The idea is that the bot will hit some service and produce a downloadable link to the detailed leave report. Hence a different task is created with the right training. This is just for example and details are not implemented.
    image

  • Account summary task
    In this case, list template was used. Refer to documentation.
    image

  1. Adding the tasks in Digital View
    Widgets are to be created by selecting the dialog tasks. These widgets are to be added in the panel so that it can be displayed. Two widgets are shown added to the panel in below screenshot.
    image

  2. Test the bot and widget
    Under the panels, you will see a Test button. Click the same to test with widget on bot-builder.
    image
    image

  3. Configuring channels
    Since it is not necessary that all bots will have widgets/ digital view, it needs a different channel. Two channels need to be created - web/mobile client and widget-sdk channels. Normal bot communication will follow in web/ mobile client channel and widgets will use widget-sdk channel.
    image

  4. Publish the bot

  5. Download the SDKGitHub repository. It is the master branch. Unzip it in a suitable directory.
    image

  6. JWT Service
    The GitHub documentation clearly indicates JWT service as a pre-requisite. Developer is expected to set up own JWT service. However, if the developer does not have one handy please download SDKApp (a test app) which provides a local nodejs based JWT service. Refer the documentation.
    When you unzip the SDKApp, go to terminal/ command prompt and perform
    npm install
    After that start the app as
    node startServer.js
    In case you get CORS error refer to this post.
    You can refer to the app.js to figure out that your local JWT service will be running at
    http://localhost:3000/api/users/sts

  7. Configuring Widget SDK html
    Under UI directory we will use “index_widgets_chat.html”. For that to work, 2 files need to be modified (Recollect that we configured 2 channels for the widget. Hence we need 2 places where we need to configure)-

  • “kore-config.js” - Note how JWT URL is mentioned. User Identity can be any email or alphanumeric unique identifier. Bot name, bot id, client name and client secret need to be configured with web/mobile client channel app information.
    image

  • “kore-widgets-config.js” - You can mention same JWT URL. User Identity can be any email or alphanumeric unique identifier. It can be same as in above file. Bot name, bot id, client name and client secret need to be configured with widget sdk channel app information.
    image

  1. Open “index_widgets_chat.html” and test
    Open the above mentioned html file. Test the bot. You should be able to load the bot without any issues if all the steps are carried out properly.
    You will need to click on the indicated icon to open the widget panel.
    image
    Click on view all leaves report… button on the pie chart panel. See that the payload is sent to the bot and bot answers based on the training of dialog tasks it has.
    image

Hope this is useful. Keep exploring more.
Go through the documentation on GitHub for more details and information.
image


jwtgrant 400 Error - SDKApp
Chat window cannot load stylesheet using web SDK demo
SDKApp error on running ate localhost
(Swagat) #2

Dear All,

Just to add to the above topic, to avoid some security issues, our UI team advises that the web-sdk is used from within the SDK App (refer to step 9).

The above post also works fine if you use SDKApp as ONLY jet generator and serve the index page from a server of your choice. This is just a suggestion that web-sdk contents are served from within SDKApp. This technique also helps you scale based on volume of incoming traffic because you will not have to maintain a separate service and infrastructure for JWT.

Unzip the content of the web-sdk (Step 8) into “sdk” directory of SDKApp.
image

Now you can serve the any page (index*.html) from the local service.

http://localhost:3000/UI/index_widgets_chat.html

image

Just re-iterating, In case anyone gets CORS error, you will need to pass allow access control origin in JWT header. Line 32 is what you need to add in SDKApp.

21%20PM