Add the assistant to your mobile app

Similar to adding the assistant to your website, you can add the assistant to your mobile app. This allows users of your app to seamlessly benefit from features such as self-service troubleshooting and live support without needing to switch to a separate web browser app.

Note that this does still require the user to have a working Internet connection.

Prepare code snippets

  1. Navigate to Settings by clicking the hamburger menu in the top left and selecting "Settings".
  2. Under "Assistant", select "Embed".
  3. If it isn't already selected, select the "Mobile" tab.

Embed screen

  1. If you want the embedded assistant to open a particular flow, select it from the "Select a flow to embed" dropdown menu.

This will generate code snippets that you can use for the following steps.

Set up the landing page

Your app must open a webview (an in-app web browser) and display a landing page which will include an embedded assistant. Mavenoid can create and host this page for you; please reach out to [email protected] to coordinate this if you are not already in touch with a Mavenoid representative.

We strongly recommend allowing Mavenoid to host the landing page for ease of setup and the ability to update your configuration without needing to push an update to your app.

If instead you need to self-host the landing page, you can use the HTML code in the "Create a landing page for the Mavenoid widget" section of the Embed page.

Landing page code snippet

For more information on customizing this code, see Assistant embed API.

Add the code to your app

Your app will need to contain code to open the webview to the landing page. The "Embed the following code in your app" section of the Embed page contains sample code you can use.

Sample app code

  1. Select the code sample that matches your app platform between iOS (Swift), Android (Kotlin), and Android (Java).
  2. Click "Copy code" to copy the selected sample.
  3. Paste the code into your app.
  4. The code includes the string <YOUR_LANDING_PAGE_URL>. Replace this with the URL to your landing page. (If Mavenoid is hosting your landing page, they will provide you with this URL.)
  5. Publish the code in your app and test it.

Optional: Customize the app code

If necessary, you can modify the app code as needed for your particular app. Note that the samples do a couple things for you that we recommend you leave intact.

Handling the close event

The app needs to be notified when the assistant is closed so that it can close the webview. Otherwise, when the user closes the assistant the webview will remain open on a blank page.

In the provided code snippets, the app closes the webview when the webview navigates to the special URL close:. This behavior is itself determined by the code snippet in the landing page; see Assistant embed API - onClose for details.

Handling links

By default, links clicked within a webview will open within the webview. In most cases this is not the desired behavior. In the provided code snippets, the webview is configured to instead open links in the mobile device's default web browser app.

Optional: Pass in data

If you need to pass data from the app into the embedded assistant, you can do so by using form data.

The simplest option is to add data to the URL accessed by the webview. For example, if you need to pass a country code into the assistant, you can do so by having the app navigate the webview to a URL like the following:

https://<YOUR_LANDING_PAGE_URL>?country=se

This data will then be available within the flow and conversation transcript within the special form data key $created-on-page-url.

Alternately, you can update the mavenoid.push call to include the initFormData parameter, as explained in Understand form data - JavaScript. Note that if Mavenoid is hosting your landing page (as recommended) you will have to coordinate this with Mavenoid.

Last updated on 11/16/2022
← Add the assistant to your websiteAdd the assistant to your emails →