ℹ️ Note: Dit artikel is automatisch vertaald met behulp van AI en kan onjuistheden bevatten. Als er iets mis is, neem dan contact op met ons ondersteuningsteam.

Wilt u klanten in staat zijn om te boeken van overal in uw winkel en niet alleen de productpagina? Een drijvende actie knop werkt als de Calendly widget: een kleine "Book Now" knop blijft vast in de hoek van elke pagina, klaar om uw boekingswijze te openen met één klik.

Hoppy Appointments kunt u deze knop per dienst toe te voegen, aanpassen van de tekst en kleuren, en kies waar het verschijnt op het scherm.

Deze gids leidt u door het opzetten ervan.

⚠️ Voordat u begint

Voordat u de drijvende actieknop opzet, zorg ervoor dat u:

• De Hoppy Appointments app geïnstalleerd op uw Shopify opslag
• Ten minste één actieve dienst is reeds aangemaakt
• De Hoppy Appointments app insluiten ingeschakeld in uw thema

💡 De drijvende knop verschijnt alleen op pagina's waar de app embed actief is. Als je de inbed nog niet hebt ingeschakeld, ga dan naar Shopify Admin → Online Store → Thema's → Aanpassen → App Inbedden en zet de Hoppy Appointments Inbedden.

🛠️ Stap 1 Open het Algemeen Tabblad Service

De drijvende actie knop is geconfigureerd per dienst, binnen de Algemeen niet het tabblad Ontwerp.

1. Open de Hoppy Appointments app
2. Ga naar Diensten
3. Klik op de service waaraan u de knop wilt toevoegen
4. Klik op de Algemeen tab
5. Scroll naar beneden naar de Drijvende actieknop kaart

🛠️ Stap 2 Inschakelen van de drijvende actieknop

Binnen de Drijvende actieknop kaart:

1. Zet de Zwevende knop inschakelen schakelen

Eenmaal ingeschakeld, verschijnen de configuratievelden onder het schakelen.

🛠️ Stap 3 - Knop instellen

Stel de knop in om uw winkelstijl en boekingsstroom aan te passen.

Knoptekst

Voer het label in dat klanten zullen zien op de knop. De standaardtekst is Boek nu, maar je kunt alles wat past bij uw merk gebruiken . Bijvoorbeeld:

• Een oproep boeken
• Afspraak schema
• Reserveer een spot

Positie

Kies waar de knop verschijnt op het scherm:

• Rechtsonder In de rechteronderhoek verschijnt een
• Linksonder In de linkerbenedenhoek verschijnt een
• Onderste midden Onderaan lijkt het gecentreerd

Achtergrondkleur

Kies de achtergrondkleur van de knop. De standaard is zwart.

Tekstkleur

Kies de kleur van het label. De standaard is wit.

💡 Kies kleuren met een sterk contrast zodat de knop gemakkelijk te lezen is tegen de achtergrond van uw winkel.

💾 Stap 4: Opslaan en Voorbeeld

1. Klik Opslaan bovenaan de servicepagina
2. Wacht op het bevestigingsbericht
3. Bezoek uw storefront en controleer verschillende pagina's thuis, product, collectie, winkelwagen, enz.

De knop moet vast blijven in de gekozen hoek en open de boekingswijze wanneer u klikt.

⚠️ Belangrijke opmerkingen

• Per dienst Elke dienst heeft zijn eigen drijvende knop. Stel het apart in voor elke dienst die u wilt weergeven.
• Verschijnt op alle bladzijden Eenmaal ingeschakeld, toont de knop op elke pagina waar de Hoppy Appointments app embed is actief. Er zijn geen paginaspecifieke zichtbaarheidsregels.
• Meerdere diensten = meerdere knoppen Als u de drijvende knop voor meerdere diensten inschakelt, zal elk zijn eigen knop weergeven. Voor een schonere ervaring, laat het alleen op de dienst die u wilt bevorderen.
• Opent de boekingswijze Klik op de knop opent de boekingsstroom voor die dienst direct, zonder de huidige pagina te verlaten.
• Vertalingen vereisen geavanceerde configuratie Als u wilt dat de tekst van de knop per taal verandert, kunt u Geavanceerde configuratie gebruiken over de dienst en zet de vertaling onder Instellingen → Vertalingen → Service Vertalingen. Zie de vertaalgids voor details.

🐞 Problemen oplossen

De knop staat niet op mijn winkel

1. Zorg ervoor Zwevende knop inschakelen is ingeschakeld voor de dienst
2. Zorg ervoor dat u klikt Opslaan
3. Bevestig de Hoppy Appointments app embed is ingeschakeld in uw thema
4. Uw browsercache wissen of testen in een incognito venster
5. Controleer of de service actief is en goed verbonden met een product

De knoptekst is verkeerd of niet vertaald

• Als Geavanceerde configuratie gebruiken is uit, de knop gebruikt de tekst van de Knoptekst Veld direct.
• Als Geavanceerde configuratie gebruiken is aan, de knop tekst wordt getrokken uit Instellingen → Vertalingen → Service Vertalingen → Drijvende Knop Label.

De knopkleur ziet er niet goed uit

Gebruik de kleurplukkers in de FAB-kaart voor basisstijl. Voor meer geavanceerde visuele veranderingen, kunt u richten op de .futureblink-fab klasse met aangepaste CSS. Zie de Custom CSS gids voor details.

🎉 Eindresultaat

Eenmaal ingesteld:

✅ Een drijvende "Boek Nu" knop verschijnt op elke pagina van uw winkel
✅ Klanten kunnen overal beginnen met boeken zonder te navigeren naar een productpagina
✅ De knop opent direct uw services boekingswijze
✅ De tekst, positie en kleuren komen overeen met uw merk

📚 Gerelateerde artikelen

• Afspraak Boekingen Ontwerp & Styling Opties
• Aangepaste CSS instellen voor Afspraak Boekingen App
• Afspraak Boekingen Vertaling
• Hoe kan ik afspraken boeken diensten instellen

Bijgewerkt op: 10/09/2026