Having Header Button Open Link as Popup

[vaughanmatt]

Hi -

I’m attempting to have the button in my header open up a pop up instead of opening up a new page but I can’t see where I would put the code. Instead of it simply linking to the URL (as it is now) I need it to link to the following:

<a data-localmed-toggle=“modal” href=“https://www.localmed.com/widgets/7eddc8f6-f118-4674-94c1-94591bee1b1e/">Schedule Online

I can’t seem to figure out where or how I would do that within the header editor. Can you help?

This is the website: https://kloosterfamilydentistry.com/

[vaughanmatt]

Also, I already have the Javascript SDK on my page in the correct place - after the opening tag. The issue is being able to attach that above code to the button instead of it being just a link.

[tristup]

Hi Matt,

I would suggest you add the button HTML with the raw_content or add data-localmed-toggle attribute to the button element through a custom attribute.

And add the JavaScript code to Theme Options > JS.

If still that not work, please check the HTML structure is needed to get the localmed work.
This may help: https://codepen.io/kammon2/pen/ZJZMeq

Please remember that we don’t offer any support to custom codes.

Hope this helps.

Thanks

[vaughanmatt]

Thanks so much, this works perfectly!

How would you add this same thing to a button within the site? Meaning I want to have a button function the same way but it is not located within the header? It doesn’t appear that I have the same areas to add these customization details.

Can I add a button that has this ability to the sidebar via a widget?

[ruenel]

Hello Matt,

You can add a button element in the header builder or Pro Editor. If you want to add a button in the sidebar, you will have to go to Appearance > Widgets and insert an HTML widget to the main sidebar havd place the HTML code:

<a data-localmed-toggle="modal" href="https://www.localmed.com/widgets/7eddc8f6-f118-4674-94c1-94591bee1b1e/">Schedule Online</a>

Hope this helps.

[vaughanmatt]

Hi - This isn’t really helping as I’m not sure what the shortcode for the button would be in the widget area. I’m trying to copy the exact same button I currently have in the header and put it in the HTML widget area but I’m not sure where to copy the code from. I’m looking to copy that so I can use it throughout the site.

[tristup]

Hi Matt,

What I have seen in your site that target attribute is set as _blank and which let the URL open in a new window and blocking the default options for modal.

Please unchecked the New Tab section of button to avoid it.

Hope that works for you.

Thanks

[vaughanmatt]

That is not what I am asking. What is the shortcode or HTML code I would use to replicate the button that is in my header so that I can use it in my sidebar.

[ruenel]

Hello @vaughanmatt,

It is best that you save your button styling as a preset and then go to Pro > Global Blocks. Create a custom block and then apply the preset to a content area modal element. Save your block and take note of the global block shortcode. With the shortcode, you can use this to display in your sidebar.

Hope this makes sense.

[vaughanmatt]

I was not aware of how to do that with the Global Blocks. Thank You!

[marc_a]

@vaughanmatt,

It’s our pleasure to help you.

Thank you.