Adding <script> code to a button in X pro

[multimediamakers2]

Hi Team,

As always thanks for the great support.

I was following a thread on the APEX forum about adding Javascript to a Cornerstone or X pro button. (see: https://theme.co/apex/forum/t/pop-up-buttons-with-javascript/424) This post actually got me quite far in achieving what I’d like to achieve.

For my page https://www.azuremedical.com.au/coolsculpting I have created 3 buttons. When clicking om the Ask Free Consultation button, the viewer should see a popup window of the booking engine (healthengine): the code is provided here in a separate private message.

Following the thread as mentioned above I used a Text Element to create the button: Request a Free Consultation
Unfortunately the button is not in the same size as the other buttons, which is problem nr 1. When I added nothing really changed, at the contrary.

Problem nr 2 is that the pop up is not doing what it should do. It looks like this, see image.
It’s not a pop up but an embedded image and the functionality of the form doesn’t work either.

Not sure what I am doing wrong. Your help is much appreciated.
Cheers
Els

[multimediamakers2]

Hi Team,

Any suggestions?

I have employed someone to solve the issue (which has happened), but if possible, I’d like to see a response as I believe the community would benefit from that. I find it hard to add Javascript code in the X theme so hopefully someone can shine some light on the issue as I’m sure it is possible.

[lely]

Hello Els,

When I checked the link now, the buttons are of the same size already and it showing the form on the image. See this: https://screencast-o-matic.com/watch/cbiDI4l0Br. Although I am seeing a lot of errors from coming from the popup code: https://screencast-o-matic.com/watch/cbiDIzl0B0.

The script was deleted on the secure note. Please use the Preformatted text to add the script. Depending on the script, we can use converplug modal to implement what you want to achieve. Add the code of the form on the modal. Then to display it using a button click, we can use Convertplug Manual Display > Launch with a CSS class. We will enable that on modal settings then to activate it via button we will add the class. See this:

https://www.convertplug.com/plus/docs/working-with-the-manual-display-options-in-convertplus/

To make sure buttons have the same width, please set width property on each button element.

Hope this helps.

[multimediamakers2]

Hi, yes, in my previous message I informed you that I have employed someone to do this for me. I would like to know though how to do this in the future. Basically I want to use the “button” element and add code to it similar to this example

script data-he-id=“12345” data-he-button=“true” data-he-img=“HE_BOOKNOW_2.png” src=“https://healthengine.com.au/webplugin/appointments.js”>

[nabeel]

Hi again,

If I’ve understood it correctly then you can try this, add a button element and give it an ID for example my-btn-id and then you can add the following code in your Child Theme’s functions.php file:

add_action('wp_footer','btn_script');
function btn_script() { 
?>
	<script data-he-id="my-btn-id" data-he-button="true" data-he-img="HE_BOOKNOW_2.png" src="https://healthengine.com.au/webplugin/appointments.js"></script>
<?php 
}

Hope this helps!

[multimediamakers2]

Great thanks.

Just one more question.

The code I have been given already has an id <script data-he-id=“12345” etc…
How do I add an extra id?

A bit of context: I’m trying to add code for an online booking system. So the id=12345 is code I will receive from the booking engine. Could I simply add the id “12345” into cornerstone, knowing that “12345” is a client specific code within the booking engine?

[nabeel]

Hi again,

Yes sure, you can give id 12345 to your button element and then use the code like this:

add_action('wp_footer','btn_script');
function btn_script() { 
?>
	<script data-he-id="12345" data-he-button="true" data-he-img="HE_BOOKNOW_2.png" src="https://healthengine.com.au/webplugin/appointments.js"></script>
<?php 
}

Hope this helps!

[multimediamakers2]

Hi, Great.

I’ve installed and activated the child theme but for some reason it doesn’t appear via ftp.
When I go to wp-content>themes> only x appears, not x-child. Do I have to manually upload via ftp too, even if the child theme has been uploaded, installed and activated via Wordpress?

[nabeel]

Hi again,

If the child theme is installed and activated correctly, you should be able to see it, did you follow this article https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57 ? If not then you can check the link for setting up the child theme. You can also access the functions.php file via WP Dashboard > Appearance > Editor and edit functions.php file. Make sure the Child Theme is active and you’re making changes in the Child Theme.

Hope this helps!