Embedding Widget in Apps

Ready to use chat widgets for your Apps.

You can embed the out of the box widget that the platform can serve in a mobile or tablet apps too. This is done by calling the responsive widget URL served by the dhee.world domain in your web views.

E.g, embedding https://{your-bot-instance}.dhee.world in a web-view in your app will show a widget like this-

Change background

The background colour around your widget can be changed by adding a GET parameter named bgColor.

The bgColor parameter has to be set to the hex code of the colour you want (without prefixing with the # symbol"

E.g, https://mybot.dhee.world?bgColor=0d66d5

Show full-screen chat widgets

To remove the halo and the background from the default widget and display a fullscreen widget, you just need to add a GET parameter named fullscreen. The value of the parameter should always be set to true.

E.g, https://mybot.dhee.world?fullscreen=true

Launching Web-View with the logged in user details

Many times, you would want to launch a chatbot for engaging users who are already logged in to your App. In such cases you can let Dhee be aware that you are launching the bot for a given logged-in user. This is done by sending the user's details in a JSON string, after encrypting it using AES encryption. The encrypted payload should then be included in the dhee.world URL as a GET parameter "payload".

The flavour of AES we are using is AES-CBC, which requires the encrypting side to include an Initialisation Vector, which is a Byte array of size 16.

The JSON payload to be encrypted, should be of the format:

{
    userName:"loggedInUsersFullName",
    language:"loggedInUsersLanguagePreference",
    contactNumber:"loggedInUsersContactNumber",
    userInfoParam1:"Some information of use in Dialog automation, like app userId",
    userInfoParam2:"Some other information of user in dialog automation",
    userInforParamN:"yet another information"
}

Payload JSON Parameters

ParameterRemarks

userName

The full name of the logged in user.

language

The preferred language of the logged in user. This has to be a language that Dhee.AI supports

contactNumber

The mobile number of the logged in user. If not available please set is as "0000000000" (ten zeroes)

Additional custom parameters

Any additional parameters that you provide will be made available to your Dialog state machines as a slot with the same parameter name. Please make sure the parameter names are single words in camel case.

Request Headers

The GET request should have the following header:

key-vec:{Base64 encoded value of the byte array used as Init Vector}

As hinted above, the value of the header key-vec should be the base-64 encrypted form of your initialisation vector.

Encryption Key

The key used for AES encryption has to pre-configured in the Dhee developer platform in the Agent Settings/Advanced Settings Page, as the WEB_VIEW_KEY parameter

As you can see from the screenshot below, this parameter will be auto-generated for you if you edit and save this field in the Advanced Setting page.

Example request

GET /?payload=JxOQINPDFhJs2Ozwd7X97m6SOCKSn7k2M8N90iD9gs1+Tnffp9JMgQC6NN4dKyXqJwMcnu32IpWvrkT3jLwI+g==&fullsreen=true HTTP/1.1
Host: mybot.dhee.world
key-vec: FQQWV9gToG3RMT+I0+bi0w==

PreviousDeployNextPlatform Reference

Last updated