SmartlyChat SDK – React Native Integration

Easily integrate your Smartly AI chatbot into any mobile app.

SmartlyChat SDK is the fastest way to bring a conversational experience to your mobile users—on both iOS and Android. Whether you're building a support assistant, onboarding bot, or product recommender, SmartlyChat makes it easy to plug your chatbot into your React Native app with just a few lines of code.

🧩 Why Use SmartlyChat?

No chatbot experience required
Ready-to-use chat UI
Customizable to match your app’s branding
Real-time communication with Smartly AI bots
Easy to install and use

🚀 Quick Start

1. Install the SDK

Run this command in your React Native project:

npm install smartlychat-sdk

Make sure your project includes react, react-native, and expo.

2. Basic Usage

Here’s how to embed your bot in an app:

import { SmartlyChat } from 'smartlychat-sdk';

export default function App() {
  return (
    <SmartlyChat
      botID="YOUR_BOT_ID"
      lang="en"
      userID="USER_ID"
    />
  );
}

That’s it! You now have a working chat interface connected to your Smartly AI bot.

⚙️ Props Reference

Prop	Type	Required	Description
`botID`	`string`	✅	Your Smartly AI bot ID
`lang`	`string`	✅	Language code (e.g., `'en'`, `'fr'`)
`userID`	`string`	✅	A unique user identifier
`containerStyle`	`StyleProp<ViewStyle>`	❌	Customize chat container layout
`tabStyle`	`StyleProp<ViewStyle>`	❌	Style for the chat tab (if used)
`chatbotButtonStyle`	`StyleProp<ViewStyle>`	❌	Style the floating chatbot button
`chatbotTextStyle`	`StyleProp<TextStyle>`	❌	Style the button label text
`messageContainerStyle`	`StyleProp<ViewStyle>`	❌	Style for individual messages
`messageTextStyle`	`StyleProp<TextStyle>`	❌	Style the message text
`inputStyle`	`StyleProp<ViewStyle>`	❌	Style the input box
`sendButtonStyle`	`StyleProp<ViewStyle>`	❌	Style for the send button
`sendButtonTextStyle`	`StyleProp<TextStyle>`	❌	Text style for send button
`avatarStyle`	`StyleProp<ImageStyle>`	❌	Avatar image customization
`sourcesButtonStyle`	`StyleProp<ViewStyle>`	❌	Customize the “Sources” button
`sourcesTextStyle`	`StyleProp<TextStyle>`	❌	Style for source list text

🧪 Example with Custom Styles

<SmartlyChat
  botID="demo-bot"
  lang="en"
  userID="user-123"
  chatbotButtonStyle={{ backgroundColor: '#007AFF' }}
  chatbotTextStyle={{ color: 'white' }}
/>

🧠 How It Works

The chat component opens a real-time socket connection to the Smartly AI backend.
Messages sent by the user are passed directly to the bot.
Bot responses appear in the chat, optionally with citable sources shown in a modal.
The widget handles all messaging logic and formatting—just pass in your botID.

Some screenshots

🎨 Customization

You can override the styling of every UI element using standard React Native styles. This lets you make the chatbot feel native to your app.

📦 Dependencies

This package requires:

react
react-native
expo
react-native-render-html
socket.io-client

All are peer dependencies and should be installed alongside smartlychat-sdk.

🛠 Developer Info

Fully written in TypeScript
Main entry: dist/index.js
Types: dist/index.d.ts

📁 Repository

Find the full source code and example apps here:
GitHub Repository