Adding Decagon to your React Native app

This is a simple guide to adding the Decagon Chatbot to your React Native app. We will be relying on the react-native-webview component, pointing it to the custom mobile URL associated with your company.

Step 1:

Make sure you have the react-native-webview package installed. You can install it by running:

npm install react-native-webview

Step 2:

If you already have a container in your app to house the chat interface, you can simply drop the Webview component where you want it. The mobile URI for your company is https://decagon.ai/mobile/<your company>.

import { WebView } from 'react-native-webview';

export default function Chatbot() {
  return (
    // You can drop this Webview wherever you want to put the Chatbot
    <WebView source={{ uri: 'https://decagon.ai/mobile/<your company>' }} style={{ flex: 1 }} />
  );
}

And that's it! You're done.

Step 3 (Optional):

To pass in user ID and metadata, you simple include them in your URL params. This metadata will be saved along with each conversation. User ID is what unique identifies a user and allows conversation history to be saved across sessions. For instance:

import { WebView } from 'react-native-webview';

export default function Chatbot() {
  return (
    // You can drop this Webview wherever you want to put the Chatbot
    <WebView 
      source={{ uri: 'https://decagon.ai/mobile/<your company>?userId=123&name=bob&type=9' }} 
      style={{ flex: 1 }} 
    />
  );
}

Step 4 (Optional):

If you want to enable authentication for your users, you may pass in your authentication signature and epoch via the HTTP Headers. Here's an example:

import { WebView } from 'react-native-webview';

export default function Chatbot() {
  return (
    // You can drop this Webview wherever you want to put the Chatbot
    <WebView 
      source={{ 
        uri: 'https://decagon.ai/mobile/<your company>?userId=123&name=bob&type=9',
        headers: {
          "X-DECAGON-AUTH-SIGNATURE": "<your_signature>",
          "X-DECAGON-AUTH-EPOCH": "<your_epoch>"
        }
      }} 
      style={{ flex: 1 }} 
    />
  );
}

See here for more info.

Full Example

If you don't yet have a place in your app to but the Chatbot (could be a bottom sheet sliding drawer, a separate page, etc), no problem! Here is a complete example of a bare-bones React Native App that relies on KeyboardAvoidingView to display the Chatbot.

Here is App.js:

import React from 'react';
import { StyleSheet, KeyboardAvoidingView, View } from 'react-native';
import { WebView } from 'react-native-webview';

const App = () => {
  return (
    <View style={styles.container}>
      <KeyboardAvoidingView behavior='height' style={styles.bottomSheet}>
        <WebView 
          source={{ uri: 'https://decagon.ai/mobile/<your company>' }}
          style={styles.webView}
          scrollEnabled={false}
        />
      </KeyboardAvoidingView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
  bottomSheet: {
    flex: 1,
    marginTop: '20%',
  },
  webView: {
    flex: 1,
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8
  }
});

export default App;