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;