> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 🔘 Hoe Floating Action Knop instellen zoals Calendly voor Afspraak Boekingen

> ℹ️ **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**