# React Native

### What is Install Mobile App Chatbot (React Native)?

The **React Native Mobile App Chatbot installation** allows you to embed your BotPenguin chatbot directly inside a React Native application using the **WebView component**. This enables real-time, in-app conversational support while maintaining a native app experience across both Android and iOS platforms.

***

### Benefits of Install Mobile App Chatbot (React Native)

* ⚛️ One chatbot for both Android & iOS apps
* 🤖 Seamless in-app user support
* ⚡ Quick integration using React Native WebView
* 📱 Native UI experience with web-based chatbot
* 🛠️ Developer-friendly and flexible setup

***

### How to Use Install Mobile App Chatbot (React Native)

Follow the steps below to integrate the chatbot into your React Native application.

***

#### 1. Select React Native as Your Mobile Platform

* Click on Bots from left menu then Select the bot.

<figure><img src="https://1745791824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAPDb8cKQtGlIAfgHjcsQ%2Fuploads%2FZmLdcxPFEodJeMreFAKp%2Fimage.png?alt=media&#x26;token=8567c327-344f-495d-9263-8d311c493803" alt=""><figcaption></figcaption></figure>

* Now click on **“Install Your Chatbot.”**

<figure><img src="https://1745791824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAPDb8cKQtGlIAfgHjcsQ%2Fuploads%2FnySbpv3zBrItfl8rgo6L%2Fimage.png?alt=media&#x26;token=940db384-ae93-4dd1-9f6d-a82ab555c4e3" alt=""><figcaption></figcaption></figure>

* Select the **“Mobile App Chatbot”** tab.

<figure><img src="https://1745791824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAPDb8cKQtGlIAfgHjcsQ%2Fuploads%2FVHbmaFIDCqMPsocCXEdf%2Fimage.png?alt=media&#x26;token=415b1707-4072-42a9-985b-ef27ae703e1d" alt=""><figcaption></figcaption></figure>

* Select the React Native Platform.

<figure><img src="https://1745791824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAPDb8cKQtGlIAfgHjcsQ%2Fuploads%2F1PxcGXM9fKXJp49PVb6t%2Fimage.png?alt=media&#x26;token=eb7a2c36-eccf-43db-9392-d7fce6497778" alt=""><figcaption></figcaption></figure>

***

#### 2. Copy the React Native Installation Code

* Under **“Get Chatbot Installation Code”**, locate the React Native WebView snippet.
* Click **“Copy”** to copy the code.

> The snippet includes a WebView component with JavaScript enabled and your chatbot’s unique URL.

<figure><img src="https://1745791824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAPDb8cKQtGlIAfgHjcsQ%2Fuploads%2FFYovfiFYYhFBptPIs1ji%2Fimage.png?alt=media&#x26;token=20e43912-3ce5-4924-9e7e-88b79c3a7c8a" alt=""><figcaption></figcaption></figure>

***

#### 3. Add Code to Your React Native App

* Open your React Native project.
* Ensure `react-native-webview` is installed in your project.
* Paste the copied WebView code inside the screen or component where you want the chatbot to appear.

<figure><img src="https://1745791824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAPDb8cKQtGlIAfgHjcsQ%2Fuploads%2FMCErsnGt6zq9tqmWg0mC%2Fimage.png?alt=media&#x26;token=3bdb94d7-9098-42ee-a3bb-42a35d9db441" alt=""><figcaption></figcaption></figure>

***

#### 4. Share Installation Code with Your Developer (Optional)

* Enter your developer’s email address in the **“Share Installation Code”** section.
* Click **“Send Email”** to instantly share the chatbot installation snippet.

***

#### 5. Request BotPenguin Installation Support (Optional)

* Click **“Help me in Installing ChatBot”** to raise an installation request.
* The BotPenguin support team will assist with integration if needed.

***

Once completed, your chatbot will be live inside your React Native mobile application.

***

🎉 **Congratulations, you have successfully completed this section! You're one step closer to mastering BotPenguin.**

***

### FAQ's

Here are some common questions asked regarding training with FAQ's:

<details>

<summary>Do I need to install any additional library for React Native?</summary>

Yes, you need to install and use the `react-native-webview` package.

</details>

<details>

<summary>Will this chatbot work on both Android and iOS?</summary>

Yes, the React Native chatbot works seamlessly on both platforms.

</details>

<details>

<summary>Can I customize the chatbot UI inside React Native?</summary>

The chatbot UI is web-based, but you can control placement and container styling in your app.

</details>

<details>

<summary>Is JavaScript required for the chatbot?</summary>

Yes, JavaScript must be enabled in the WebView for the chatbot to function correctly.

</details>

<details>

<summary>Can I add the chatbot to multiple screens?</summary>

Yes, you can embed the chatbot WebView on multiple screens or components.

</details>

<details>

<summary>What if I don’t have a React Native developer?</summary>

You can click **“Help me in Installing ChatBot”** to get assistance from BotPenguin’s support team.

</details>

***

### Support

If you still have questions for our team, write to us at [**support@botpenguin.com**](mailto:support@botpenguin.com). We’ll get back to you within 48 hours.


---

# Agent Instructions: 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:

```
GET https://help.botpenguin.com/bots/website-mobile-app-bot/bot-setup-and-installation/install-your-chatbot/install-your-mobile-app-chatbot/react-native.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.