# Widget Chat (Need to show timestamp with messages )

**URL:** <https://community.sendbird.com/t/widget-chat-need-to-show-timestamp-with-messages/1723>\
**Category:** JavaScript\
**Tags:** chatsdk\
**Created:** [February 18, 2021, 8:06am UTC](https://community.sendbird.com/t/widget-chat-need-to-show-timestamp-with-messages/1723 "2021-02-18T08:06:17Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![vcs\_account](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/vcs_account/32/408_2.png) [@vcs\_account](https://community.sendbird.com/u/vcs_account)\
**Post date:** [February 18, 2021, 8:06am UTC](https://community.sendbird.com/t/widget-chat-need-to-show-timestamp-with-messages/1723/1 "2021-02-18T08:06:17Z")

</div>

Hi everyone and @Sravan_S @Jason ,  
I am using widget chat in a project. It is working fine.  
Now the client want to show the timestamp along with the messages.

Is there any way to implement this or if someone has a code to implement this would be highly appreciated?

Thanks

---

<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:** [February 18, 2021, 1:59pm UTC](https://community.sendbird.com/t/widget-chat-need-to-show-timestamp-with-messages/1723/2 "2021-02-18T13:59:59Z")

</div>

Hello @vcs_account,

The timestamp is included in the message data that is returned for each message. You can pull the data out and display it in your widget. An example I use in React is:

```auto
{new Date(message.createdAt).toLocaleString('ko-KR', {
                  timeStyle: 'short',
                  hourCycle: 'h24',
                })}

```

The `message.createdAt` is the timestamp in Millisecond format.

---

<div class="post-metadata">

**Author:** ![vcs\_account](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/vcs_account/32/408_2.png) [@vcs\_account](https://community.sendbird.com/u/vcs_account)\
**Post date:** [February 18, 2021, 2:01pm UTC](https://community.sendbird.com/t/widget-chat-need-to-show-timestamp-with-messages/1723/3 "2021-02-18T14:01:25Z")

</div>

@Tyler  
How can I bind this script with the DOM element. ?

---

<div class="post-metadata">

**Author:** ![walter.rodriguez](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/walter.rodriguez/32/546_2.png) [@walter.rodriguez](https://community.sendbird.com/u/walter.rodriguez)\
**Post date:** [February 18, 2021, 3:44pm UTC](https://community.sendbird.com/t/widget-chat-need-to-show-timestamp-with-messages/1723/4 "2021-02-18T15:44:30Z")

</div>

Vanilla Javascript or React?

If you use this one, then Javascript is what you need, correct?

> **[sendbird/SendBird-JavaScript](https://github.com/sendbird/SendBird-JavaScript/tree/master/web-widget)**
>
> master/web-widget

---

<div class="post-metadata">

**Author:** ![walter.rodriguez](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/walter.rodriguez/32/546_2.png) [@walter.rodriguez](https://community.sendbird.com/u/walter.rodriguez)\
**Post date:** [February 18, 2021, 4:26pm UTC](https://community.sendbird.com/t/widget-chat-need-to-show-timestamp-with-messages/1723/5 "2021-02-18T16:26:08Z")

</div>

For Widget (please see this as a guidance on how you can modify data but I encourage you to create your own code):

1. Go to **chat-section.js**
2. Find function:

> createMessageItem(message, isCurrentUser, isContinue, unreadCount) { … }

1. Replace this code:

> var itemUnread = this.createDiv();  
> this.\_setClass(itemUnread, [className.UNREAD]);  
> this.setUnreadCount(itemUnread, unreadCount);

1. With this one:

> // Message timestamp  
> var timestamp = ‘\<small\>’ + new Date(message.createdAt).toLocaleDateString() + ‘\</small\>’;
> 
> var itemUnread = this.createDiv();  
> this.\_setClass(itemUnread, [className.UNREAD]);  
> this.setUnreadCount(itemUnread, unreadCount);
> 
> // Timestamp outside the bubble  
> this.\_setContent(itemUnread, timestamp);

Or, you can place it inside the bubble:

> // Message timestamp inside the bubble  
> var formattedDate = new Date(message.createdAt).toLocaleDateString();  
> var timestamp = “\<p\>\<small\>” + formattedDate + “\</small\>\</p\>”  
> const timestampDiv = this.createDiv();  
> timestampDiv.innerHTML = timestamp;  
> itemText.appendChild(timestampDiv);

 ![Screenshot 2021-02-18 at 16.21.48](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/1X/ca7a572f1be6782f67b2047a4417310b1656d087.png)

If you want to have the entire function:

> <https://gist.github.com/warodri-sendbird/2033fc3e7c2d23e550036ebb4e530a0d>

---

<div class="post-metadata">

**Author:** ![tahiralvi](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/tahiralvi/32/407_2.png) [@tahiralvi](https://community.sendbird.com/u/tahiralvi)\
**Post date:** [February 19, 2021, 5:17am UTC](https://community.sendbird.com/t/widget-chat-need-to-show-timestamp-with-messages/1723/6 "2021-02-19T05:17:17Z")

</div>

Yes, using Javascript.

---

<div class="post-metadata">

**Author:** ![tahiralvi](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/tahiralvi/32/407_2.png) [@tahiralvi](https://community.sendbird.com/u/tahiralvi)\
**Post date:** [February 19, 2021, 5:21am UTC](https://community.sendbird.com/t/widget-chat-need-to-show-timestamp-with-messages/1723/7 "2021-02-19T05:21:31Z")

</div>

> [@walter.rodriguez](#):
>
> // Message timestamp  
> var timestamp = ‘’ + new Date(message.createdAt).toLocaleDateString() + ‘’;
> 
> var itemUnread = this.createDiv();  
> this.\_setClass(itemUnread, [className.UNREAD]);  
> this.setUnreadCount(itemUnread, unreadCount);
> 
> // Timestamp outside the bubble  
> this.\_setContent(itemUnread, timestamp);

Thanks for providing the detailed description.

Great!!, it perfectly working for me (except I update the toLocalDateString() to toLocalTimeString(‘en-US’)).

---

<div class="post-metadata">

**Author:** ![vcs\_account](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/vcs_account/32/408_2.png) [@vcs\_account](https://community.sendbird.com/u/vcs_account)\
**Post date:** [February 19, 2021, 6:42am UTC](https://community.sendbird.com/t/widget-chat-need-to-show-timestamp-with-messages/1723/8 "2021-02-19T06:42:30Z")

</div>

Thanks @walter.rodriguez ,  
It is working for me. Great

---

<div class="post-metadata">

**Author:** ![Jay\_Patel](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/jay_patel/32/449_2.png) [@Jay\_Patel](https://community.sendbird.com/u/Jay_Patel)\
**Post date:** [February 25, 2021, 8:48pm UTC](https://community.sendbird.com/t/widget-chat-need-to-show-timestamp-with-messages/1723/9 "2021-02-25T20:48:35Z")

</div>

@walter.rodriguez Thank you the solution. Appreciate your help.  
I found that it’s working great with the message we send, but not working for message we receive.  
Is there any solution for it?

---

<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:** [February 25, 2021, 11:11pm UTC](https://community.sendbird.com/t/widget-chat-need-to-show-timestamp-with-messages/1723/10 "2021-02-25T23:11:37Z")

</div>

@Jay_Patel,

Is there a difference in the way you display your sent messages vs your received messages? The previousMessageListQuery should return an array of messages that all have the same data associated with it.

-Tyler

---

<div class="post-metadata">

**Author:** ![Jay\_Patel](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/jay_patel/32/449_2.png) [@Jay\_Patel](https://community.sendbird.com/u/Jay_Patel)\
**Post date:** [February 26, 2021, 8:43pm UTC](https://community.sendbird.com/t/widget-chat-need-to-show-timestamp-with-messages/1723/11 "2021-02-26T20:43:07Z")

</div>

@Tyler, Thank you for your response.  
No, I am not doing anything different. What I found is somehow it was applying display: none; on the timestamp div.  
I solve this issue by doing some customization in widget.js where we have a for loop for the list of messages. I am using some conditions to figure out if the message should show a time stamp or not by comparing previous and next messages. Passed new variable showTimeStamp in chatSection.createMessageItem using which I am showing the timestamp at certain conditions.  
Like if there is a difference of minute in continuous messages then showing the timestamp and if the message sender and next message sender is different then showing timestamp and if next message is null that means it’s a last message then also showing the timestamp.  
Added a rapper div and used custom css to show timestamp properly. Attached screenshot of it.

![capture(1)](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/1X/fee4a43050ff1447faaa25fe5c22ccbfae1abcb6.png)

---

<div class="post-metadata">

**Author:** ![walter.rodriguez](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/walter.rodriguez/32/546_2.png) [@walter.rodriguez](https://community.sendbird.com/u/walter.rodriguez)\
**Post date:** [March 1, 2021, 2:35pm UTC](https://community.sendbird.com/t/widget-chat-need-to-show-timestamp-with-messages/1723/12 "2021-03-01T14:35:07Z")

</div>

Hello, I modified 2 files and made it cleaner.

![Screenshot 2021-03-01 at 14.34.26](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/2X/c/cc1ce6fef29cc8e97e0be56e87768425663ee7bb.png)

### chat-section.js

Red color is the removed code and replaced with the green code:

 ![Screenshot 2021-03-01 at 14.28.39](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/2X/5/5d082c865ebeae703078eb7c029691afd9d862b6.png)

And also here:

 ![Screenshot 2021-03-01 at 14.28.48](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/2X/9/90833f7cc8b449e0363016bc7fbdfbafe1ced9fa.png)

### utils.js

 ![Screenshot 2021-03-01 at 14.32.12](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/2X/f/f9e75374523921531d73fa2f905aa27564d11382.png)

Please try it out and let me know.

[chat-section.js](https://community.sendbird.com/uploads/short-url/eOhOOqsvPLxFC5IgUan96LdArSE.js) (20.9 KB)  
[utils.js](https://community.sendbird.com/uploads/short-url/2CMTUUptkuwe4p1dI2q5lxdO1cp.js) (5.0 KB)

---

<div class="post-metadata">

**Author:** ![tahiralvi](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/tahiralvi/32/407_2.png) [@tahiralvi](https://community.sendbird.com/u/tahiralvi)\
**Post date:** [March 1, 2021, 3:37pm UTC](https://community.sendbird.com/t/widget-chat-need-to-show-timestamp-with-messages/1723/13 "2021-03-01T15:37:05Z")

</div>

It is looking awesome.

---

<div class="post-metadata">

**Author:** ![Jay\_Patel](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/jay_patel/32/449_2.png) [@Jay\_Patel](https://community.sendbird.com/u/Jay_Patel)\
**Post date:** [March 1, 2021, 9:58pm UTC](https://community.sendbird.com/t/widget-chat-need-to-show-timestamp-with-messages/1723/14 "2021-03-01T21:58:49Z")

</div>

@walter.rodriguez Thank you. That is great. I merged your changed with mine and now it looks exactly same as full page chat. Here is the screenshot.

 ![Chat](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/2X/5/508fc53d63f13d450e49b713f7d7e4903db8d8cc.png)