Hi @carlaturner91
Many times, when you copy a shortcode from wordpress or from a website there is a small issue and is that double quotes (“) gets formatted into this quotes (“)
Simply change the wrong quotes and your shortcode will work back again
Best regards
Note: On my comment double quotes also got formatted again
Also, remember to change all double quotes by single quotes (‘) inside the attribute value
Hi Ruben,
Thanks so much! Unfortunately it is still not working.
[gamipress_button type="submit" label="I completed Goal 2" id="goal-2" onclick=“location.href='http://rubyseed.co.za/acwrimo/profile/’;”]
Maybe I am not understanding?
Hi @carlaturner91
From your shortcode pasted, I still seeing the onclick attribute with the wrong double quotes, it should be like:
[gamipress_button type="submit" label="I completed Goal 2" id="goal-2" onclick="location.href='http://rubyseed.co.za/acwrimo/profile/’;"]
Also, if after fix the double quotes it doesn’t works, try to change the type from “submit” to “button”
Best regards
The easiest way I found to make gamipress buttons is through the elementor plugin.
Through elementor add a button block. Style your button the way you like and then in the advanced tab insert the button id into CSS ID. In the CSS Classes enter gamipress-button
In your case;
CSS ID: goal-1
CSS Classes: gamipress-button
If you are set on using code you can use gamipress short code. And to style it you can enter CSS code in the Themes>Customise>?>Custom CSS
Here is what I have used.
[gamipress_button id=”Test1″ label=”GamiPress Website” onclick=”window.open(‘https://gamipress.com/’,’_blank’);” class=”button”]
The id is the trigger
Label is the label on the button
onclick is the js code to trigger. I use window.open for pages away from my website must include ‘_blank’
class is the style of the button and refers to the CSS code.
here is an example of the CSS code I have entered to style a button
.button {
background: #f4511e;
border: 2px solid #black;
color: white;
padding: 20px;
font-size: 20px !important;
font-family: “Times New Roman”, Times, serif;
text-align: center;
text-decoration: none;
display: inline-block;
}
.button:hover {
background: #f4511e;
border: 2px solid #black;
color: black;
padding: 20px;
font-size: 20px !important;
font-family: “Times New Roman”, Times, serif;
text-align: center;
text-decoration: none;
display: inline-block;
}
You can even use HTML code. This is useful if you want to use icons on the button.
here is an example.
The i class is the icon
<div class=”wrapper”>
<button id=”gamitutach” onclick=”window.open(‘https://youtu.be/W52HxozyN5g’,’_blank’);” class=”button button-primary gamipress-button”><i class=”fa fa-youtube-play” style=”font-size:16px;color:red”></i>GamiPress Tutorial – Creating an achievement type</button>
</div>
Hope this helps.
Thanks so much @slapesmushroomhouse – my button is working now!
🙂