Skip to main content

Embedding the Chatbot in Mobile Apps (Android/iOS)

The Thinkstack chatbot can be seamlessly integrated into your mobile applications to provide a smooth and interactive user experience. This guide explains the step-by-step process for embedding the chatbot in Android, iOS, and Flutter apps using a WebView.

Getting the Embed URL#

1) Log in to the Thinkstack Dashboard and select the chatbot you want to embed in your app.

2) Navigate to the Embed section in the dashboard.

3) Under the Android/iOS section, locate the provided chatbot URL. Navigate to the embed section

4) Copy the URL, which will look like this: https://app.thinkstack.ai/bot/index.html?chatbot_id=your_chatbot_id.

Embedding the Chatbot in Android#

To embed the chatbot in an Android app, you can use the WebView component. Follow these steps:

Prerequisites#

Ensure you have the INTERNET permission in your AndroidManifest.xml file: Set the Internet permission in the Android Manifest File

Code Example: Android App Code Example Note: Replace your_chatbot_id in the URL with the actual chatbot ID provided in the Thinkstack dashboard.

Layout File (activity_chatbot.xml) This is the Layout file for chatbot

Embedding the Chatbot in iOS#

For iOS apps, you can use the WKWebView component.

Prerequisites#

Add the following entry to your Info.plist file to allow loading the chatbot URL: Info.plist file

Code Example: Swift Code Example

Note: Make sure to replace your_chatbot_id with the chatbot ID from the Thinkstack dashboard.

Embedding the Chatbot in Flutter#

For Flutter apps, you can use the webview_flutter plugin.

Step 1: Add the Plugin
Add the webview_flutter dependency to your pubspec.yaml file, which adds the webview_flutter dependency to the project. This is required to use WebView in Flutter: Add the dependencies in the pubspec_yaml Run flutter pub get to install the dependency.

Step 2: Implement the WebView
Here’s an example of flutter code for embedding the chatbot: Flutter Code Example and the rendered chatbot

Note: Replace your_chatbot_id in the URL with the actual ID from the Thinkstack dashboard.

Testing the Integration#

Once you’ve implemented the WebView in your app:

↗️ Launch the app on a simulator or physical device.
↗️ Navigate to the screen containing the chatbot.
↗️ Verify that the chatbot loads successfully and allows user interaction.

Troubleshooting#

  1. WebView not loading: Check if the INTERNET permission is enabled (Android) or if App Transport Security (ATS) settings allow the URL (iOS).
  2. Chatbot not displaying properly: Ensure that the copied URL is correct and matches the format provided in the Thinkstack dashboard.

That's a wrap 🎉, you have successfully embedded the chatbot on your mobile application.