> For the complete documentation index, see [llms.txt](https://integrations.quack.ai/BKUZmzGN2Mmipf4UROTF/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://integrations.quack.ai/BKUZmzGN2Mmipf4UROTF/mobile/adding-quack-ai-to-your-react-native-app.md).
# 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`](https://github.com/react-native-webview/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
' }} 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
?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 (
' }}
style={styles.webView}
scrollEnabled={false}
/>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000',
},
bottomSheet: {
flex: 1,
marginTop: '20%',
},
webView: {
flex: 1,
borderTopLeftRadius: 8,
borderTopRightRadius: 8
}
});
export default App;
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://integrations.quack.ai/BKUZmzGN2Mmipf4UROTF/mobile/adding-quack-ai-to-your-react-native-app.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.