# Embedding Widget in 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-

![](https://2566128011-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUn1oKrw7P8P5qiTjWXjv%2Fuploads%2FNDgRzASN7prHHqpUwRR9%2Fimage.png?alt=media\&token=4a40224a-cee4-496b-a0c2-38358a97e9a4)

#### 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:

```json
{
    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

| Parameter                    | Remarks                                                                                                                                                                                                                |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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](https://readme.dhee.ai/platform-overview/elements-and-configuration/agent-settings/basic/language#supported-languages) |
| 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.

![web-view payload encryption key](https://2566128011-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUn1oKrw7P8P5qiTjWXjv%2Fuploads%2FyfuGcwyISJqLx15yZ95P%2Fimage.png?alt=media\&token=413b7283-b004-4c79-8efa-d1f1a009d214)

#### Example request

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