In dit artikel leggen we je uit hoe je de boeking widget knop of inline versie kunt toevoegen aan jouw website. We hebben hiervoor de meest gebruikte websites uitgelicht. Mocht jouw website er niet tussen staan, dan kun je gerust contact opnemen met ons support team. Zij helpen je graag verder!
De boeking widget knop toevoegen aan jouw website
Stap 1: pas de instellingen voor je boeking widget aan
Ga naar in Salonized naar Instellingen > Online afspraken en en pas bij "Stylen en delen" eventueel de volgende instellingen aan:
Kalender weergave: toon je beschikbaarheid per week of per maand
Kleur widget: (gebruik de standaard kleur "paradijs roze" of kies een eigen kleur)
Weergave van de widget: zorg ervoor dat je Vaste knop op elke pagina van mijn website hebt geselecteerd
Positie van de knop (links of rechts)
Stap 2: kopieer de code (het script)
Onderaan de pagina vind je de code. Klik op "code kopiëren" zodat de hele code wordt gekopieerd.
Stap 3: Voeg de code toe aan de footer van je website
Log in bij jouw websitebeheer en voeg de gekopieerde code toe aan de footer van je website. Publiceer de wijzigingen. De widget is nu toegevoegd! Zoek je een uitgebreid stappenplan hoe je de code kan toevoegen in de footer en heb je een Wordpress, WIX of Jimdo website? Scroll dan verder naar beneden
Let op! Elke keer wanneer je de kleur of positie van jouw boekingsknop aanpast in jouw Salonized account, verandert daarmee ook de code (het script). Dat betekent, dat elke keer wanneer je die instellingen aanpast, je daarna de oude code verwijdert van jouw website en de nieuwe code op dezelfde plek (in de footer) toevoegt.
Heb je hulp nodig bij het toevoegen van de afspraken widget? Of zie je de instellingen voor de inline versie van de boeking widget niet in jouw account staan? Neem gerust contact op met ons support team, dan kunnen we je hier verder bij helpen.
Boeking widget toevoegen aan een WordPress website
Klik in jouw Salonized account linksonder op Instellingen > Online afspraken > Stylen en delen > ga naar code en klik op 'Code kopiëren'. Let op: zorg ervoor dat de weergave van de widget op "Vaste knop op elke pagina van mijn website" staat.
Log in op jouw Wordpress website
Klik aan de linkerkant op "Plugins". (Mocht je "plugins" niet kunnen vinden, dan beheert waarschijnlijk iemand anders jouw website en heb jij niet alle rechten om dingen aan te passen op jouw site. Neem dan even contact op met jouw contactpersoon/websitebeheerder om te vragen of hij/zij de knop voor jou wil toevoegen).
Klik dan bovenaan op 'Nieuwe plugin"
In de zoekbalk typ je "Headers and Footers"
Daar kan je klikken op "Insert Headers and Footers". Je klikt dan op "nu installeren" en wanneer hij klaar is dan kan je klikken op "activeren".
Vervolgens ga je naar de linkerkant naar "instellingen" en je klikt dan op "Insert Headers and Footers"
Onderaan vind je "Footer", ga naar dat tekstvak
Plak hier de code die je uit Salonized hebt gekopieerd
En plak deze code in het tekstvak van "Footer'
Klik je op ‘opslaan’
Boeking widget toevoegen aan een WIX website
Klik in jouw Salonized account linksonder op Instellingen > Online afspraken > Stylen en delen > ga naar code en klik op 'Code kopiëren'. Let op: zorg ervoor dat de weergave van de widget op "Vaste knop op elke pagina van mijn website" staat.
Log in op jouw WIX website
Ga aan de linkerkant in de donkere balk naar Instellingen > Geavanceerd > en klik op "Aangepaste code"
Klik bij Hoofdtekst - eind op "Code toevoegen"
Plak de code de code die je uit jouw Salonized account hebt gekopieerd in het veld onder "Vul hier het codefragment in"
Optioneel kun je de tool een naam geven, bijv "Salonized booking widget". De rest van de opties staan standaard goed (Code toevoegen aan: Alle pagina's, Code in één keer laden, en Plaats de code in: Body - einde)
Klik op "Toepassen"
Boeking widget toevoegen aan een Jimdo Creator website
Klik in jouw Salonized account linksonder op Instellingen > Online afspraken > Stylen en delen > ga naar code en klik op 'Code kopiëren'. Let op: zorg ervoor dat de weergave van de widget op "Vaste knop op elke pagina van mijn website" staat.
Login op jouw Jimdo website en kies de juiste website
Klik op "bewerken"
Scroll helemaal naar beneden naar het grijze vlak en beweeg jouw muis daarover. Klik vervolgens op "inhoud toevoegen" en daarna op "meer elementen en aanvullingen"
Selecteer het element HTML
Voeg de code die je in jouw Salonized account hebt gekopieerd toe aan het element HTML
Klik op "opslaan"
Boeking widget toevoegen aan een Weebly website
Klik in jouw Salonized account linksonder op Instellingen > Online afspraken > Stylen en delen > ga naar code en klik op 'Code kopiëren'. Let op: zorg ervoor dat de weergave van de widget op "Vaste knop op elke pagina van mijn website" staat.
Login op jouw Weebly website
Klik op “website bewerken"
Ga bovenaan in het menu naar “instellingen"
Klik in het menu aan de linkerkant op “SEO"
Ga naar “code voettekst” en kopieer daar jouw Salonized code
Klik op “opslaan"
Klik op “publiceren”
Bestaande knoppen laten verwijzen naar de boeking widget
Nadat je de boeking widget knop hebt toegevoegd aan je website, kun je klanten ook via een knop (bijvoorbeeld in het hoofdmenu) doorsturen naar de widget. De boeking widget zal dan vanzelf openen zodra je op de knop in de menubalk klikt.
In het voorbeeld hieronder staat een knop in de menubalk die 'Maak afspraak' heet. Zodra de klant daarop klikt, opent de boeking widget rechtsonder op de pagina.
Stappenplan voor een Wordpress website:
Log in op jouw (Wordpress) website
Ga naar weergave > menu's
Onder "menustructuur" vind je welke items je in jouw menu hebt gezet
Ga naar het item toe en klik rechts op het pijltje naast "aangepaste link" zoals in het voorbeeld hieronder zodat het item openklapt.
Voeg in het tekstvak van "URL" het volgende toe: #sz-booking-toggle
Als je de naam van de knop nog wilt veranderen dan kan je dat doen bij "navigatielabel".
Klik op "menu opslaan"
Heb je op een bepaalde pagina of misschien zelfs op meerdere pagina's een knop toegevoegd de verwijst naar de oude versie van de boeking widget? Laat deze knop(pen) dan vanaf nu verwijzen naar jouw boeking widget knop die onderaan op iedere pagina zichtbaar is.
Log in op jouw (Wordpress) website
Ga naar de pagina waar je een knop hebt staan die nog doorverwijst naar de oude widget
Klik op die knop en klik op het hyperlink icoontje (zie video)
Vul in: #sz-booking-toggle en klik de juiste aan of klik op enter
Klik op "bijwerken" of "opslaan"
Stappenplan voor een WIX website:
De boeking widget inline toevoegen aan jouw website
Een inline versie van de boeking widget betekent dat je hem toevoegt in een bepaalde pagina op je website.
Je voegt de code in dit geval toe aan een specifieke pagina op je website. Dat kan de homepage zijn, of een speciale pagina dat over het boeken van een afspraak gaat. Je kunt de widget ook op meerdere pagina's toevoegen als inline-versie.
Stap 1: pas de instellingen voor je boeking widget aan
Wil je gebruik maken van de inline versie, stel je boeking widget dan als volgt in op de boeking widget pagina in jouw Salonized account (bij Instellingen > Online afspraken > Stylen en delen)
Kies of je de standaard kleur "paradijs roze" wilt gebruiken of dat je een eigen kleur wilt selecteren
Kies voor de weergave optie Open boeking widget op een bepaalde pagina van mijn website
Kies ervoor de automatische breedte ingeschakeld te laten (of schakel uit als je dit zelf wenst in te stellen)
Houd de hoogte op 700 of pas aan indien gewenst
Stap 2 : kopieer de code (het script) en voeg deze toe aan je website
De code, die toegevoegd moet worden aan de widget, vind je onderaan de pagina.
Let op: deze instellingen die je bij stap 1 aanpast hebben invloed op de code (het script), die je toevoegt aan je website. Stel dus éérst de juiste instellingen in, voor je de code kopieert om toe te voegen aan je website.
Als je op een later moment één van deze instellingen aanpast, moet de code opnieuw aan je site toegevoegd worden en de oude code moet verwijderd worden om zo de wijzigingen door te voeren.
De inline versie van de widget toevoegen aan een Weebly website
Klik in jouw Salonized account linksonder op Instellingen > Online afspraken > Stylen en delen > ga naar code en klik op 'Code kopiëren'. Let op: de weergave van de widget moet op "Open boeking widget op een bepaalde pagina van mijn website" staan.
Login op jouw weebly website.
Klik op "website bewerken"
Ga bovenaan naar “pagina’s” en klik aan de linkerkant op de pagina waar je de inline versie van de boeking widget wilt plaatsen
Klik op </> en sleep de afbeelding naar rechts waar je hem op de pagina wilt hebben.
Klik op "HTML code bewerken"
Plak daar de code je net uit Salonized hebt gekopieerd
Klik op “publiceren”
De inline versie van de widget toevoegen aan een Mijndomein website
Klik in jouw Salonized account linksonder op Instellingen > Online afspraken > Stylen en delen > ga naar code en klik op 'Code kopiëren'. Let op: de weergave van de widget moet op "Open boeking widget op een bepaalde pagina van mijn website" staan.
Login op jouw Mijndomein website en ga aan de linkerkant naar "producten"
Klik rechts op “beheren” naast websitemaker en vervolgens op “inloggen websitemaker"
Ga naar de pagina waar je jouw inline versie wilt plaatsen.
Ga aan de linkerkant in het menu naar “widgets” en klik op “HTML” en sleep die naar rechts op de pagina waar je de inline versie van de boeking widget wilt hebben.
Klik op “uw aangepaste HTML hier toevoegen”, verwijder die tekst en kopieer daar jouw Salonized code en klik op “update"
Klik als laatste rechts bovenaan op “opnieuw publiceren"
Zie je de instellingen voor de inline versie van de boeking widget niet in jouw account staan? Neem gerust contact op met ons support team, dan kunnen we je hier verder bij helpen.
Heb je hulp nodig bij het toevoegen van de boeking widget? Neem dan contact met ons op!
Lees verder:
In dit artikel lees je alles over de online boeking widget.
Heb je hier een vraag over of kun je hulp gebruiken bij het toevoegen van de widget op je website? Neem dan gerust contact met ons op, via de chat of via
(+31) 020 893 2386.