Pop up buttons with JavaScript

[INcroatia]

Hi X,

I guess I need to continue email support over here now. I’ll try to copy it all so it’s easier to follow.

Original Question: I would like to add this javascript code to my advanced button (or just a regular button) without it changing the look of the button:

<a style=' font-size: 1.5em;text-transform: uppercase;text-decoration: none;font-family: Arial, Helvetica, sans-serif;padding: .3em .6em;letter-spacing: .05em;color: #333;' href='javascript://' data-opf-trigger='p2c84010f24'>SEND ME THE FREE VIDEO</a><script type='text/javascript' async='true' src='https://app.ontraport.com/js/ontraport/opt_assets/drivers/opf.js' data-opf-uid='p2c84010f24' data-opf-params='borderColor=#fff&borderSize=3px&formHeight=337&formWidth=60%&popPosition=mc&instance=171663186'></script>

The pop-up sign up form from should appear upon clicking on the button.

Pages with the buttons:
http://dev.hyperbitsmusic.com/free/loudness/
http://dev.hyperbitsmusic.com/free/saturation/
http://dev.hyperbitsmusic.com/free/movement/
http://dev.hyperbitsmusic.com/free/creativity/

X Response:

Please use this code in a Text element. I’ve removed the inline style and added the x-btn class.

<a class="x-btn" href='javascript://' data-opf-trigger='p2c84010f24'>SEND ME THE FREE VIDEO</a><script type='text/javascript' async='true' src='https://app.ontraport.com/js/ontraport/opt_assets/drivers/opf.js' data-opf-uid='p2c84010f24' data-opf-params='borderColor=#fff&borderSize=3px&formHeight=337&formWidth=60%&popPosition=mc&instance=171663186'></script>

Me again: Problems with this button are persisting. When I paste it on the page (exactly as you gave it) it makes everything under it disappear including the footer. I also tried making it a class because this button is a bit small and on hover it disappears (x-btn.my-btn-pink) but it didn’t work. Any suggestions?

thanks a mil!

[alexander]

Hi there,

I’m not sure why your content is disappearing, but it sounds like there’s an HTML syntax error. As this deals with custom code integration, it’s a bit outside the scope of support we can offer, so I won’t be able to help solve why your popups aren’t working. However, let me demonstrate how the X button classes can be used so you can add them to any buttons you’re working with.

For example, you were originally using a link with an inline style giving it a specific look.

<a style="color: #333;" href="#">Link</a>

To make any anchor element look like an X button, first ensure it doesn’t have a inline style attribute. Then add a class of x-btn. It should look like this:

<a class="x-btn">Link</a>

You can add this to any links on your site to give them the X button styling.