Email capture pop-up – trigger by click on button on every page

Hi @vpedrozo

I hope you’re well today!

I suppose you are referring to that “Get 10% off” bar/button at the bottom that slides-in from the bottom of the page, right?

It is possible to set something similar with two exceptions (more on that below).

First, you need to have your popup already made and have it enabled “CLick” as trigger. Within that setting you got checkbox to render trigger button so enable it and copy given shortcode.

Now you can create a new slide-in and configure it to show up automatically on any page(s) you want, configure it’s appearance and behavior etc. You would want to disable CTA buttons in slide-in settings too.

Then put previously copied shortcode in slide in content area and that’s it. Publish slide-in and it will show with a “click” link – once the link is clicked, the popup will appear.

The exceptions mentioned earlier are:

1. you will need to style that button with CSS additionally as otherwise it will look like a simple link

2. clicking on the button will not close the slide-in; it will open popup but slide-in will remain closed.

Alternative solution:

In your popup in click trigger settings enable “Trigger by clicking on existing page element” insetad of “Redner a trigger button” and in the “CSS Selectors” field put this:

.hustle-button-cta

Then in slide-in settings instead of adding shortcode to content, simply enable single CTA button and set its behavior to “close the slide in”.

This way the button will already look “like a button” and slide-in will be closed before opening popup.

Best regards,
Adam

Hi Adam! Thank you, I really appreciate that you took the time to write the instructions. I followed the steps for the alternative option you mentioned, but I must be doing some steps wrong because nothing happens when I click on the slide-in button.

I took screenshots of the pop-up behavior settings and of the 3 different settings I tried in the slide-in. Unfortunately, none of the three slide-in settings made it so the pop-up opened when I click on the button

Pop up settings: https://ibb.co/RhjpsjT

Slide in settings 1: https://ibb.co/fFm13Hs
Slide in settings 2: https://ibb.co/YQ8fBqf
Slide in settings 3: https://ibb.co/QnTccH7

The pop-up is published, and the slide-in is just in draft, I tested it using the preview feature in the plugin.

Any suggestions?

Hi @vpedrozo

Hope you are doing fine!

We’ll need to perform a further check in the popup and slide-in configuration. Could you help us sharing the module so that we could review the existing settings?

To export the modules please go to Dashboard > select the popup/slide-in > Gear Icon of the module and select the option to export it. Please take a look at the following doc on for more info:
https://wpmudev.com/docs/wpmu-dev-plugins/hustle/#module-dashboards

If you are concerned about any sensitive information in any of the modules, then you can duplicate it, remove any sensitive information, and then export it.

You can share the export file via Google Drive, Dropbox or any cloud services in the next reply.

Looking forward to your response.

Kind regards

Luis

Hi Luis, thank you!

Here are the links to the module files:

Pop up: https://drive.google.com/file/d/1qDT8aeivwOj1zzQ4hoLw_g1phYWV0gKe/view

Slide in:

https://drive.google.com/file/d/1AkS-h8PMwfoun2bFYz132SzXWt85vIfu/view

Hi @vpedrozo,

I tested the popup and slide-in on my site and it worked out of the box without any issues.

I could notice you have configured the Slide-in to work on /aviso-de-privaxxxxx, the slug is masked with xxx.

Maybe you are checking on a different page?

A minor suggestion would be to remove the class name added inside the Slide-in, as seen in the screenshot:
https://imgur.com/JaJqqdy

The class name is only required inside the Popups Click Trigger, which you have already added. You can replace the above with #:
https://imgur.com/panBVYG

I also checked your /aviso-de-privaxxxxx page, and could notice the popup does load.

Screenshot at 17:06:40.png

Could you please check and advise if I’m missing out anything so that we could assist further if needed?

Best Regards,

Nithin

Hi Nithin – thank you! It’s working now. The slide-in and the pop-up are active, and the functionality of just opening the pop-up when the user clicks on the slide-in is working.

I have just one issue: how can I customize the width of the slide-in on mobile? Right now it’s covering the entire width of the page. I’d like for it to be 15-20%. I’m using the “custom mobile settings” feature and set the slide-in size to 20% but it’s still the full page.

Here are the screenshots of the slide-in on desktop and mobile:

https://ibb.co/4JzkcLJ
https://ibb.co/y6C76VM

Do you have a CSS custom code to fix the issue on the mobile page?

Hi @vpedrozo,

I was unable to find the slide-in from the screenshot on the mentioned page. Can you please share a page where we can find the slide-in to check things further?

Additionally, it seems that the slide-in you mentioned is different from the one you provided the export of. It would be beneficial if you could include the export of the slide-in from the screenshot in your next response.

Kind Regards,
Nebu John

Hi Nebu – thank you! The slide-in is active only on this URL at the moment: https://uncorkmexico.com/aviso-de-privacidad/

I downloaded the slide-in module so you can review:

https://drive.google.com/file/d/1XCJkBx89wiuEfVxrNx8j4ddZ2-leK7g1/view

The functionality is working.

My final issue is just the width of the slide-on in the mobile view. Right now it’s covering the full width of the screen, but I’d like it to be about 15 or 20%. The goal is that the mobile view of the slide-in should be similar to the desktop (just in the bottom left corner)

Thanks again!

Hi @vpedrozo

I checked your slide-in and apparently the custom width setting in “Mobile” appearance is not applied in mobile view. I’ll need to test it more on my end with my own slide-ins and popups and if I can fully replicate it, I’ll report it to our Hustle Team as a bug to be fixed with one of future releases.

For now, you can use this CSS as a workaround:

@media only screen and (max-width:792px) { 
	.hustle-main-wrapper {max-width:20%!important;} 
}

Simply add it to the “Custom CSS” in “Appearance” settings of the plugin (in “Desktop” tab) and in “Mobile” tab of appearance settings make sure that the “Slide-in size” option is set to “Default size”.

You may need to clear all cache on site/server/browsers but it should then work out of the box.

Best regards,
Adam

thanks for your help, really appreciate it! This worked perfectly, I’ll mark this thread as resolved.

Hi! I have one more question on this topic. My website is in English and Spanish, so I tried to set up two sets of slide-ins + popups (one that only shows up in English and one on the Spanish pages).

The functionality works, but every time a user clicks on the Spanish slide-in, it still opens the pop-up in English. Here’s how I set it up:

SET 1 – SPANISH?

Slide-in name FREE TOTE – SPANISH + LOCAL, it has 1 button that redirects to .hustle-button-spanish

Pop-up name FREE TOTE – SPANISH + LOCAL, behavior triggered by css selector: .hustle-button-spanish

SET 2 – ENGLISH?

Slide-in name FREE TOTE – ENGLISH + LOCAL, it has 1 button that redirects to URL .hustle-button-cta

Pop up: FREE TOTE – ENGLISH + LOCAL, open behavior triggered by css selector: .hustle-button-cta

Could you help? Here’s the google drive with the modules for the slide-in and pop ups mentioned: https://drive.google.com/drive/folders/1oLhg4JSXGd-h1Pa8idguGe4Lhfa-uiIX?usp=drive_link

Hi @vpedrozo,

I have reviewed the configuration for both the pop-ups and slide-in, and I did not come across any noticeable issues. It looks like you have the slide-in disabled on the website at the moment. Can you please publish the slide-ins and share a page URL where we can replicate the issue to check this further?

Kind Regards,
Nebu John

Hi Nebu! Sure. Here are the URLs.

English pages: uncorkmexico.com – this set is working correctly, it opens the slide-in in English and the pop-up in English

Spanish pages: uncorkmexico.com/es/ – that’s where I’m getting the issue. It opens the slide-in in Spanish, but once you click it shows the pop-up in English.

To clarify: the Spanish slide-in is set up so it would open a pop-up in Spanish with CSS selector .hustle-button-spanish

I cleared the cache and everything, but it keeps on showing the English pop up.

Hi @vpedrozo

Thanks for sharing the slide-ins.

The issue here is in configuration. I see you have followed the “alternative solution” from my post here

https://www.ads-software.com/support/topic/email-capture-pop-up-trigger-by-click-on-button-on-every-page/#post-16815405

This isn’t intended to work this way – I wasn’t aware we are discussing multiple “sets” of slide-ins. It will work but only for one “set”.

I see how you tried to differentiate those slide-ins by setting “redirect” for CTA button but it will not work this way because redirect is a different thing. It’s not related and that solution is based on the CSS class of the CTA button. Setting redirect URL for button does not change its class. Both small popups have the same class of .hustle-button-cta

So what you may do here would be this:

1. remove those hustle-button-cta and hustle-button-spanish texts from CTA button redirect URL field – they are not needed and would not work.

2. for both “big” slide-ins, set the class in click trigger settings to be the same

.hustle-button-cta

3. and add additional visibility conditions to them to only show them on English/Spanish pages accordingly. For that you would want to use the “Specific URL” visibility condition and

a) for the English slide in, set it to “All URLs except” adding Spanish URL of homepage and Spanish URL of other pages using wildcard

https://uncorkmexico.com/es/
https://uncorkmexico.com/es/*

b) for the Spanish slide in, set it to “Only these URLs” adding the same two URLs as above

Best regards,
Adam