Zo maak je een Salonized afspraak button

Je hebt je Salonized widget al werkend in je website, maar die standaard “Boek een afspraak” button past totaal niet bij je design. Herkenbaar? In deze tutorial leer je hoe je een custom button maakt die perfect bij je branding past én gekoppeld is aan je Salonized booking systeem.

Waarom een custom booking button?

De standaard Salonized widget werkt prima, maar ziet er vaak wat basic uit. Met een eigen button kun je:

• De button laten matchen met je huisstijl (kleuren, lettertype, styling)
• De button strategisch plaatsen waar jij wilt (header, midden in tekst, footer)
• Meerdere buttons op één pagina zetten voor verschillende diensten
• De button animeren of interactief maken voor meer conversie

Geen zorgen – je hoeft geen developer te zijn. Deze tutorial loodst je in 3 eenvoudige stappen naar een professionele booking button.

Stap 1: Haal je Salonized widget code op

Allereerst heb je de Salonized widget code nodig. Die vind je zo:

1. Log in op je Salonized dashboard
2. Ga naar Instellingen → Online Agenda
3. Klik op het tabblad Widget
4. Kopieer de widget code (begint meestal met <script src="https://app.salonized.com/...">)

Deze code plaats je normaal gesproken ergens in je website, bijvoorbeeld in een Custom HTML blok. Maar we gaan verder – we maken een button die deze widget activeert op commando.

Stap 2: Maak je custom button

Nu bouwen we de button zelf. In OnePage doe je dat met een Button element:

1. Sleep een Button element naar je pagina
2. Pas de tekst aan naar bijvoorbeeld “Boek Nu Je Afspraak”
3. Style de button naar je huisstijl:
   • Achtergrondkleur aanpassen
   • Tekstkleur instellen
   • Border radius voor ronde hoeken
   • Padding voor grootte
4. Geef de button een unieke ID in de instellingen, bijvoorbeeld salonized-btn

In HTML ziet dat er zo uit (als je zelf code schrijft):

<button id="salonized-btn" style="
  background-color: #FF6B6B;
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
">
  Boek Nu Je Afspraak
</button>

De id="salonized-btn" is cruciaal – daar gaan we straks mee werken in de JavaScript.

Stap 3: Koppel de button aan Salonized

Nu komt het belangrijkste deel: de button koppelen aan de Salonized widget. Dit doen we met een klein stukje JavaScript.

Voeg dit toe aan je pagina (in OnePage: gebruik een Custom Code element of Script Manager):

<script>
// Wacht tot pagina geladen is
document.addEventListener('DOMContentLoaded', function() {

  // Vind de button
  const bookingBtn = document.getElementById('salonized-btn');

  // Voeg click event toe
  bookingBtn.addEventListener('click', function() {

    // Open Salonized widget
    if (window.SalonizedWidget) {
      window.SalonizedWidget.open();
    } else {
      console.error('Salonized widget niet geladen');
    }

  });

});
</script>

Wat gebeurt hier?

• DOMContentLoaded – Wacht tot de pagina volledig geladen is
• getElementById('salonized-btn') – Vindt je button met ID
• addEventListener('click') – Luistert naar clicks op de button
• window.SalonizedWidget.open() – Opent de Salonized booking widget

Zorg ervoor dat je Salonized widget script VOOR deze code staat in je pagina, anders werkt het niet.

Volledige implementatie in OnePage

Zo zet je alles bij elkaar in OnePage:

1. Custom HTML element toevoegen met Salonized widget code:

   <script src="https://app.salonized.com/widget/[JE-COMPANY-ID]"></script>

2. Button element toevoegen en stylen zoals je wilt, ID instellen op salonized-btn
3. Custom Code element toevoegen met de JavaScript hierboven

Controleer de volgorde: Widget script → Button → JavaScript. Anders kan de JavaScript de widget niet vinden.

Geavanceerde styling tips

Maak je button nog professioneler met deze styling trucs:

Hover effect toevoegen:

#salonized-btn:hover {
  background-color: #E85555;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255,107,107,0.3);
  transition: all 0.3s ease;
}

Icoon toevoegen:

<button id="salonized-btn">
  📅 Boek Nu Je Afspraak
</button>

Loading state bij klikken:

bookingBtn.addEventListener('click', function() {
  this.textContent = 'Laden...';
  this.disabled = true;

  if (window.SalonizedWidget) {
    window.SalonizedWidget.open();

    // Reset button na 2 seconden
    setTimeout(() => {
      this.textContent = 'Boek Nu Je Afspraak';
      this.disabled = false;
    }, 2000);
  }
});

Meerdere buttons voor verschillende diensten

Wil je meerdere buttons, elk voor een andere dienst? Gebruik verschillende IDs en service parameters:

<button id="haircut-btn">Boek Knipbeurt</button>
<button id="color-btn">Boek Kleuring</button>

<script>
document.getElementById('haircut-btn').addEventListener('click', () => {
  window.SalonizedWidget.open({ service: 'haircut' });
});

document.getElementById('color-btn').addEventListener('click', () => {
  window.SalonizedWidget.open({ service: 'color' });
});
</script>

Check de Salonized documentatie voor beschikbare service parameters voor jouw salon.

Troubleshooting: werkt de button niet?

Button doet niks bij klikken:

• Check of het Salonized widget script geladen is (F12 → Console → check errors)
• Controleer of de button ID exact overeenkomt in HTML en JavaScript
• Zorg dat de JavaScript NA de button staat in de pagina

“SalonizedWidget is not defined” error:

• Het widget script staat niet in de pagina of laadt te laat
• Check je Company ID in de widget URL
• Probeer de widget script bovenaan de pagina te plaatsen

Widget opent niet of blijft laden:

• Mogelijk blokkeren ad-blockers de Salonized widget
• Test in incognito modus zonder extensies
• Check of je Salonized account actief is en online agenda enabled

Conclusie

Met een custom Salonized booking button geef je je website direct meer professionaliteit. Bezoekers zien een button die past bij je branding, en met één klik kunnen ze een afspraak maken. Perfect voor conversie.

De combinatie van een gestylde button en de krachtige Salonized widget geeft je het beste van beide werelden: volledige design controle én betrouwbare afspraak functionaliteit.

Wil je nog verder gaan? Combineer deze button met OnePage’s trigger systeem om de widget te openen bij scrollen, na X seconden, of wanneer iemand de pagina wil verlaten. Zo maximaliseer je je bookings zonder pusherig te zijn.