Skip to main content
Add the Strada chat widget to your React Native mobile app by installing the SDK package.
Need help with implementation? Contact your Strada team for guidance. Your development team is responsible for the final integration.

​
Installation

Install the SDK and its peer dependency: 
npm install @stradahq/react-native-sdk react-native-webview
or with yarn: 
yarn add @stradahq/react-native-sdk react-native-webview

​
Platform Setup

No additional configuration required for iOS or Android.

​
Basic Implementation

Import the SDK and add it to your app. Replace <YOUR-ORGANIZATION-ID> and <YOUR-AGENT-ID> with your organization and agent IDs. 
import { useRef } from 'react';
import { View, Button } from 'react-native';
import { StradaWidget, type StradaWidgetRef } from '@stradahq/react-native-sdk';

export default function App() {
  const widgetRef = useRef<StradaWidgetRef>(null);

  return (
    <View style={{ flex: 1 }}>
      <Button title="Open Chat" onPress={() => widgetRef.current?.open()} />

      <StradaWidget
        ref={widgetRef}
        organizationId="<YOUR-ORGANIZATION-ID>"
        agentId="<YOUR-AGENT-ID>"
      />
    </View>
  );
}
You can find your Organization ID and Agent ID in the Strada dashboard.

​
That’s it!

You should now see a small chat button on the bottom right corner of your app. Tap the button to open the chat widget.
The Strada React Native SDK also supports a rich set of props and methods that you can use to customize the behavior of your widget. For example, you might want to hide the button and control the widget programmatically, pass user metadata, or authenticate users. The React Native SDK reference covers all of these options and more.

​
Pass User Data

Use metadata to pass information about a user to Strada for attribution and analytics purposes. This data is not accessible to the AI agent during conversations. 
<StradaWidget
  ref={widgetRef}
  organizationId="<YOUR-ORGANIZATION-ID>"
  agentId="<YOUR-AGENT-ID>"
  metadata={{
    userId: '12345',
    accountType: 'premium',
    signupDate: '2024-01-15'
  }}
/>
To change these values after initialization, use the setMetadata method.
Meta field keys should not include whitespace, emojis, or special characters.

​
Pass Agent Variables

Use agentVariables to inject information into your agent’s chat conversations. Unlike metadata, these variables are accessible to the AI agent and can be used to customize agent behavior, provide context, or personalize the conversation experience. 
<StradaWidget
  ref={widgetRef}
  organizationId="<YOUR-ORGANIZATION-ID>"
  agentId="<YOUR-AGENT-ID>"
  agentVariables={{
    first_name: 'John',
    last_name: 'Doe',
    email: 'john@example.com'
  }}
/>

​
User Authentication

Implement secure user verification by providing a getUserToken function that returns a JWT token. This establishes an authenticated identity for each chat session. 
<StradaWidget
  ref={widgetRef}
  organizationId="<YOUR-ORGANIZATION-ID>"
  agentId="<YOUR-AGENT-ID>"
  getUserToken={async () => {
    const response = await fetch('https://your-api.com/strada-token');
    const { token } = await response.json();
    return token;
  }}
/>
The getUserToken function should return a Promise that resolves to a JWT token string, or null if authentication should be skipped.

​
Hide the Floating Button

The widget displays a floating button by default. To manage chat visibility through your own UI elements instead, set hideButton to true: 
<StradaWidget
  ref={widgetRef}
  organizationId="<YOUR-ORGANIZATION-ID>"
  agentId="<YOUR-AGENT-ID>"
  hideButton={true}
/>
Then use the open action to open the chat programmatically: 
// Open the chat when user taps a custom button
<Button title="Get Help" onPress={() => widgetRef.current?.open()} />

​
Start in List View

For authenticated users, you can start the widget showing the list of recent chats instead of a new conversation: 
<StradaWidget
  ref={widgetRef}
  organizationId="<YOUR-ORGANIZATION-ID>"
  agentId="<YOUR-AGENT-ID>"
  defaultView="list"
  getUserToken={async () => {
    const response = await fetch('https://your-api.com/strada-token');
    const { token } = await response.json();
    return token;
  }}
/>
The list view requires user authentication. Anonymous users will always start in chat view.