X Integrity Theme: How to Add javascript popup to shortcode button

[gignnn]

Hello,

I created a website using the X theme with Integrity stack which can be found at the following URL: http://nnnpropertiesgroup.com

I am trying to incorporate javacript-coded popup boxes into my website for data capture through the popular third party software Leadpages.net. Basically, I want to replace my current web forms with these popup boxes – when a user on my website attempts to click on a call to action button created using your shortcode, I want a popup form to appear rather than for the user to be redirected to a form located on another webpage (fwiw, presently I am using Gravity Form shortcodes on various pages for data capture).

An example of the javascript code I want to add can be found here:

<script src="//static.leadpages.net/leadboxes/current/embed.js" async defer></script> <button data-leadbox-popup="140249e73f72a2:16897e839946dc" data-leadbox-domain="nnnpropertiesgroup.lpages.co" style="background: #32C88C;border-color: #32C88C;border-radius: 20px;color: #FFFFFF;display: inline-block;vertical-align: middle;padding: 16px 32px;min-width: 192px;border: 1px solid #32C88C;font-size: 1rem;font-family: Helvetica, Arial, sans-serif;text-align: center;outline: 0;line-height: 1;cursor: pointer;-webkit-transition: background 0.3s, color 0.3s, border 0.3s;transition: background 0.3s, color 0.3s, border 0.3s; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.6);">Click here to subscribe</button>

I want to run similar javascript in a couple instances on my website:

(1) In the buttons currently located in my topbar. For instance:

<a class="x-btn x-btn-rounded x-btn-small" href="https://nnnpropertiesgroup.com/submit-1031-requirement/" title="Submit Your 1031 Requirement">SUBMIT 1031 REQUIREMENT</i></a>

(2) Within various buttons incorporated onto pages on my website using the shortcode:

[button class="mbn" type="rounded" size="jumbo" href="https://nnnpropertiesgroup.com/about-us/" title="About the NNN Properties Group" icon="check-sign" circle="false"]About Us[/button]

Finally, I want to change the CSS so that the stock Leadpages.net css styling is replaced with the css styling for buttons in my current X Integrity Theme setup.

Does this make sense? Thanks for your assistance, and let me know if you need anything else to resolve these issues. Thanks again!

[christian]

Hey @gignnn,

That is not currently possible with the button element or shortcode because there’s no way to add custom attributes. With that said, you need to copy the generated HTML of the button using dev tools, add your custom attribute then paste the code in a Raw Content Element. Please watch this screen recording to see what I mean.

Thanks.

[gignnn]

Hello Christian,

Unfortunately, this is above my pay grade. Also, your YouTube video link doesn’t seem to work. Is it protected?

[rad]

Hi there,

It looks like it’s not available now. But with this, you’ll have to contact a developer since it’s not simply, binding javascript is another and not just adding attributes especially if the purpose of the code is tracking given that your button has URL.

Thanks!