Installatie

Widget installatie

Installeer de boekingswidget op je website in een paar minuten. Werkt op elk platform.

Basisgebruik

Plak de volgende code op de plek waar je de boekingswidget wilt tonen. Vervang jouw-salon-slug door je eigen salon-slug (te vinden in je dashboard).

Inline modus (standaard)

HTML
<!-- Kapper.nu boekingswidget -->
<div data-kappernu-salon="jouw-salon-slug"></div>
<script src="https://kapper.nu/embed.js" async></script>

Popup modus

HTML
<!-- Kapper.nu boekingsknop -->
<div
  data-kappernu-salon="jouw-salon-slug"
  data-kappernu-mode="popup"
  data-kappernu-color="#0a0a0a"
  data-kappernu-radius="12"
></div>
<script src="https://kapper.nu/embed.js" async></script>

Configuratie-opties

data-kappernu-mode inline (standaard) of popup

data-kappernu-color — Primaire kleur voor de knop (hex-waarde, bijv. #0a0a0a)

data-kappernu-radius — Hoekradius in pixels (bijv. 12)

Installatie per platform

WordPress

  1. 1Ga naar de pagina of post waar je de widget wilt tonen.
  2. 2Voeg een 'Aangepaste HTML'-blok toe (in de Gutenberg-editor).
  3. 3Plak de onderstaande code in het blok.
  4. 4Publiceer of update de pagina.
WordPress — Aangepaste HTML
<!-- Kapper.nu boekingswidget -->
<div data-kappernu-salon="jouw-salon-slug"></div>
<script src="https://kapper.nu/embed.js" async></script>

Wix

  1. 1Open de Wix Editor en ga naar de gewenste pagina.
  2. 2Klik op '+' (Toevoegen) en kies 'Embed code' > 'HTML iframe'.
  3. 3Kies 'Code' in het widget-venster en plak de code.
  4. 4Pas de grootte van het blok aan en publiceer.
Wix — HTML Embed
<!-- Kapper.nu boekingswidget -->
<div data-kappernu-salon="jouw-salon-slug"></div>
<script src="https://kapper.nu/embed.js" async></script>

Shopify

  1. 1Ga naar Online Store > Pages in je Shopify-admin.
  2. 2Maak een nieuwe pagina aan of bewerk een bestaande.
  3. 3Klik op 'HTML weergeven' (<>) in de editor.
  4. 4Plak de code en sla op.
Shopify — Page HTML
<!-- Kapper.nu boekingswidget -->
<div data-kappernu-salon="jouw-salon-slug"></div>
<script src="https://kapper.nu/embed.js" async></script>

Webflow

  1. 1Open je project in de Webflow Designer.
  2. 2Voeg een 'Embed'-element toe op de gewenste plek.
  3. 3Plak de code in het Embed-venster.
  4. 4Publiceer je site.
Webflow — Embed Component
<!-- Kapper.nu boekingswidget -->
<div data-kappernu-salon="jouw-salon-slug"></div>
<script src="https://kapper.nu/embed.js" async></script>

Eigen HTML-website

  1. 1Open het HTML-bestand van je pagina in een editor.
  2. 2Plak de code op de plek waar de widget moet verschijnen.
  3. 3Upload het bestand naar je server.
HTML
<!-- Kapper.nu boekingswidget -->
<div data-kappernu-salon="jouw-salon-slug"></div>
<script src="https://kapper.nu/embed.js" async></script>
Hulp nodig?

We helpen je graag verder

Lukt het niet? Stuur een mailtje naar support@kapper.nu en we helpen je gratis met de installatie.