Adding Quack AI to your React Native app

This is a simple guide to adding the Quack AI 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://m.thequack.ai/sdk/<YOUR_TOKEN>.

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://m.thequack.ai/sdk/<YOUR_TOKEN>' }} 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://m.thequack.ai/sdk/<YOUR_TOKEN>?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://m.thequack.ai/sdk/<YOUR_TOKEN>' }}
          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;