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:
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>
.
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:
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:
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
: