React Native Package

Add the Asyntai AI chatbot to your React Native and Expo apps

Overview

React Native is the framework for mobile apps on Android and iOS, written in JavaScript and React. Expo builds on it. The Asyntai package react-native-asyntai-ai-chatbot adds a chat button to your app. One tap opens your AI chatbot on a full screen, inside the app.

The assistant answers your users from your own website and documents, in more than 80 languages, day and night.

Requirements

React Native 0.70 or later, or any current Expo SDK
react-native-webview 11 or later
Android or iOS for the in-app chat. On web, the chat opens in the browser
An Asyntai account on the Starter, Standard or Pro plan. The in-app chat is part of these plans

Installation

Follow these steps to add Asyntai to your app:

Get Your Widget ID

Sign in to Asyntai and open the Install page. The widget ID is the value of data-asyntai-id in the snippet shown there. It starts with asyntai_.

Add the Package

With Expo:

npx expo install react-native-asyntai-ai-chatbot react-native-webview

With React Native CLI:

npm install react-native-asyntai-ai-chatbot react-native-webview
cd ios && pod install

Add the Chat Button

Put the button last in any screen, so it floats above the other content:

import { View, Text } from 'react-native';
import { AsyntaiChatButton } from 'react-native-asyntai-ai-chatbot';

export default function HomeScreen() {
  return (
    <View style={{ flex: 1 }}>
      <Text>Hello</Text>
      <AsyntaiChatButton widgetId="asyntai_1a2b3c4d5e6f" title="Support" />
    </View>
  );
}

Run the App

Tap Chat with us. The chat opens on a full screen with a close button. The Android back button also closes it.

Other Ways to Show the Chat

Open the chat from your own button or menu item:

import { useState } from 'react';
import { AsyntaiChatModal } from 'react-native-asyntai-ai-chatbot';

const [open, setOpen] = useState(false);

<Button title="Help" onPress={() => setOpen(true)} />
<AsyntaiChatModal
  widgetId="asyntai_1a2b3c4d5e6f"
  visible={open}
  onClose={() => setOpen(false)}
/>

Put the chat inside your own layout, for example in a tab or a bottom sheet:

import { AsyntaiChatView } from 'react-native-asyntai-ai-chatbot';

<AsyntaiChatView widgetId="asyntai_1a2b3c4d5e6f" style={{ flex: 1 }} />

Open the chat in the browser of the phone:

import { openAsyntaiChatInBrowser } from 'react-native-asyntai-ai-chatbot';

await openAsyntaiChatInBrowser({ widgetId: 'asyntai_1a2b3c4d5e6f' });

Options

Option	Type	Default	What it does
`widgetId`	string	required	Your Asyntai widget ID
`title`	string	`'Chat'`	The title in the top bar of the full chat screen
`openLinksExternally`	boolean	`true`	Links in answers to other websites open in the phone browser, and the chat stays open
`label`	string	`'Chat with us'`	The text on the button
`showLabel`	boolean	`true`	Set it to `false` for a round button with only the icon
`backgroundColor`	string	`'#111111'`	The color of the button
`foregroundColor`	string	`'#ffffff'`	The color of the icon and the text
`floating`	boolean	`true`	The button floats in the bottom right corner. Set it to `false` to place it yourself

A wrong widget ID throws an error with a message that says how to fix it.

How It Works

The package shows your Asyntai chat in a web view inside the app. Links to other websites, email addresses and phone numbers open in the matching app on the phone, so the conversation is still there when the user comes back. When your app has react-native-safe-area-context, the full chat screen uses it to keep clear of the notch.

Answering From Your Content

Asyntai reads your published pages. Add your site URL in the dashboard, and the assistant answers from them. You can also add documents, and question and answer pairs.

Tip: Change the colours, the welcome message and the AI instructions in the Asyntai dashboard. The change shows in your app at once, with no app update.

Removing It

Run npm uninstall react-native-asyntai-ai-chatbot and delete the chat button from your code.

Plans & Pricing

The package is free. The in-app chat is part of the Starter, Standard and Pro plans. View pricing.

Need Help?

If you have any questions or run into issues, contact us at [email protected].

Documentation