My widget is not working

Hello,

I want to implement the following code in my site, but it isn’t working. I have put this in a textbox in a row but it doesn’t show. How do I make this work?

<!-- Plaats de volgende code op uw website -->
<div id='salonhub'></div>
<style>
	#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; }
</style>
<script>
	var salonhub = {
		client:	'peterbrouwer',
		salon: 'peterbrouwer',
		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><a href="mailto:{email}">{email}</a>.'
	}
	
	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);
</script>
<!-- Einde -->

Best regards,

Paul

Hi Paul,

Thanks for reaching out.

May I know how you’re adding it? I just added it in content area element and it works, there is a button and when clicked, a popup appears.

Thanks!

Hi Rad,

Thank you for your reply! I added it in a text area box, which shows empty on the site. When I added in a content area box, I get the same result. Not sure what I am doing wrong. I did migrate the site from http to https recently. But everything else seems to work fine except this script.

Did you test it with https?

Hello @peterbrouwerhair,

Please use content area or raw content element and insert this instead:

<!-- Plaats de volgende code op uw website -->
<div id='salonhub'></div>
<style>
	#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; }
</style>
<script>
	var salonhub = {
		client:	'peterbrouwer',
		salon: 'peterbrouwer',
		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><a href="mailto:{email}">{email}</a>.'
	}
	
	var script = document.createElement('script');
	script.setAttribute('type','text/javascript');
	script.setAttribute('defer','defer');
	script.setAttribute('src','//widget.salonhub.nl/a/i.js');
	document.getElementsByTagName('head')[0].appendChild(script);
</script>
<!-- Einde -->

We would loved to know if this has work for you. Thank you.

It works, thanks :smiley:

You’re welcome!
It’s good to know that it has worked for you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.