Mobile App - Native

While we don't offer native mobile SDKs yet, you simply plug your chatbot to your existing mobile app.
Here is a quick tutorial to do so.

Decide where to host the chat widget

As Smartly.AI webchat is fully responsive, we can use it in a mobile app and have a good user experience.
First you will have to decide whether we want the webchat to be hosted in the bot platform or within your own website / domain
Below are some pros and cons to each solution.

Widget hostingProsCons
Option 1
Smartly.AI demo page
The simplest solution as the page is already hostedLess customizable
Option 2
Dedicated page in our website
More control, more security and more flexibility.--

Our recommandation is to use a dedicated page rater than the demo page for your mobile app needs.
Why? Principally because you will be able to safely send some user data from the mobile app to the bot . This data can be the user first name or a even an authentication token that can be used to personalize the user experience.

For Option 1, you can find the demo page link of your webchat as shown below 👇

1337

For Option 2 you can find the widget code as shown below 👇

1139

Set your widget to be opened

As we will have a natve button to deal with the state of the widget, we will set the widget to open by default

1143

Now each team someone arrives on your page, the chat will automatically be opened and start.

Add a chat button to your interface

The goal of this button will be to show the chat widget.
As you will see below, the chat should then be opened in a webview.
It is important to show/hide the same webview so that the conversation context can be kept.

886

Clicking the button will show a full screen webview

Implement the webview that will display the chat

Once clicked, we want the button to show a Webview linked to the url of the page hosting the widget.
Here is some useful links:

  • Android Webviews : Link
  • iOS Webviews : Link
769

Send some user data to your bot

If you have opted for Option 2, here is the steps to safely send some user data to the bot from the mobile app:

  • While opening the chat in the webview, you send some data to your page via POST
  • Collect this data from the page and populate the user_data object with the desired data
  • The chatbot can the use this data to greet the user by its name, make API calls to get dynamic calls and so on.

👍

Send at least the user name

This will allow you to get in touch with some users later, or just greet them by their name 🙂


What’s Next