Salonhub online afspraak widget code voor je website: Zo stel je het in

Dit artikel beschrijft de oude widget-code voor de online boekingsomgeving van Salonhub. Deze methode wordt niet meer aangeraden. De aanbevolen manier is de directe link via Beheer > Afspraken > Links. Dit artikel blijft alleen beschikbaar voor salons die de oude code nog gebruiken

De nieuwe widget 4.0 kan worden geactiveerd en  vervangt de oude widget door een directe link. De code hieronder is alleen van toepassing op de oude widget.

Lees hier meer over het instellen en het plaatsen van de nieuwe widget


De code

Zorg dat de onderstaande code op de juiste manier in de website wordt verwerkt. Dan zal de widget ook het beste functioneren. De widget is responsive en zweeft (indien goed geplaatst) boven de eigen website. Op een mobiel apparaat zal de widget schermvullend worden weergegeven. Tevens is de widget een Progressive Web App (Android). En ook op iPhone kan de widget bijvoorbeeld op  het beginscherm geplaatst worden.

Let op! Plaats de widget zoals op deze pagina is omschreven om hem op de juiste manier te laten functioneren. Afwijken in de code kan ervoor zorgen dat een gedeelte of zelfs de gehele widget niet goed werkt.

<!doctype html>

<html>
<head>
<!– Plaats deze code in de header van uw site –>
<script>
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 –>
</head>
<body>
Maak een online afspraak:
<!– Plaats een of meerdere van de onderstaande links op uw pagina –>
<ul>
<li>
<a href=”#salonhub-create-client:demo-salon:test”>Salonhub TEST</a>
</li>
</ul>
</body>
</html>

Een keuzemenu of dropdown menu

<!doctype html>
<html>
<head>
<!– Plaats deze code in de header van uw site –>
<script>
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 –>
</head>
<body>
<!– Plaats deze code op uw pagina –>
<form action=”#salonhub-create” data-client=”demo”>
<select name=”salon”>
<option>Kies salon…</option>
</select>
<button type=”submit”>Start</button>
</form>
<!– Einde –>
</body>
</html>

Zie ook de widget plaatsen voor Facebook.

Vragen over dit onderwerp

Tik op het pijltje naar beneden voor het antwoord.

Wat is het verschil tussen de directe link en de oude widget-code?

De directe link is een gewone webadres-link die je deelt. Klanten klikken erop en komen direct in de boekingsomgeving. De oude widget-code was een stukje code dat je in je website plakte, zodat de boekingswidget in je pagina werd ingebouwd. Die code raden we niet meer aan. De directe link is eenvoudiger en werkt betrouwbaarder.

Waarom raden jullie de oude widget-code niet meer aan?

De oude code bouwt de boekingswidget in je eigen webpagina in. Daardoor kunnen browsers gegevens van klanten (cookies) blokkeren of niet bewaren. Klanten moeten dan soms opnieuw beginnen of gegevens nog een keer invullen. De directe link heeft dit probleem niet, omdat de boekingsomgeving in zijn eigen omgeving opent.

Kan ik de boekingslink op een knop op mijn website zetten?

Ja. Maak op je website een knop, bijvoorbeeld met de tekst “Afspraak maken”, en koppel de directe link aan die knop. Klanten komen na het klikken direct in de boekingsomgeving. Vraag eventueel je websitebouwer om de link aan de knop te koppelen.

Kan ik de link delen op Instagram of Facebook?

Ja. Plaats de directe link in de bio van je Instagram of Facebook. Veel salons gebruiken de link ook in een story of bericht met een oproep om online te boeken. Zo kunnen klanten met één tik een afspraak maken.

Ik heb geen website. Waar kan ik dan toch online laten boeken?

Ook zonder eigen website kunnen klanten online een afspraak bij je maken. Je hebt hiervoor drie opties. Via dé Kapper App: klanten zoeken jouw salon op in de app en maken daar rechtstreeks een afspraak. Via social media: plaats de directe boekingslink (Beheer > Afspraken > Links) in de bio van je Instagram of Facebook, of deel hem in een bericht of story. Via Google Reserve: koppel Salonhub aan je Google-bedrijfsprofiel, zodat klanten direct vanuit Google Zoeken en Google Maps een afspraak kunnen maken.

Werkt de oude widget-code nog?

Gebruik je nog de oude code? Dan kan het zijn dat klanten problemen ervaren, bijvoorbeeld met gegevens die niet bewaard blijven. Stap daarom over op de directe link via Beheer > Afspraken > Links.

Updated on 11 juni 2026
Heeft dit artikel u geholpen?