React Native App
Embedding the Web Chat in a React Native App
In this guide, you will learn how to integrate the Botpress chat widget into your React Native application. We will be using two primary components: BpWidget
and BpIncomingMessagesListener
.
Cloning the Repository
Clone the repository to your local machine:
git clone https://github.com/botpress/react-native-example.git
cd react-native-example
Installation
Before we get started, make sure to install the necessary dependencies:
npm i
Running the Application
To run your application in development mode:
npm run start
BpWidget
This component is responsible for rendering the Botpress chat widget in your application. It takes a botConfig
prop, which is an object containing the configuration for your bot. The botConfig
object should include the following properties:
botId
: The ID of your bot.hostUrl
: The URL where your bot is hosted.messagingUrl
: The URL for your bot's messaging service.clientId
: The client ID for your bot.
The BpWidget
component also takes a onMessage
prop, which is a function that will be called whenever a message is received from the bot.
Props:
botConfig
(Object): Configuration for your bot.botId
(String): The ID of your bot.hostUrl
(String): The URL where your bot is hosted.messagingUrl
(String): The URL for your bot's messaging service.clientId
(String): The client ID for your bot.
onMessage
(Function): Callback function for when a message is received from the bot.
BpIncomingMessagesListener
This component listens for incoming messages from the bot and can be used from anywhere in the bot, while hidden away. It takes the same botConfig
prop as the BpWidget
component, as well as an onMessage
prop. The onMessage
function will be called whenever a message is received from the bot.
Props:
botConfig
(Object): Same configuration object asBpWidget
.onMessage
(Function): Callback function for when a message is received from the bot.
Usage
In your application, you can use these components as follows:
import BpWidget from './src/BpWidget'
import BpIncommingMessagesListener from './src/BpIncommingMessagesListener'
const botConfig = {
botId: 'your-bot-id',
hostUrl: 'https://your-bot-host-url',
messagingUrl: 'https://your-bot-messaging-url',
clientId: 'your-bot-client-id',
}
function App() {
return (
<View>
<BpIncommingMessagesListener
botConfig={botConfig}
onMessage={(message) => console.log('Received message:', message)}
/>
<BpWidget botConfig={botConfig} onMessage={(message) => console.log('Received message:', message)} />
</View>
)
}
Interacting with the Bot
The BpWidget
component exposes three methods that you can use to interact with the bot:
sendEvent(event)
: Sends an event to the bot. Theevent
parameter should be an object containing the event data.sendPayload(payload)
: Sends a payload to the bot. Thepayload
parameter should be an object containing the payload data.mergeConfig(config)
: Merges the givenconfig
object with the current bot configuration.
You can call these methods using a ref to the BpWidget
component:
const bpWidgetRef = useRef();
// ...
<BpWidget ref={bpWidgetRef} ... />
// ...
bpWidgetRef.current.sendEvent({ type: 'toggle' });
bpWidgetRef.current.sendPayload({ type: 'text', text: 'Hello, bot!' });
bpWidgetRef.current.mergeConfig({ botName: 'New Bot Name' });
Adaptability to Other Native Technologies
While this guide specifically details integration with React Native, the principles and methods can be adapted for other popular native technologies such as Flutter, Cordova, Kotlin, and others. Depending on the specifics of the platform, you might need to make adjustments, but the overall approach remains similar.
Updated 6 months ago