Use Java Script in Button - Support | Kriesi.at

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
May 26, 2020 at 10:24 am #1216426
sftsengineering
Participant
Hi there!

I just searched here how to create a button with javascript instead of a simple link.
It seems that this is not possible using the button itself, but you are able to include the button in the codeblock with the javascript.

I am struggling to do so with the following codes for button and script though:

Button:
<div class="avia-button-wrap avia-button-center avia-builder-el-49 el_before_av_codeblock avia-builder-el-first "><a href=""><span class="avia_button_icon avia_button_icon_left " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title">Schedule a demo</span></a></div>

Code:
```
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>
<a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/xyz'});return false;">Schedule a demo</a>
```
Could you help me figure out how i get this button wrapped around the code?

Thank you!
Matt
- This topic was modified 4 years, 7 months ago by sftsengineering.
June 2, 2020 at 5:37 pm #1218816
Ismael
Moderator
Hey sftsengineering,

Thank you for the inquiry.

You have to apply the onclick attribute directly to the button markup.
```
<div class="avia-button-wrap avia-button-center">
	<a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/xyz'});return false;">
		<span class="avia_button_icon avia_button_icon_left " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>
		<span class="avia_iconbox_title">Schedule a demo</span>
	</a></div>
```
Best regards,
Ismael
June 3, 2020 at 9:10 am #1218976

sftsengineering
Participant

Hi Ismael,

thank you for the information on this. I am not a brilliant coder, so i might have missed something here :(

I did combine this and put it in a codeblock. However i get a link to the page the codeblock is on and the button is just text. Highly confused right now.
Also i might need the stylesheeet included somewhere and the script source?

I paste my codeblock below. If access to the page would help i can create an account of course!

thank you again
Matt

June 3, 2020 at 9:33 am #1218985
sftsengineering
Participant
I did manage to get a link to work with the script and all. It is almost a button now! ;)

Here is the code i used and below the page i implemented it.
```

<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>

<div class="avia-button-wrap avia-button-center  avia-builder-el-52  el_after_av_codeblock  avia-builder-el-last ">
	<a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/URL'});return false;">
		<span class="avia_button_icon avia_button_icon_left " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>
		<span class="avia_iconbox_title">Schedule a demo</span>
	</a></div>
```
June 8, 2020 at 9:08 am #1220394

Ismael
Moderator

Hi,

Sorry for the delay. Did you remove the button from the page? We found a “Schedule a demo” text in the page but it’s a Special Heading element, not a button or a code block. The button is probably not displaying correctly because there are no actual button element in the page, so the required stylesheets or css don’t exist. Try to set the Enfold > Performance > Disabling of template builder elements settings to the first option.

Best regards,
Ismael

June 8, 2020 at 5:42 pm #1220537

sftsengineering
Participant

Hi Ismael,

indeed i had to move it to a copy of the actual page, as it did break more things on top as well.
Parallax seems to not work
Counters on numbers dont load anymore

CalendlyTest

Also i tried your suggestion with the performance setting however it didn’t change anything interestingly.
The button is still just text.

Might it be necessary to load the css and the script by default somehow in the child theme directly and then call it from the page?
I am not sure if thats possible but there is a functions.php file and a shortcodes.js ?

June 11, 2020 at 1:13 pm #1221663
Ismael
Moderator
Hi,

Thank you for the update.

We forgot to add the class attribute to the link tag. Please try to use this one instead.
```
<div class="avia-button-wrap avia-button-center  avia-builder-el-52  el_after_av_codeblock  avia-builder-el-last ">
	<a onclick="Calendly.initPopupWidget({url: 'https://calendly.com/mattias-aggeler/demo-penumbra-en'});return false;" href="" class="avia-button  enavia-icon_select-yes-left-icon avia-color-theme-color avia-size-small avia-position-cter">
		<span class="avia_button_icon avia_button_icon_left " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>
		<span class="avia_iconbox_title">Schedule a demo</span>
	</a></div>
```
Best regards,
Ismael
June 11, 2020 at 4:56 pm #1221790

sftsengineering
Participant

Hi Ismael,

thank you for that. Now it does indeed look the way it should. For some reason though and i am not sure what it is, the button code (not the button itself but the calendly stuff), seems to break all the animations and the parallax effect.

<link href=”https://calendly.com/assets/external/widget.css” rel=”stylesheet”>
<script src=”https://calendly.com/assets/external/widget.js” type=”text/javascript”></script>

I dont know how thats possible. In my understanding thats just a script and a stylesheet to load.

Thank you again!
Matt

June 12, 2020 at 12:58 pm #1222022

Ismael
Moderator

Hi,

Instead of adding the script and css directly in the code block, try to properly enqueue or register the external scripts and stylesheets using the designated or default functions provided by WordPress.

Please check the documentation for more info.

// https://developer.wordpress.org/reference/functions/wp_enqueue_style/
// https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Best regards,
Ismael
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.