@yourgpt/chatbot-reactnative

Integrate YourGPT Chatbot seamlessly into your react-native application.

Installation

1. Add @yourgpt/chatbot-reactnative to your dependencies

$ npm i @yourgpt/chatbot-reactnative

2. Add react-native-webview to your dependencies

Refer react-native-webview docs

3. Link native dependencies

iOS & macOS:

If using CocoaPods, in the ios/ or macos/ directory run:

$ pod install

Android:

No aditional configuration required.

Usage

You can get your widget_id from https://yourgpt.ai/chatbot

// In app.tsx
import React from 'react';
import {SafeAreaView, View} from 'react-native';
import YourGPTProvider from '@yourgpt/chatbot-reactnative';

function App(): JSX.Element {
  return (
    <SafeAreaView style={{flex: 1}}>
      <YourGPTProvider widgetId="Your_Widget_Id">
          // YOUR CODE HERE
      </YourGPTProvider>
    </SafeAreaView>
  );
}

export default App;

// In components/OpenBot.tsx
import React from 'react';
import {Button} from 'react-native';
import {useYourGPT} from '@yourgpt/chatbot-reactnative';

export default function OpenBot() {
  const {open} = useYourGPT();

  return <Button onPress={open} title="Open Bot" />;
}

API

Props

Props which will be passed in <YourGPTProvider>

Prop	Type	Required	Description
widgetId	String	Yes	Widget id of yourGPT chatbot
headerColor	String	No	Custom header color, by default transparent
children	ReactNode	Yes	React native elements which will be wrapped inside YourGPTProvider

Methods

All the methods which you can get from useYourGPT hook.

Method	Parameter	Description
open	void	Open chatbot widget inside a webview
close	void	Close chatbot widget