Avana
Start gratis

De boekknop van Avana op een website zetten: uitleg voor websitebouwers

4 min lezen
Kort antwoord

Plak de knopcode van de salon op elke pagina, het liefst vlak voor </body>. De salon vindt die code bij Instellingen›Boekingswidget, of heeft hem je gemaild. Laat de website geen scripts toe, gebruik dan het iframe of de link. Uiterlijk en opties regelt de salon zelf in Avana.

Open Boekingswidget in Avana Je komt meteen op de goede plek. Niet ingelogd? Dan log je eerst in.

Deze uitleg is voor wie de website van een salon bouwt of beheert. De salon werkt met Avana voor afspraken en wil dat klanten op de eigen website kunnen boeken. Daarvoor is er één script, zonder afhankelijkheden. Werkt het script niet op de website, dan zijn er een iframe en een gewone link.

De knop op elke pagina

Plak dit op elke pagina, het liefst vlak voor </body>. In de <head> werkt ook. Vervang naam-van-de-salon door de waarde van de salon; de kant-en-klare code staat in de mail of in Avana.

Knop op elke pagina
<script src="https://www.getavana.com/knop.js" data-salon="naam-van-de-salon" async></script>
  • Het script zet rechts- of linksonder een knop Maak afspraak, op een telefoon onderin het midden. Een klik opent de widget in een paneel over de pagina; op een telefoon vult het paneel het scherm. Escape of de sluitknop in de widget sluit het weer.
  • Alles staat in een Shadow DOM: de CSS van de website raakt de knop niet, en andersom.
  • Het script laadt async en doet één kleine aanvraag voor de instellingen van de salon. Zet je het twee keer op een pagina, dan tekent het de knop toch één keer.
  • Het script zet zelf geen cookies. Het paneel is een iframe met allow="payment", zodat online betalen erin werkt.

Wat doet data-salon?

data-salon zegt bij welke salon de knop hoort. Het is dezelfde naam als in de boekingslink van de salon. Klopt de waarde niet, of neemt de salon (tijdelijk) geen online boekingen aan, dan tekent het script niets en blijft de pagina zoals hij is. Voor een studio heet het attribuut data-studio; de rest is gelijk.

Ingesloten in één pagina

Voor een pagina Afspraak maken, of als de website geen scripts toelaat. Plak dit in een HTML-, Embed- of Code-blok.

In één pagina
<iframe src="https://www.getavana.com/embed/naam-van-de-salon" title="Online boeken" allow="payment" style="width:100%;max-width:440px;height:760px;border:0;border-radius:16px" loading="lazy"></iframe>
  • De widget is gebouwd voor zo'n 440 pixels breed. Een hoogte van zo'n 760 pixels is genoeg; de widget scrolt zelf.
  • Laat allow="payment" staan: zonder dat werkt online betalen in het iframe niet in elke browser.
  • Avana staat toe dat de widget op elke website in een iframe staat. Daarvoor hoef je niets aan te vragen.

Heeft de website al een eigen knop Afspraak maken, of kan er nergens code staan? Zet dan deze link achter die knop. Hij opent het boeken op een eigen pagina.

Link
https://www.getavana.com/embed/naam-van-de-salon

Opties

In de code zit geen andere optie dan data-salon. Al het andere stelt de salon zelf in bij Instellingen›Boekingswidget. Na een wijziging hoef je niets opnieuw te plakken.

  • Kleur: één kleur voor de knop en de knoppen in de widget. De tekstkleur op de knop past zich vanzelf aan.
  • Plek: rechts of links onderin. Op een telefoon staat de knop altijd in het midden.
  • Cadeaubonknop: een tweede knop naast Maak afspraak. Die staat er alleen als de salon cadeaubonnen online verkoopt.
  • Welkomsttekst: een kort stukje boven de behandelingen in de widget.
  • Taal: de knop volgt de taal van de salon: Nederlands, Frans, Duits of Engels.

Content-Security-Policy

Heeft de website een Content-Security-Policy, zet het domein van Avana dan in deze drie regels:

Aanvullen in je CSP
script-src https://www.getavana.com
connect-src https://www.getavana.com
frame-src https://www.getavana.com
  • script-src voor het script, connect-src voor de aanvraag naar de instellingen, frame-src voor het paneel met de widget.
  • De knop zet zijn opmaak in een <style>-blok binnen de Shadow DOM. Laat style-src geen inline stijlen toe, dan staat de knop er zonder opmaak. Gebruik in dat geval het iframe.
  • Houdt een cookiebanner of tag manager scripts tegen tot een bezoeker toestemming geeft, dan verschijnt de knop pas daarna. De knop zelf zet geen cookies.
  • Sommige websitebouwers (zoals Wix, Squarespace en Webflow) laten eigen scripts alleen toe in betaalde pakketten. Lukt het niet, gebruik dan het iframe of de link.

Waar je de code plakt in WordPress, Wix, Squarespace, Shopify, Webflow en Jimdo, staat per websitebouwer in een boekknop op je website.

Testen

  • Open de website op het echte domein. Onderin staat de knop; klik erop en het paneel opent.
  • Zodra de knop één keer op het echte domein is geladen, ziet de salon in Avana het label Actief met het adres, en krijgt de salon de eerste keer een mail. Lokaal, op een IP-adres of op een preview-adres telt niet mee.
  • Een testboeking komt echt in de agenda van de salon. Spreek dat even af.

Veelgestelde vragen

Kan ik een eigen knop het paneel laten openen?

Niet met de knopcode. Zet de link achter je eigen knop; die opent het boeken op een eigen pagina.

Waarom zie ik de knop niet?

Kijk of data-salon klopt, of de pagina na het plakken is gepubliceerd en of een Content-Security-Policy of cookiebanner het script tegenhoudt. Neemt de salon geen online boekingen aan, dan tekent het script ook niets.

Ik heb de code twee keer geplakt. Is dat erg?

Nee. Het script tekent de knop maar één keer per pagina.

Verder lezen

Was dit artikel nuttig?