domix-ai-react-native-widget
v0.0.30
Published
React Native widget for Domix AI
Maintainers
Readme
- Supported Domix AI version: 1.0.0+
Installation
Install the library using either yarn or npm like so:
yarn add domix-ai-react-native-widgetOR
npm install --save domix-ai-react-native-widgetThis library depends on react-native-webview and async-storage. Please follow the instructions provided in the docs.
For local package development, the /Example app is linked to the package source with file:.. and uses Example/metro.config.js. Start Expo with a clean cache after package changes:
cd Example
npm install
npm start -ciOS Installation
If you're using React Native versions > 60.0, it's relatively straightforward.
cd ios && pod installHow to use
- Create a website channel in Domix AI server.
- Replace
websiteToken.
import React, { useState } from 'react';
import { StyleSheet, View, SafeAreaView, TouchableOpacity, Text } from 'react-native';
import DomixAIWidget from 'domix-ai-react-native-widget';
const App = () => {
const [showWidget, toggleWidget] = useState(false);
const user = {
identifier: '[email protected]',
name: 'John Samuel',
avatar_url: '',
email: '[email protected]',
identifier_hash: '',
};
const customAttributes = { accountId: 1, pricingPlan: 'paid', status: 'active' };
const conversationCustomAttributes = { orderId: 1234, status: 'pending' };
const websiteToken = 'WEBSITE_TOKEN';
const baseUrl = 'https://chat.domix.ai';
const locale = 'en';
const colorScheme = 'dark';
return (
<SafeAreaView style={styles.container}>
<View>
<TouchableOpacity style={styles.button} onPress={() => toggleWidget(true)}>
<Text style={styles.buttonText}>Open widget</Text>
</TouchableOpacity>
</View>
{showWidget && (
<DomixAIWidget
websiteToken={websiteToken}
locale={locale}
baseUrl={baseUrl}
closeModal={() => toggleWidget(false)}
isModalVisible={showWidget}
user={user}
customAttributes={customAttributes}
conversationCustomAttributes={conversationCustomAttributes}
colorScheme={colorScheme}
/>
)}
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
button: {
height: 48,
marginTop: 32,
paddingTop: 8,
paddingBottom: 8,
backgroundColor: '#1F93FF',
borderRadius: 8,
borderWidth: 1,
borderColor: '#fff',
justifyContent: 'center',
},
buttonText: {
color: '#fff',
textAlign: 'center',
paddingLeft: 10,
fontWeight: '600',
fontSize: 16,
paddingRight: 10,
},
});
export default App;You're done!
The whole example is in the /Example folder.
Props
Methods
You can use a reference to the DomixAIWidget component to call methods like sendMessage, setUser, and reset.
const widgetRef = useRef(null);
// To send a message
widgetRef.current.sendMessage('Hello from React Native!');
// To set user information
widgetRef.current.setUser('user-identifier-key', {
email: '[email protected]',
name: 'John Samuel',
avatar_url: '',
phone_number: '+1234567890',
});
// Or pass a full user object that already includes identifier
widgetRef.current.setUser({
identifier: 'user-identifier-key',
email: '[email protected]',
name: 'John Samuel',
});
// To set custom attributes
widgetRef.current.setCustomAttributes({ accountId: 1, status: 'active' });
// To set conversation custom attributes
widgetRef.current.setConversationCustomAttributes({ orderId: 1234 });
// To close the widget modal
widgetRef.current.closeModal();
// To reset the session
widgetRef.current.reset();
// Usage in component
<DomixAIWidget
ref={widgetRef}
{...props}
/>Reset behavior
reset()clears the current conversation session and forces the embedded widget to reload.- If you want the next open to be anonymous, render the widget with
user={null}after reset. - If you want the next open to use another contact, update the
userprop or callsetUser(...)before reopening.
Feedback & Contributing
Feel free to send us feedback.
Domix AI © 2026, Domix AI - Released under the MIT License.
