# Modifying message preview in ChannelList preview

**URL:** https://community.sendbird.com/t/modifying-message-preview-in-channellist-preview/2292
**Category:** React
**Tags:** uikit, question, javascript
**Created:** [May 20, 2021, 10:23pm UTC](https://community.sendbird.com/t/modifying-message-preview-in-channellist-preview/2292 "2021-05-20T22:23:16Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![kevinkasson](https://avatars.discourse-cdn.com/v4/letter/k/73ab20/32.png) [@kevinkasson](https://community.sendbird.com/u/kevinkasson)
#### Post date: [May 20, 2021, 10:23pm UTC](https://community.sendbird.com/t/modifying-message-preview-in-channellist-preview/2292/1 "2021-05-20T22:23:16Z")

</div>

Hi,

I’m trying to find a way to change the message that shows in the channel preview. The specific case here is that I’m trying to modify the “direct\_call:start” and “direct\_call:end” messages that are generated by the Calls functionality.

I have a custom message render function for the Channel component that replaces the “direct\_call” messages with friendly text. I’d like to apply something similiar to the Channel preview, because if the most recent activity was a call it will show “direct\_call:end”.

I see that I can do this with renderChannelPreview, but then I need to essentially re-create the entire UI Kit component. I’m hoping for a way to use the built-in renderer without needing to replicate all the functionality from it myself, but also modify the message that show.

Is there any way to do this, or am I better off using renderChannelPreview with a custom component? Is there any way to get a source for the built-in renderer so I can copy it?

Thanks!

Using UI Kit version 2.2.1.

---

<div class="post-metadata">

### Author: ![Tyler](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/tyler/32/810_2.png) [@Tyler](https://community.sendbird.com/u/Tyler)
#### Post date: [May 21, 2021, 1:11pm UTC](https://community.sendbird.com/t/modifying-message-preview-in-channellist-preview/2292/2 "2021-05-21T13:11:58Z")

</div>

Hey @kevinkasson,

There is no way for you to hook into the preview message without utilizing the `renderChannelPreview()`. I see two potential options in order to achieve what you’re looking for.

The first, would be to recreate the preview component. You can see how the current implementation is built here: [sendbird-uikit-react-sources/src/ui/ChannelPreview at main · sendbird/sendbird-uikit-react-sources · GitHub](https://github.com/sendbird/sendbird-uikit-react-sources/tree/main/src/ui/ChannelPreview)

The second option would be to utilize webhooks to send a custom message to the channel with the text you would prefer to see. The webhooks trigger off of `direct_call:dial`, `direct_call:accept` and `direct_call:end`. Utilizing webhooks, you could receive those events and formulate your own message back to the channel with the copy that you would prefer to see.

The issue with the webhook method is that the webhook body does not contain a channelId, so you’d have to determine what channel it needs to be sent to.

---

<div class="post-metadata">

### Author: ![kevinkasson](https://avatars.discourse-cdn.com/v4/letter/k/73ab20/32.png) [@kevinkasson](https://community.sendbird.com/u/kevinkasson)
#### Post date: [May 21, 2021, 7:05pm UTC](https://community.sendbird.com/t/modifying-message-preview-in-channellist-preview/2292/3 "2021-05-21T19:05:00Z")

</div>

Thank you! Looking at that source actually gave me another idea, I’m able to use sortChannelList and modify the lastMessage property of each channel in the sort function. That’s probably not exactly intended behavior but it seems to work safely enough.
