Display Open Graph tags in a message

Sendbird UIKit for Jetpack Compose supports Open Graph tags, or link preview composable, powered by the Chat SDK’s OG Tags. If a message includes OgMetaData, an object that contains OG metadata information such as title, URL, and default image of an OG object, the OgTag composable displays the link preview of the message.

In order to implement OgTag, enable OgTag in the application settings first.

Prerequisites

To use OgTag, make sure you have completed the following prerequisites:

Enable the OgTag feature in your Sendbird application. You can do this by going to Chat > UIKit config in Sendbird Dashboard and turn on Link preview.

Customize the UI

The UI for OgTag can be customized by injecting custom composable. The following code shows how to build ChannelScreen with the OgTag composable.

Kotlin

@Composable
fun CustomOgTagChannelScreen(
    navController: NavController,
    channelUrl: String
) {
    ChannelScreen(
        navController = navController,
        channelUrl = channelUrl,
        messageItem = { prevMessage, message, nextMessage, onMessageClick, onMessageLongClick ->
            MessageItemFactory(
                prevMessage,
                message,
                nextMessage,
                onMessageClick = onMessageClick,
                onMessageLongClick = onMessageLongClick,
                myTextMessageItem = { userMessage ->
                    MyTextMessageItem(
                        userMessage,
                        onMessageClick= onMessageClick,
                        onMessageLongClick = onMessageLongClick,
                        ogTagMessage = {
                            it.ogMetaData?.let { ogData ->
                                CustomOgTagMessage(
                                    ogMetaData = ogData
                                )
                            }
                        }
                    )
                }
            )
        }
    )
}

@Composable
fun CustomOgTagMessage(
    ogMetaData: OGMetaData
) {
    OgTagMessage(ogMetaData, ogTagThumbnail = {
        Image(
            rememberAsyncImagePainter(R.drawable.icon_chat_filled),
            contentDescription = null,
            contentScale = ContentScale.Fit,
            modifier = Modifier.width(240.dp).height(160.dp)
        )
    })
}

On this page

Prerequisites Customize the UI

Sample app