Skip to main content

How to send Custom JSON Data Inside a Message?

Overview​

The LikeMinds Chat SDK allows developers to send custom JSON data inside a message. This can be useful for implementing additional features or use cases based on the needs of your application.

To send custom JSON data in a message, you need to create a custom Chatroom screen with custom message input component and pass it to the stack screen. This gives you control over how the message is created and lets you attach custom data.

In this guide, we will walk you through how to set up a custom Chatroom screen and send custom JSON data along with the message.

Prerequisites​

Before you begin, ensure the following:

  • LikeMinds Chat React Native SDK: The SDK must be properly installed and initialized in your React Native project. Refer to the installation guide if needed.
  • Basic Understanding of React Native Components: Familiarity with React Native components concepts.

Steps​

Step 1: How to enable Custom Widget?​

Custom Widgets allow you to enhance the chat experience by embedding rich, interactive content into chat messages. To enable Custom Widget functionality in your application, you need to configure your LikeMinds Chat environment by calling specific APIs. This guide outlines the steps required to enable Custom Widgets in your community.

  1. Get Access Token Using LikeMinds SDK Initiate API: This token is necessary for authenticating API calls. Call the POST sdk/initiate API to login with credentials from the dashboard. You can fetch the user unique id and API key from the dashboard and add in the respective placeholder below.
curl --location 'https://auth.likeminds.community/sdk/initiate' \
--header 'x-api-key: {LIKEMINDS_API_KEY}' \
--header 'x-sdk-source: chat' \
--header 'x-api-version: 1' \
--header 'Content-Type: application/json' \
--data '{
    "uuid": "{UUID_OF_OWNER_BOT_FROM_DASHBOARD}",
}'
  1. Enable Custom Widget: Once, you have the accessToken, make an API Call to update the community configuration to enable custom widget
curl --location --request PATCH 'https://auth.likeminds.community/community/configurations' \
--header 'Authorization: {access_token}' \
--header 'Content-Type: application/json' \
--data '{
    "description": "Widgets metadata for the community",
    "type": "widgets_metadata",
    "value": {
        "message": true
    }
}'

A successful update will return a 200 status code, indicating that the configuration has been updated successfully.

Step 2: Create Custom Message Input Box Component​

import {
  AddFilesView,
  AddMoreFilesView,
  EditBox,
  InputBoxView,
  InputWrapper,
  InputWrapperLeftSection,
  LinkPreviewInputView,
  ReplyBoxView,
  SelectFilesModal,
  SendDMRequestModal,
  TextInputWrapper,
  useInputBoxContext,
  UserTaggingList,
  VoiceNoteRecordToast,
} from "@likeminds.community/chat-rn-core";
import RecordSendInputFabView from "@likeminds.community/chat-rn-core/ChatSX/components/RecordSendInputFabView";

const CustomMessageInputBox = () => {
  const { hideDMSentAlert, message, DMSentAlertModalVisible, onSend } =
    useInputBoxContext();

  const onSendMessageProp = (
    message,
    metaData,
    voiceNote,
    isSendWhileVoiceNoteRecorderPlayerRunning
  ) => {
    onSend(
      message, // you can pass your custom message
      {
        text: "custom widget is working",
      }, // you can pass your custom json data
      voiceNote,
      isSendWhileVoiceNoteRecorderPlayerRunning
    );
  };

  return (
    <View>
      <VoiceNoteRecordToast />

      <InputWrapper>
        <InputWrapperLeftSection>
          <UserTaggingList />
          <ReplyBoxView />
          <LinkPreviewInputView />
          <EditBox />

          <TextInputWrapper>
            <AddMoreFilesView />
            <InputBoxView />
            <AddFilesView />
          </TextInputWrapper>
        </InputWrapperLeftSection>

        {/* Send message and send voice notes UI */}
        <RecordSendInputFabView onSendMessageProp={onSendMessageProp} />
      </InputWrapper>

      {/* More features modal like select Images, Docs etc. */}
      <SelectFilesModal />
      {/* SEND DM request Modal */}
      <SendDMRequestModal
        hideDMSentAlert={hideDMSentAlert}
        DMSentAlertModalVisible={DMSentAlertModalVisible}
        onSend={onSend}
        message={message}
      />
    </View>
  );
};

export default CustomMessageInputBox;

Step 3: Setup Custom Chatroom and File Upload Screen​

Step 4: Passing Custom Data​

In the Step 2 code, custom JSON data is sent via the onSend method inside onSendMessageProp method. The custom data object:

{
  "text": "custom widget is working"
}

is passed when the user creates the message, allowing you to send any relevant data along with the message.

Step 4: Integrating with the Stack Navigator​

Once your ChatroomScreenWrapper component is set up, you need to integrate it into your stack navigator to render this screen when required. Here’s an example of how to add the ChatroomScreenWrapper to your stack:

import React from "react";
import { Platform } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
import { ScreenName } from "@likeminds.community/chat-rn-core";
import ChatroomScreenWrapper from "<path_to_custom_chatroom_screen_wrapper>";
import FileUploadScreenWrapper from "<path_to_custom_file_upload_screen_wrapper>";

const Stack = createStackNavigator();

const StackScreen = () => {
  return (
    <Stack.Navigator>
      {/* Other screens */}
      <Stack.Screen
        name={ScreenName.Chatroom}
        component={ChatroomScreenWrapper}
        options={{
          gestureEnabled: Platform.OS === "ios" ? false : true,
        }}
      />
      <Stack.Screen
        options={{
          gestureEnabled: Platform.OS === "ios" ? false : true,
        }}
        name={ScreenName.FileUpload}
        component={FileUploadScreenWrapper}
        initialParams={{
          backIconPath: "", // add your back icon path here
          imageCropIcon: "", // add your image crop icon path here
        }}
      />
    </Stack.Navigator>
  );
};

export default StackScreen;