Info Pop-Up ★Pro★ , advanced tool for Elements

HI guys, another ‘Pro’ component is here, after the Free version I’m happy to introduce

Info Pop-Up Pro.

Info Pop-Up Pro has a huge range of advanced options, cookies, URL keys, scroll triggers, countdown timers and bars, video/audio with local/global auto-stop on close, entry/exit animations, shine effects, page overlay with blur, repeat/show logic, and full layout customization. It adapts to shops, promotions, alerts, targeted campaigns, and many other scenarios. It’s not one component , it’s a multitude of advanced, deeply customizable components.

## Some features

URL Key Shows the popup only when the page address contains a certain word, so you can have different popups on the same page. DEMO ONLINE

Shows Choose how many times the popup appears before it goes away, from a one time notice to repeated reminders.

Appear After Delays the popup from showing up until after the page loads, so it doesn’t get in the way right away

Shows on Scroll Triggers the popup to appear when the visitor scrolls to a specific spot on the page that you choose. DEMO ONLINE

Close on Scroll Closes the popup (and mutes any video or audio inside) as soon as the visitor starts scrolling down the page.

Close on Countdown Automatically closes the popup after a timer runs out, and you can show a progress bar or a number countdown with your own text before and after the number.

Entry Animation Lets you choose how the popup appears on screen with many motion styles like fade, slide, tilt, bounce, flap, pulse, and flip drops. DEMO ONLINE

Exit Animation Adds a smooth fade out when the popup closes, with three speed options to choose from. DEMO ONLINE

Exit Media Stops any video or audio when the popup closes, either only in that popup or across all media on the page.

Shine Adds a moving highlight effect across the popup to grab attention, with full control over position, size, angle, animation, color, and blending mode.

and more, and more…

info-pop-up-pro_multithemes_003

:white_check_mark: Use it for a flash sale with a countdown timer, a shine effect, and any video stops the moment the popup closes.

:white_check_mark: For a specific product promotion show the popup only on a certain web address and trigger it when someone scrolls to that item.

:white_check_mark: As a discount reminder let it appear a few times, then close quietly when the user starts scrolling, with a smooth animation each time.

:white_check_mark: For a music release show a popup with a video teaser only on pages that have the track name in the address, and stop the audio when closed.

:white_check_mark: For an event reminder let the popup appear a couple times with a countdown to the show date, then fade out when the person scrolls away.

:white_check_mark: For a content creator trigger a subscription popup when someone scrolls halfway through an article, with a soft animation and no annoying repeats.

if you have advanced needs or want to make your site visits more engaging,Info Pop-Up Pro is the right solution because it adapts to any situation, so the ways to use it are endless.

info-pop-up-pro_multithemes_005

Three tracking/placement areas in Info Pop-Up Pro:

:check_box_with_check: Content area — where your main message goes (text, images, video, audio)
:check_box_with_check: Button/Link area — “Read more..” for calls to action or privacy links
:check_box_with_check: Close area — Close Icon + Close Button (manual close controls)

info-pop-up-pro_multithemes_004

And it comes loaded with ready to use examples for different situations, all organized and just waiting for you to pick one. #### Explore demos!

Info Pop-Up Pro is available in the Marketplace!

Now in promo :grinning_face:

thanks!

Info Popup Pro is a super-cool component! Its incredible versatility and seamless integration make creating professional, engaging popups effortless. A must-have tool for any user looking to add polished, high-quality interactions to their web projects. Simply brilliant!
Well done, Michelangelo! :flexed_biceps:

I just purchased Info PopUp Pro :slightly_smiling_face:

It’s truly a fantastic product – highly recommended. Thank you!

Best Tzatziki

Very well done Michelangelo :+1:

And thanks for giving us a free version :clap:

Thanks Massimo that’s exactly what it’s designed for!!

Marchus thanks! :folded_hands:

Thank you so much for your support Tzatziki, if you have any questions let me know!

This is a fantastic component, and it will see a lot of usage on my sites.

Thanks Robin :folded_hands:

I’ve spend a lot of time in development and it should really be useful for advanced situations, and not just for a little use; that’s where thefree come in

Thank you very much, and let me know if you need any support. :folded_hands:

I’m looking forward to seeing the component in action!

@MultiThemes

I do have a question.

I have been using the component to set up a consent popup to replace the custom one I had written. It is based on one of your examples. I have configured it to display only once. However, I do not see a cookie being saved when the user clicks the ACCEPT button, unless it is being stored in a location that is not visible in the web inspector.

Where is the cookie being saved?

Or is one being saved? I have setup a name for the cookie, but I never see that name anywhere in storage.

I would also like to have the cookie set to FALSE if the user clicks on the DECLINE button.

Finally, I need to know where the cookie is located so I can clear it if the user chooses to clear the privacy settings.

There are so many more cases where I will be using this component that I will now have to go and do a deep dive on my sites.

Is there a way to control the z-index of the popup?

When I use it for a cookie consent popup, I place it in my global footer in order for it to work properly. But then its z-index is lower than the menu bar so the overlay does not cover the menu.

I finally did figure out the cookies on my own. They are only being created when the site is deployed, not in preview.

Hi Robin and sorry for the late reply, I took a short break over the weekend after the release :sun_behind_small_cloud: :person_walking: .

Info Pop-Up Pro is designed to show visitors a notice that the site has a privacy or cookie policy, with an optional link to that page. When the visitor closes it, the component quietly remembers that in their own browser, so the popup does not keep showing up on every visit. That is its purpose.

The component works entirely on the visitor’s browser side, it is self-contained and does not interact with any other element on the page.

That said, for static sites that do not collect user data dynamically, this kind of notice is often all that is needed, and it covers that use case well.

If your project requires a more advanced solution for managing user consent, that would be a different product ( Still missing for Elements). It is something I find interesting and may explore down the road. If that is something you would find useful, feel free to share your thoughts.

Regarding the z-index, that is a fair point! just a quick question, the menu is a Global?

I will look into it and keep you posted.

Hope this helps!

Yes, the menu is a global. I experimented with making the info popup global, but that did not work well for my use case.

Upon reevaluating, I realize that I can simply add the info popup to the global menu, which will function correctly and allow access from every page without requiring it to be a global element.

I do have another question.

Is it possible to trigger a second info popup from within the first one?

In my cookie consent info popup, I want the Privacy Policy link to open another info popup using the scrolling text option so someone can read the privacy policy without having to enter the site.

I suppose if this is not possible, I can figure out some way of triggering a modal to handle this; it just seemed easier with the info popup.

Robin a new version will be available soon with a z-index option.

z-index

I don’t recommend opening multiple modal windows at once; there should only be one level above the site. As an alternative, you could consider using a pop-up with informational text. You could also add a tab behind it that forces the user to look elsewhere for the button to close it.

in this demo the the ‘close’ button is a custom link, so, you can put it inside another element

Name @click.prevent Value acceptCookies()

You can turn any element into a close button, it’s the ultimate freedom :smiling_face_with_sunglasses:

(in this case, remember to disable the standard one).

hope this helps

Upon further reflection, I came to the conclusion that subjecting the user to numerous popups was not the best approach.

QUESTION: Is there an easy way to clear the consent cookie, other than the we inspector?

The easiest and most effective way is to change the cookie name in the component and republish the site. This effectively resets consent for all returning users, since the previous cookies will no longer be recognized.

Technically, the old cookies are not deleted from users’ browsers, but simply ignored because the site uses a new identifier. In practice, this behaves like a full reset of the consent system.

Reducing the cookie duration (for example from 30 days to 1 day) can also be useful in specific cases, but it does not solve the issue for users who have already visited the site, since their existing cookies remain valid until they expire. It is mainly helpful for shortening future persistence, not for an immediate reset.

@handshaper I forgot, try to use logical names for the cookies. It could be a sequential number or a date (without spaces), so you always have control without having to remember.
In the target page, I suggest using the target names as well. Over time, it helps maintain order.