Comment on page
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. All URL params will get saved along with the conversation as metadata. 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 }} 
    />
  );
}
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;
Adding Decagon to your Swift app
Adding Decagon to Sunshine Conversations
Last modified 26d ago