Mark chat message as 'read' when a user scrolls past it

[laura5]

Hi Bubble Friends!

I am trying to mark a message as read when a user scroll past it in the chat feature I built. ChatGPT suggested using the HTML toolbox, a Javascripttobubble element, and a workflow that calls the Javascript to Bubble element.

I built a test page with a repeating group containing ‘chat’-messages’. Within this repeating group, I put another group (‘Group Chat - Messages’) that contains a message where the current user is the 'recipient’ of that message. Within the Group Chat - Messages, the JavascripttoBuble element and the HTML element are present. Please see screenshots below for each:

JavascriptoBubble element:

This HTML element is a marker and is supposed to grab the unique ID of the parent group’s chat message.

HTML element:

Then, there is also a global HTML element at the top of the page with the HTML pasted below:

I have a super simple workflow to collect the JavascriptotoBubble element’s value. Please see screenshot below:

In the console, I just see [market] render null. No value is being passed. The data type logging the raw payload is also blank.

What is the problem and how can I fix it? Is this a good way to mark a message as read, or is there another way that would be easier? I need a solution when a user has a backlog of unread messages that they need to scroll back in time to get to. Then I want to their unread message count to go down.

Here is a link to the test page: Thrive on a Dime

One more screenshot showing the page editor:

Thank you all for your help!

Laura

[boston85719]

I personally decided to simplify this type of ‘read receipt’ by marking all unread messages as read once the conversation is opened. The requirement to build only once it’s scrolled past in my mind is more work than the feature provides benefits.

[laura5]

Hi @boston85719,

Yes, you’re probably right. Unless someone else has an easy solution, I will probably go this route.

Thanks again.

[boston85719]

You can use a plugin that is to detect if it is in view. Put it in RG cell, with unique id that uses the cell index . That at least is the starting point in my mind for how to achieve the feature.