How To Get Thrive Leads Popup To Show Upon Button Click With Elementor

A little while back I was having trouble with getting the Thrive Leads popup to show upon button click.

The page builder I use to design my website is Elementor.

I had been searching all around for a solution, since the one provided to assign a class to the button wasn’t working. 

Here’s the step-by-step solution I came up with to get a thrive leads popup to show upon button click with Elementor. 

Watch the video and go through the steps below as you follow along.

Step 1: Go To The Thrive Leads Dashboard And Create A New ThriveBox Popup

The first thing you need to do is head to your Thrive Leads dashboard and create a new ThriveBox if you don’t already have one.

The ThriveBox that you create should simply be a page with the optin box on it. 

I recommend doing a full-screen style popup to likely increase the conversion rate.

Once you’ve got the ThriveBox created, then simply make note of the id number which will need to be copied over later.

Step 2: Create The Button You Want To Trigger the Popup And Place The Shortcode Box Above It

Next, you need to create the button if you haven’t already that you want to be used to trigger the ThriveBox popup upon button click.

Be sure to then update the page and load the page in a new tab on the front-end.

Step 3: Right Click, Inspect Element, & Copy HTML Code

Once you’ve got the page loaded in a new tab, simply right click on the button and inspect the element.

From there, you need to right click and edit as HTML.

This will bring up the code of the button widget itself, which you should then copy.

Step 4: Go Back To Editor And Paste In HTML Code Of Button In Between the ThriveBox Tags

Now that you’ve got the HTML code copied, head back to the screen with you Elementor editor and paste the code into the shortcode widget.

The code needs to go in between the the ThriveBox tags that are found when you go to edit your ThriveBox from inside Thrive Leads.

Make sure that the id numbers match what is shown in Thrive Leads and in your shortcode in the editor.

Step 5: Go To The Advanced Settings Of The Button Widget And Hide All

The finishing touches are simply going into the advanced settings of the button widget below the shortcode.

You need to scroll down, click on Responsive, and then hide on all the devices.

This ensures that only the shortcode appears on the front-end of the website.

Step 6: Update & Test Button Click Popup On The Front-End

Now all that’s left to do is hit update!

Then go to the front-end of your website and test the popup upon button click.

Conclusion

Congrats! 😀👍

You should now have your Thrive Leads popup working well with Elementor and triggering whenever a visitor clicks the button.

If you’ve got any further questions, then comment below and I’ll be sure to get back to you.

Affiliate Disclaimer

I hope you enjoyed this post. This post may contain affiliate links, meaning I get a commission if you decide to purchase through my links at no additional cost to you.

  • Penelope says:

    How do you add a Thrive Box in Elementor? I’m not seeing it anywhere.

    • David Sandy says:

      A Thrive Box is a popup that requires a trigger. So, you need to create a button in Elementor, then copy and paste the code provided for the Thrive Box into an HTML widget. You can then put the HTML code for the button inside the HTML widget where the trigger should go. Once that works, you can hide the original button widget, and then the HTML widget will be the only thing that displays on your site to trigger the popup. This ensures the button click will cause the popup to appear.

  • David Sandy Ebook Trilogy Books

    Get All 3 Of My Ebooks... For Free!

    >
    3 Shares
    Share
    Tweet
    Pin3