Skip to main content

How to send custom JSON data in a message?

The LikeMinds Chat SDK enables developers to send custom JSON data within a message, allowing for enhanced functionality and tailored features to meet the specific needs of your application.

To send custom JSON data with a message, you can create a custom message list screen and pass it to the SDK's component registry. This gives you full control over how messages are created and displayed, enabling the attachment of custom data.

In this guide, we will walk you through the process of setting up a custom message list screen and sending custom data along with your messages.

Prerequisites​

Before you begin, ensure the following:

  • LikeMinds Chat iOS SDK: The SDK must be properly installed and initialized in your iOS project. Refer to the installation guide if needed.
  • Custom Widget Enabled: Ensure that Widget is enabled for your project.

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: Before enabling the chatbot, you need to obtain the accessToken for Owner Bot. This token is necessary for authenticating API calls. Call the POST sdk/initiate API to login with Owner Bot ID 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.

How to send custom data using custom widget?​

Sending custom data in messages enables developers to enhance the functionality and interactivity of their chat application. The LikeMinds Chat SDK provides the flexibility to attach metadata ([String: Any]) to messages, allowing you to define custom widgets or features that suit your application's specific requirements.

By overriding the message creation logic in LMChatMessageListViewController and utilizing the postMessage() method in LMChatMessageListViewModel, you can seamlessly pass custom data with each message.

Steps to send Custom Data in a message​

Step 1: Create a Custom View Controller​

Extend LMChatMessageListViewController and implement custom logic for sending messages with metadata.

Use viewModel to access postMessage() method in LMChatMessageListViewModel, using that function pass the necessary parameters required and along with that pass metadata ([String: Any]). This metadata will then be used to create a custom widget for that conversation.

CustomChatListViewController.swift
import LikeMindsChatUI
import LikeMindsChatCore

class CustomChatListViewController: LMChatMessageListViewController {
    /// Function to send a message with a custom widget
    /// Pass a metadata dictionary (`[String: Any]`) to attach custom widget data
    // This map will be used to create a custom widget and will be attached
    // to conversation model in response
    @objc func createMessageWithCustomWidget(metadata: [String:Any]) {
        viewModel?.postMessage(
            message: nil, filesUrls: nil, shareLink: nil,
            replyConversationId: nil, replyChatRoomId: nil, temporaryId: nil,
            metadata: metadata)
    }

    /// Trigger the function to send a custom message
    func onTapSend() {
        createMessageWithCustomWidget(metadata: ["data": "Custom Data"])
    }
}

Step 2: Replace the Default LMChatMessageListViewController:​

In AppDelegate.swift file, after calling the setupChat() method, Use LMCoreComponents to replace the default implementation with your custom view controller for LMChatMessageListViewController.

AppDelegate.swift
import LikeMindsChatUI

 func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // YOUR_CODE
        LMChatCore.shared.setupChat(deviceId: deviceId)
        /// This will replace the default LMChatMessageListViewController with your custom implementation
        LMCoreComponents.shared.messageListScreen = CustomChatListViewController.self
        return true
}

How to render the custom data in message?​

Rendering custom views for messages allows you to create personalized and dynamic messaging experiences tailored to your application's needs. By extending the LikeMinds Chat SDK, you can use metadata to attach additional data to messages and render custom UI elements based on this data. This approach enables developers to go beyond default message templates

In this guide, we will walk you through rendering custom views for messages containing metadata. By extending the LMChatCustomCell class, you can define custom layouts and behavior to dynamically render data specific to each message.

Steps to Render Custom Data in a message​

Step 1: Create a Custom Cell​

Extend LMChatCustomCell and override methods to set up the view and layout.

Use data variable to access the data associated with that conversation. This data variable also stores the custom widget associated with the conversation.

LMChatCustomCell.swift
import LikeMindsChatUI
import LikeMindsChatCore

class CustomCell: LMChatCustomCell {
    // Create a custom view to display in the CustomCell

    // MARK: Setup Views
    open override func setupViews() {
        super.setupViews()
        // Add your view into the contentView
        contentView.addSubview("YOUR_VIEW")

    }

    open override func setData(with data: ContentModel, index: IndexPath) {
        super.setData(with: data, index: index)
        // Use the data provided to access the metadata
        // (data.message?.metadata)
        // This will give access to custom widget associated with that conversation
    }
}
note

To render a custom cell which will look like the default LikeMinds Chat Bubble, refer to the LMChatMessageCell.swift file.

Step 2: Replace the Default LMChatCustomCell​

In the AppDelegate.swift file, replace the default LMChatMessageListViewController with your custom implementation. Use the LMCoreComponents registry to register your custom view controller.

AppDelegate.swift
import LikeMindsChatUI

 func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // YOUR_CODE
        LMChatCore.shared.setupChat(deviceId: deviceId)
        // This will replace the default LMChatCustomCell with your custom implementation
        LMUIComponents.shared.chatMessageCustomCell = CustomCell.self
        return true
}

By following this guide, you can create custom widgets for messages and render them dynamically using metadata. This approach provides flexibility to tailor the messaging experience to your application's specific requirements.