👀 Element Viewport Detector - New Plugin from Zeroqode

[levon]

Element Viewport Detector - This smart plugin will trigger an event once a certain element enters user’s viewport. This should help you better understand user behavior in your app, such as number of times a certain element/group/page has been viewed (including individual cells in repeating groups) or also trigger certain workflows and UX interactions when you know that user has seen a particular part of your app.

For details, screenshots and demos please visit the plugin page at Element Viewport Detection Plugin for Bubble | Plugin for Bubble by Zeroqode

If you have questions about this plugin or need any help, please reach out through Zeroqode Forum at https://forum.zeroqode.com

Levon Terteryan

Founder @ Zeroqode & Bubblewits

Bubble Templates
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-code Development Services

[userar]

Does this work with horizontally scrolled repeating group cells?

[userar]

@levon could you please confirm

[Julia]

Hi, @userar!

Apologies for the slow reply

We have fixed the bug in the plugin related to the horizontal scrolling and updated it. Please have a look at Live Demo: https://zeroqode-demo-08.bubbleapps.io/element_viewport.

Now it works with horizontal scrolling

Happy holidays!
Best, Julia.

[tjc4]

@levon

This smart plugin will trigger an event once a certain element enters user’s viewport.

Can this do the opposite? Trigger an event when an element exits the user’s viewport?

I’ve got a single page app with a video player. If a user starts playing a video and then navigates to a different section of the single page app the video player continues to play (because it’s on the same page and only hidden).

I want that video to be paused. If I can trigger a workflow when the video element is no longer in the viewport I could accomplish this (I have a workflow action for pause). I just need to figure out the trigger part. Could this provide the trigger?
So I’m looking for something

[Julia]

Hi, @tjc4!

Thanks for reaching out!

Unfortunately, this is not possible to implement through this plugin. Apologies for the inconvenience. I suppose you can implement this through the JS. Or as a workaround, here is one more way that can be helpful. Set the Condition: do when condition is true- Current page scrolling position > 300 trigger the Pause action.

Hope this will help you!
Best, Julia.

[robert3]

The trigger doesn’t seem consistent. I am using this is a repeating group and its trigger is infrequent. What triggers it and why might it not be working?

[Serg]

Hi @robert3, thanks for reaching out, and sorry for the delayed reply.

@robert3

What triggers it and why might it not be working?

We’ve tried to describe how it works into the plugin element field documentation:

@robert3

The trigger doesn’t seem consistent. I am using this is a repeating group and its trigger is infrequent.

To be able to help you, would it be convenient to share a screencast with your use case flow and plugin setup?
It would allow us to identify any possible issue much faster.

Looking forward to your reply.

Regards,

[robert3]

Take a look at this screen capture

Witness'd Network - 31 March 2022

[Serg]

Hi @robert3, thanks for the provided screencast.
We’ve tried to reproduce the same logic on our side (trigger a workflow after each X RG element scroll) and it worked properly.
Please see and use for reference the following setup example: zeroqode-demo-08 | Bubble Editor

In case after rework the issue will persist, please let me know

Regards,

[robert3]

@Serg Here is the workflow for mine

Do you think the multiple conditions are a problem?

Here is the element itself.

Do you think the pixel only being 1x1 is a problem?

The group only shows in the repeating group when this condition is met

Would having the viewport detector in a group that is shown and hidden a problem?

Can you try and replicate similarly? How you have it set up is not the same. I want the group to only appear is certain conditions are met. This is a social media feed so it had 4 groups with conditions.

1. Shows when the post is an image
2. shows when the post is a video
3. shows when the post is a share (repost)
4. shows an ad (every 3 posts - this is the group that has the viewport detector element in it)

[robert3]

@Serg ok, I think I’ve narrowed it down to being an issue when the repeating group is not set to “full list”. If you use vertical scrolling or ext. scrolling it doesn’t trigger consistently.

Can you look into this?

Robert

[Serg]

Hi @robert3, thanks for your reply and sorry for the delay from our side.
Allow us to check the provided information and provide a feedback asap.

Thank you for understanding.

Regards,

[robert3]

Thank you. This is a critical element of the app, so I appreciate it.

Robert

[robert3]

Hi @Serg

Any updates from your side?

[Serg]

Hi @robert3,
I’m afraid that so far there are no preliminary timelines for the investigation.
Once the developer team will share the investigation results, I will let you know asap.

Thank you for understanding

Regards,

[Serg]

Hi @robert3, thank you for your patience.

We have pushed a plugin update, that has fixed the issue related to triggering events on scrolling.

To check changes, please upgrade your plugin to the latest version (Version 1.6.0: added possibility to bind scroll event to repeating group id) and give it a try.

On setup, please be sure to consider the following notice:

Please let me know if there is any other plugin-related questions that I can help with.

Regards,

[robert3]

Still not working consistently. Can you show me a demo of it working?

[Serg]

Hi @robert3, please see the following demo pages:

• RG with Ext. vertical scrolling
• RG with Vertical scrolling
• RG with Full list

Regards,

[logan2]

Does this plugin not work within a popup?