[NEW PLUGIN]: 🔄 Inverted Repeating Group (Like a Chat app)

This plugin allows to revert the Repeating Group elements ordering. So to see / load next items in the list you have to scroll to the top (instead of scrolling to the bottom).

Use case: any chat / messaging app (e.g. Facebook, Telegram, WhatsApp…). The latest message showed on the bottom and you have to scroll to the top to load older ones.

Plugin features:

  • Revert the Repeating group elements order and change the scroll behaviour
  • Show scrollbar on the left (right) side of the Repeating Group
  • Hide/Show scrollbar

Check our demo to see the plugin in action: DEMO | EDITOR

Full Description, Documentation & Screenshots

Plugin Page:

I hope that this will be helpful for the Bubble community! :grinning:

Cheers,
Sam

4 Likes

Is this different than the @ZeroqodeSupport plugin of the same?

Hi @jared.gibb ,
Thank you for your question!
From what I can see, the main idea of both plugins is the same.
However, they have slightly different settings. Also, I’m not sure whether Zerocode’s plugin can update the settings dynamically (like in our demo) since they didn’t provide any demo for that.
And of cause, the technical realisation may be different

2 Likes

Nice! Thanks for sharing!

Thanks for the plugin, really helpful!
Firstly I’ve tried another one mentioned above and it didn’t work for me (some issues on mobile and really weird reversed order for characters).
Your plugin is fantastic!!
:pray:

Hi,
A couple of questions:

  • Will it work with other elements such as buttons, images, links, etc. apart from the text elements?

  • Can I use this plugin functionality to build a chatbot?

Thanks,
Shashank

1 Like

Hi Shashank,

Sure, you can use other element types as well! Here is a simple example with images, texts and links:

And yes, I don’t see why you can’t use for a chatbot :slight_smile:

I will be happy to answer any further questions you may have!

1 Like

Awesome! Thanks a ton :slight_smile:
I will reach out to you if I have any more questions!

1 Like

It’s very similar to Zeroqode’s, but I’d be interested if you can get a mouse wheel scroll to work like the scrollbar does. It does in this plugin RepeatingGroup to Chat Plugin | Bubble.

1 Like

Awesome, but this works on a full list repeating group ?

Hi there,

Yeah, it should work. If you want, you can provide more details for your case and I can create a demo for you :wink:

Thank you for the reply, when i do mobile apps i use full list to be height responsive, my chat runs inside a floating (both) group. Zeroqode plugin dont work in a full list group. A good test would be

Screen 380x1000
Floating group (both) same window size
Make a RP chat on top, only one row (like 80px height) and tell me if the plugin works

:pray: :pray: :pray: :pray: :pray:

1 Like

Thank you for a great example! I understand now your requirement. Unfortunately, this won’t work because the plugin needs a scrollable container

1 Like

Thank you anyway for try a solution. Anyway, any chance to be possible in future ?

Hi can you please help me how to set up that free plugin to make messaging function

Can anyone please make any video of the process and share

Great news, We’ve just updated plugin’s documentation! :books::star_struck:

Documentation

1 Like

Hi! have you adapted the plugin to the new responsive engine?

1 Like

Inverted Repeating Group v1.1.0 update:

  • Support of the new Bubble’s responsive engine

Demo links (unchanged): DEMO | EDITOR

Special thanks: @Diego

1 Like

Hi there! I’ve tried to implement exactly as you’ve shown in the demo, but I’m having a few issues. I’m copying a video of what my setup looks like, and screenshots of how I set up the RG and the Inverted RG elements.

  1. For some reason, the text has taken on right to left orientation
  2. It doesn’t show the most recent comments on load - they’re below the fold of the screen
  3. When I scroll to the BOTTOM, it adds items to the top of the list. It should be doing that when I scroll to the TOP of the list.

Do you know why I’m having these issues?

Video: Screen Recording 2022-02-10 at 1.57.38 PM.mov - Google Drive

Images:



Hi there,
The easiest way would be to follow the example in demo app’s editor: