What is In-App Messaging?

In-app messaging lets apps talk to their users directly inside the app. These messages show up while people use the app, sharing important updates or helpful tips. Apps use this tool to guide users, tell them about new features, or show special offers. Unlike push notifications that pop up on your phone screen, in-app messages only appear when you're actively using the app. This makes them less disruptive and more relevant.

In this guide, we'll look at what in-app messaging is, how they work, and how to integrate this technology into our apps to improve user experience. With that in mind, let’s jump right in!

What is In-app Messaging?

In-app messaging is a way for apps to send messages to users while they use the app. These messages appear inside the app itself, not as phone notifications. They can be short notes, pictures, or even small forms for users to fill out.

Apps use in-app messages for many reasons. They might tell you about a new feature, ask for feedback, or show a special deal. Some common types of in-app messages include welcome screens for new users, tips about app features, or alerts about account updates.

What makes in-app messaging special is its timing. Messages only show up when you're using the app. This means you see important information exactly when you need it. App makers can also target messages to specific users based on what they do in the app. This helps make sure users get useful, relevant messages that make the app better to use.

How Does In-App Messaging Work?

Most in-app messaging uses special code inside the app to show messages to users. When you open an app, it checks if there are any messages to display. The app decides when to show these messages based on what you do.

Developers set up triggers that determine when messages appear. These triggers can be simple actions like opening the app or more specific ones like clicking a button or reaching a new level in a game. The app watches for these triggers and shows the right message at the right time.

Many apps also collect data about how you use them. They might know which features you use most or what time of day you usually open the app. This helps them send better, more helpful messages. For example, if you often look at workout videos, the app might send you messages about new fitness content.

Messages can look different too. Some are small pop-ups at the bottom of your screen. Others might take up the whole screen or appear as a banner at the top. The app developers choose the style based on how important the message is and what they want you to do next.

Types of In-App Messages

Apps use different types of in-app messages to talk to their users. Each type works best for specific goals. Here are the main types of in-app messages:

• Chat-style messages: These look like text messages inside the app. They create a more personal feel and work well for direct communication with users. Chat messages might come from customer service or be automated responses to user actions. Users can often reply to these messages to get help or more information.

• Pop-ups: Small windows that appear in the middle of the screen. Apps use these for important updates or to ask users to take action. Pop-ups work well for short messages that need attention right away. They often include buttons like "OK" or "Learn More" and can be closed by users when they're done reading.

• Banners: These messages show up at the top or bottom of the screen. Banners are less disruptive than pop-ups. They work well for alerts that users should know about but don't need to act on right away. Banners might slide away on their own after a few seconds or stay until the user dismisses them.

• Full-screen messages: These take up all of the screen. Apps use them to highlight big news or show detailed information. They work best for onboarding new users or showing off new features. Full-screen messages often include pictures or videos and might have several screens users can swipe through.

• Tooltips: Small hints that point to buttons or features in the app. They help teach users how to use the app better. Tooltips usually show up the first time a user visits a new section of the app. They can be part of a series that guides users through different features step by step.

How to Add In-App Messaging to Your App Using ZEGOCLOUD

In-app messaging is a very important feature in modern app development. Adding this feature to your app might look difficult, but not with ZEGOCLOUD’s in-app chat kit. With this kit, you can add feature-rich in-app chat functionality to your apps and websites with just a few lines of code. Enough of talking; let’s code it!

Prerequisites

Before we start, let's make sure you have everything you need:

• Sign up for a ZEGOCLOUD developer account.
• Obtain your AppID and AppSign from the ZEGOCLOUD admin dashboard.
• Activate the In-app Chat service in the ZEGOCLOUD Admin Console.
• Have Node.js installed on your machine.
• Make sure your device is connected to the internet.

1. Integrating the SDK

• Use Yarn or NPM to add @zegocloud/zimkit-rn to your project:

yarn add @zegocloud/zimkit-rn

• Run the following command to ensure compatibility with the In-app Chat Kit:

yarn add zego-zim-react-native@2.12.1 react-delegate-component @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context

2. Setting Up In-App Chat Kit

• First, create an instance of the In-app Chat Kit and initialize it using the AppID and AppSign from your ZEGOCLOUD Admin Console:

import { ZIMKit } from '@zegocloud/zimkit-rn';

const appConfig = {
    appID: 0, // Replace with your AppID
    appSign: '', // Replace with your AppSign
};

ZIMKit.init(appConfig.appID, appConfig.appSign);

• After initializing, log in the user using the connectUser method. Ensure that the user ID and name are meaningful and associated with your business logic:

ZIMKit.connectUser({
    userID: '', // Your user ID
    userName: '' // Your user name
}).then(() => {
    // Handle successful login
    navigation.navigate('HomePage');
});

Note: You must create unique user IDs to prevent clashes. The user must be authenticated to use the chat.

3. Configuring Navigation

• Define your app’s navigation to route between pages like login, chat list, and message pages:

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginPage from './LoginPage';
import HomePage from './HomePage';
import { MessageListPage } from '@zegocloud/zimkit-rn';

const Stack = createNativeStackNavigator();

export default function AppNavigation() {
    return (
        <Stack.Navigator initialRouteName="LoginPage">
            <Stack.Screen name="LoginPage" component={LoginPage} />
            <Stack.Screen name="HomePage" component={HomePage} />
            <Stack.Screen name="MessageListPage" component={MessageListPage} />
        </Stack.Navigator>
    );
}

• Now, create the login component. This component initializes the SDK and handles the user login:

import { useEffect } from 'react';
import { useNavigation } from '@react-navigation/native';
import { ZIMKit } from '@zegocloud/zimkit-rn';

export default function LoginPage() {
    const navigation = useNavigation();

    useEffect(() => {
        ZIMKit.init(appConfig.appID, appConfig.appSign);
        ZIMKit.connectUser({ userID: '', userName: '' }).then(() => {
            navigation.navigate('HomePage');
        });
    }, []);

    return null;
}

• Finally, create the Home component. The home page displays a list of conversations, and provides buttons for creating or joining group chats:

import { SafeAreaView, Button } from 'react-native';
import { ConversationList, ZIMKit } from '@zegocloud/zimkit-rn';
import { useNavigation } from '@react-navigation/native';

export default function HomePage() {
    const navigation = useNavigation();

    const createGroupChat = () => {
        const groupName = 'MyGroup';
        const userIDs = ['user1', 'user2'];
        ZIMKit.createGroup(groupName, userIDs, { groupID: 'group1' }).then(() => {
            navigation.navigate('MessageListPage');
        });
    };

    return (
        <SafeAreaView>
            <ConversationList onPressed={() => navigation.navigate('MessageListPage')} />
            <Button title="Create Group Chat" onPress={createGroupChat} />
        </SafeAreaView>
    );
}

4. Configuring Android Permissions

• Open the AndroidManifest.xml file located in my_project/android/app/src/main/ and add the following lines to allow network access:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

5: Starting Chats

• **Start a One-on-One Chat: **To start a one-on-one conversation, call the following function with the user's ID you wish to chat with:

const startChat = (userID) => {
    navigation.navigate('MessageListPage', {
        conversationID: userID,
        conversationType: 0,
    });
};

• Create a Group Chat: To create a group chat, use createGroup with a group name and list of user IDs.

const createGroupChat = () => {
    const groupName = 'Test Group';
    const userIDs = ['user1', 'user2'];
    ZIMKit.createGroup(groupName, userIDs).then(() => {
        navigation.navigate('MessageListPage');
    });
};

Join a Group Chat: To join an existing group, use the joinGroup method:

const joinGroupChat = (groupID) => {
    ZIMKit.joinGroup(groupID).then(() => {
        navigation.navigate('MessageListPage');
    });
};

Conclusion

In-app messaging is a great way to keep users informed without interrupting their experience. It allows apps to share updates, tips, or offers at just the right moment, making the information more useful and engaging. By using tools like ZEGOCLOUD, developers can easily add in-app messaging to their apps, helping users stay connected and informed.

Whether it's a pop-up, banner, or chat message, in-app messaging keeps communication simple and effective. With this feature, you can enhance user engagement and improve overall satisfaction, ensuring a smoother app experience for everyone.