@msg91comm/react-native-hello-sdk

React Native Chat Widget by MSG91 # HelloSDK

Getting started

Login or create account at MSG91 to use Hello SDK service.

After login at MSG91 follow below steps to get your hello chat widget configuration.

• From navigation drawer expand Manage > Inboxes > Select Inbox as Chat > Edit Widget.
• Configure your widget and copy the helloConfig object.

Installation

npm install @msg91comm/react-native-hello-sdk

Important: This package requires the following dependencies to be installed in your project:

npm install cobrowse-sdk-react-native react-native-webview

Usage

ChatWidget

Use this approach if you have a dedicated screen (e.g., a "Contact Us" screen) where you want the chat widget to always be visible as part of the screen's layout. This is ideal for static placement within a specific screen of your app.

Importing the Widget

import { ChatWidget } from '@msg91comm/react-native-hello-sdk';

const helloConfig = {
  widgetToken: "XXXXX",
  unique_id: "user-123", // optional
  name: "John Doe",      // optional
  number: "[phone]", // optional
  mail: "[e-mail]" // optional
};

return (
  <SafeAreaView style={{ flex: 1 }}>
    <View style={styles.header}>
      <Text style={styles.headerText}>Contact Us</Text>
    </View>
    <ChatWidget
      helloConfig={helloConfig}
      widgetColor={'#FFFF00'}
      isCloseButtonVisible={false}
      useKeyboardAvoidingView={true}
    />
  </SafeAreaView>
);

---

ChatWidgetModal (Modal Overlay Widget)

Use this approach if you want to invoke the chat widget from anywhere in your app, such as from a floating button, navigation bar, or global action. The modal overlay allows the chat widget to appear above your entire app interface, making it accessible from any screen.

Importing the Widget

import { ChatWidgetModal } from '@msg91comm/react-native-hello-sdk';

return (
  <NavigationContainer>
    {/* Other Screens or Navigation Stacks... */}
    <ChatWidgetModal
      helloConfig={helloConfig}
      widgetColor={'#FFFF00'}
      statusBarStyle="dark-content"
      useKeyboardAvoidingView={true}
      preLoaded={true} // Preloads widget content (default: true)
    />
  </NavigationContainer>
);

Invoking the ChatWidgetModal

You can invoke the widget from anywhere in your app using the event emitter:

import { DeviceEventEmitter } from 'react-native';

<Button title="Chat with us"
  onPress={() => DeviceEventEmitter.emit("showHelloWidget", { status: true })}
/>

This will open the widget (if using ChatWidgetModal).

---

Props

ChatWidget & ChatWidgetModal

Prop	Type	Required	Default	Description
helloConfig	object (see below)	Yes	-	Configuration object from Hello dashboard
widgetColor	string (hex color code)	Optional	-	Sets StatusBar color and widget's background color
statusBarStyle	'light-content' | 'dark-content'	Optional	'light-content'	Changes status bar content color
isCloseButtonVisible	boolean	Optional	true	Show/hide the close button in the widget
useKeyboardAvoidingView	boolean	Optional (Android Only)	false	Enable keyboard avoiding view for input fields in widget

ChatWidgetModal Only

Prop	Type	Required	Default	Description
preLoaded	boolean	No	false	Preloads widget content and keeps it ready to launch when it is true

helloConfig Object

• widgetToken (string, required): Widget token from Hello dashboard
• unique_id (string, optional): Unique user identifier
• name (string, optional): User's name
• number (string, optional): User's phone number
• mail (string, optional): User's email
• You can provide Extra Params as key: value pairs, configured in Widget from MSG91 Panel.

Note: Ensure that helloConfig does not contain any key with null or undefined value, else it will show loader or malfunction.

---

License

Copyright 2022 MSG91
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.