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

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:

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

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:

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:

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:

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

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:

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

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

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

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:

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., [email protected].

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

Intent intent = new Intent(MainActivity.this, co.quickwork.chat.MainActivity.class);
intent.putExtra("botId", "c***************r34g");
intent.putExtra("name", "John Doe");
intent.putExtra("email", "[email protected]");
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.