[PaulParticipant]

Hi there,

I have the following challenge: I have javascript code to start a widget which connects to a backend system. What I would like to do is put this code under a button. I did search on the forum and came only so far that I have to build a custom button function where I put my javascript code in, and call the button on my page by using it’s ID. But it doesn’t work and I can’t figure out why not. Do you guys have any idea what I’m doing wrong?

[PaulParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[PaulParticipant]

Hi,

Thanks for the quick reply. The code given as such implements a button your webpage where through customers can make appointments (it’s a hairdresser) and the appointment is written directly in the backend system. Also the code is automatically generated through this system.

I know I can submit the code in a page and have the original grey button, but I want to use a x theme button, because it looks nicer and is in line with the rest of the webpage.

On this under construction page you can see the implementation of the button as it is:
http://www.peterbrouwerhair.nl

Through this link on the homepage you can see directly on the right the button where I would like to put the code under. The button has the label Online afspraak maken.

http://www.peterbrouwerhair.nl?wpjf3_mr_temp_access_key=DrSU8d0eWWHOCNJ0HxJF

[LelyModerator]

Hello There,

Upon checking the code, the button is dynamically created so we can just add the style of the X theme button to the code to achieve the same look.

First copy the following CSS code in Appearance > Customize > Custom > CSS:

#salonhub { width: 240px; overflow: hidden; background: light gray; font-family: Arial, sans-serif; font-size: 12px; padding: 6px; }
#salonhubT { font-weight: bold; font-size: 14px; margin: 3px; }
#salonhubS, #salonhubB { float: left; }
button#salonhubB {
    padding: 0.643em 1.429em 0.786em;
    font-size: 28px;
    border-radius: 0.225em;
    color: #fff;
    background-color: #ff5200;
    margin-bottom: 0.25em;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    box-shadow: 0 0.25em 0 0 #ff4000,0 4px 9px rgba(0,0,0,0.75);
    display: inline-block;
    position: relative;
    border: 1px solid #dd3300;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    -webkit-transition: all 0.15s linear;
    transition: all 0.15s linear;
}

Then copy the following Javascript code in Appearance > Customize > Custom > Javascript

var salonhub = {
client:	‘pietjepuk’,
salon: ‘pietjepuk’,
header:	‘{fullname} – {address}, {city}’,
introduction: ‘In 3 eenvoudige stappen een afspraak maken, vul uw e-mail adres in om uw afspraak te bevestigen.’,
confirmation: ‘Uw afspraak is bevestigd op {date} om {time} uur.<br><br>{fullname}<br>{address}<br>{city}<br><br>Tel. {telephone}<br>{email}.’
}

var script = document.createElement(‘script’);
script.setAttribute(‘type’,’text/javascript’);
script.setAttribute(‘defer’,’defer’);
script.setAttribute(‘src’,’http://widget.salonhub.nl/a/i.js’);
document.getElementsByTagName(‘head’)[0].appendChild(script);

Lastly, copy the following where you want the widget to appear:
<div id='salonhub'></div>

Please note that on your code above, you have mix both CSS and javascript. That will not work.

Hope this helps.

[PaulParticipant]

Wow, thanks for the quick help! I implemented the code as you have given, but when I put the <div> code on my webpage it doesn’t show. Do I need to make a template change for this to work? Because I want it shown in only on content_band area.

Thanks for helping me understand this, it’s kind of new to me 🙂

[Paul RModerator]

Hi,

Sorry, the code above is using wrong quotes.

Please change the code in Appearance > Customize > Custom > Javascript with this.

var salonhub = {
client:    'pietjepuk',
salon: 'pietjepuk',
header:    '{fullname} – {address}, {city}',
introduction: 'In 3 eenvoudige stappen een afspraak maken, vul uw e-mail adres in om uw afspraak te bevestigen.',
confirmation: 'Uw afspraak is bevestigd op {date} om {time} uur.<br><br>{fullname}<br>{address}<br>{city}<br><br>Tel. {telephone}<br>{email}.'
}

var script = document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('defer','defer');
script.setAttribute('src','http://widget.salonhub.nl/a/i.js');
document.getElementsByTagName('head')[0].appendChild(script);

Hope that helps.

[PaulParticipant]

This did the trick! Thank you very much for your help!

[Rue NelModerator]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Author]

Posts