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