# How to embed a web widget in an existing Android app using Conversation Management's SDK

Making changes in an existing system or integrating a new system with your existing one is a tedious task at times owing to the number of code changes you need. However, with Conversation Management, this is not the case. In a few easy steps, you can easily embed a chatbot in your existing android application without making any changes to your existing code.

## Introduction

Adding a chatbot to your application involves the following two steps:

1. Importing the SDK
2. Adding the code

SDKs are a generic software development kit that helps developers bring features created by others in the applications they are creating.

## Importing the SDK

To start importing the SDK, click [here](https://quickwork-chat-files.s3.amazonaws.com/android-sdk/quickworkchat_android_sdk_v1.aar) to download the `.aar` file in to your system. Now, open the **File** menu option in the toolbar and click on the **Project Structure** option. You can also open the **Project Structure** window directly by the hitting the keyboard shortcut **Ctrl+Alt+Shift+S** for a *Windows* machine or **Command + ;** for a *Mac*:

![Figure 1: Project structure](https://1811093075-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M34pLt4SmVLxK2J-oXh%2F-M34z49gZeCb15azczIz%2F-M3505X6iXVgQA_VtZgY%2Fimage.png?alt=media\&token=7c34300d-6e16-4a8a-b9f9-a8576c91e5d6)

The provided SDK has to be added as a module to your project to embed the chatbot in your app. To add this, open the **Modules** section from the navigation menu on the left. Now, click on the **+** icon in the **Modules** tab and select the type of module you want to add. The SDK provided to you is the `.aar` package. Select the respective option and click on **Next**:

![Figure 2: Select module type](https://1811093075-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M34pLt4SmVLxK2J-oXh%2F-M34z49gZeCb15azczIz%2F-M350AUZPIlhvK4oaOZJ%2Fimage.png?alt=media\&token=ef88e9c1-98ea-4f23-89be-248093c8bce7)

Now browse the location of the SDK sent to you. Select it from the folder where you have saved it. Once selected, click **Finish**:

![Figure 3: Create a module](https://1811093075-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M34pLt4SmVLxK2J-oXh%2F-M34z49gZeCb15azczIz%2F-M350Fqlrk5L0S8Sixd0%2Fimage.png?alt=media\&token=fa18fd53-41fb-4efd-975f-7641bbcb6ccf)

After clicking the **Finish** button, you'll return to the **Project Structure** window. Click on **Apply** to save all the changes done. The SDK has now been added to the project as a module. The SDK's name will also reflect under the **Modules** tab which denotes the modules present in the project:

![Figure 4: Apply module changes](https://1811093075-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M34pLt4SmVLxK2J-oXh%2F-M34z49gZeCb15azczIz%2F-M350YCUagAXJaZccy71%2Fimage.png?alt=media\&token=adfa3f68-3524-4729-a032-a34a02feb997)

The next step is to create a dependency for the module (SDK) added. To add a new dependency, switch to the **Dependencies** section from the navigation menu on the left. Now under the **Modules** tab, click on the application's module. A new section appears on the right which displays all the declared dependencies. Click on the **+** icon indicated below to declare a new dependency. Now, select the **Module Dependency** option from the drop-down since the dependency being added is a module:&#x20;

![Figure 4: Select Dependency type](https://1811093075-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M34pLt4SmVLxK2J-oXh%2F-M34z49gZeCb15azczIz%2F-M350d5kgvPfK0DHLqHf%2Fimage.png?alt=media\&token=b3763099-4bcb-426a-9524-a2b202b713a3)

A new dialog box will open showing all the modules present in the project. Click on the checkbox beside the SDK's module and then click on **OK**:

![Figure 5: Add Dependency](https://1811093075-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M34pLt4SmVLxK2J-oXh%2F-M34z49gZeCb15azczIz%2F-M350iM9mLKvZVqB9GPz%2Fimage.png?alt=media\&token=2f26b192-3df1-4f51-8062-f3b2ebfa45b0)

Once you click on **OK**, the **Project Structure** dialog box will reappear. Click the **Apply** button to save all the changes done. Click on **OK** to finish this procedure and perform a [gradle sync](https://docs.gradle.org/current/userguide/what_is_gradle.html) in your project.

The SDK has now been successfully imported into the existing project and will be used to embed a chatbot within.

## Adding the code

After importing the SDK, you just need to add a few lines of code to make your app chatbot ready.

To start with, open the app-level `build.gradle` file present under the gradle scripts and add the following dependencies:

```java
implementation 'com.google.android.gms:play-services-location:17.0.0'
implementation 'com.google.android.gms:play-services-maps:17.0.0'
implementation('com.squareup.okhttp3:okhttp:4.4.0')
```

Now, open the AndroidManifest.xml file and add the following permissions:

```java
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.INTERNET" />
```

The above permissions are needed to access the location when using the location feature and also to access the internet to send and receive messages while using Conversation Management of course.

Now, in the same file, we’ll be adding the following code to add the google maps API key:

```java
<meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="YOUR_API_KEY_WILL_COME_HERE" />
```

{% hint style="info" %}
This is an optional feature. If you don’t need the google maps UI while fetching the location or if you won’t be using the location feature at all, you can completely skip this step.)
{% endhint %}

Now lastly, you’ll add the code given below on the listener of the button via which you want to open the bot:

```java
Intent intent = new Intent(MainActivity.this, co.quickwork.chat.MainActivity.class);
intent.putExtra("botId", "ADD_YOUR_WEBSITE_TOKEN_HERE");
startActivity(intent);
```

You will be provided with a bot ID if you are using only the android SDK or you can simply copy the website token present in your web script. The bot ID/website token is universal and does not differ depending on the channel being used:

![Figure 6: The website token](https://1811093075-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M34pLt4SmVLxK2J-oXh%2F-M34z49gZeCb15azczIz%2F-M350smyHYLhRrXgohq1%2Fimage.png?alt=media\&token=df7c5a30-fd39-44e8-944d-badb0a2d3327)

The project is now ready to run. Run the project and check the output on the emulator. After checking the output, an `.apk` can be built and an update can be released on your app distribution channel for all the users.

### Passing custom payload

To use these, go to the Inboxes window where the script for your inbox is generated. Scroll down and copy the messenger script that has custom payloads with keywords such as `name`, `email`, `created_at`, and `custom_payload` under the `settings` object:

* `name`: The genuine name of the user you want to get reflected in the support panel. E.g., John Doe.
* `email`: The genuine email address of the user. E.g., <johndoe@gmail.com>.
* `created_at`: The accurate timestamp of the conversation being created. E.g., Mon March 23 2020 17:01:15 GMT+0530.
* `custom_payload`: An object of payloads that you want to pass. It could be an information related to sign up, login details or could contain a set of login credentials of a user.

Now, add the code given below on the listener of the button via which you want to open the bot:&#x20;

```java
Intent intent = new Intent(MainActivity.this, co.quickwork.chat.MainActivity.class);
intent.putExtra("botId", "c***************r34g");
intent.putExtra("name", "John Doe");
intent.putExtra("email", "johndoe@gmail.com");
intent.putExtra("created_at", "Mon Mar 23 2020 17:01:15");
intent.putExtra("custom_payload", "custom_payload");
startActivity(intent);
```

This is an add-on feature that Conversation Management has adopted to smoothen your conversations.&#x20;
