> ## 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).

# 🔘 How to setup Floating Action Button like Calendly for Appointment Bookings

Want customers to be able to book from anywhere in your store — not just the product page? A floating action button works like the Calendly widget: a small "Book Now" button stays fixed in the corner of every page, ready to open your booking modal with one click.

Hoppy Appointments lets you add this button per service, customize its text and colors, and choose where it appears on the screen.

This guide walks you through setting it up.

---

# **⚠️ Before You Begin**

Before setting up the floating action button, make sure you have:

* The **Hoppy Appointments** app installed on your Shopify store  
* At least one active service already created  
* The **Hoppy Appointments app embed** enabled in your theme

💡 The floating button only appears on pages where the app embed is active. If you haven’t enabled the embed yet, go to **Shopify Admin → Online Store → Themes → Customize → App Embeds** and turn on the Hoppy Appointments embed.

---

# **🛠️ Step 1 — Open the Service’s General Tab**

The floating action button is configured per service, inside the **General** tab — not the Design tab.

1. Open the **Hoppy Appointments** app  
2. Go to **Services**  
3. Click the service you want to add the button to  
4. Click the **General** tab  
5. Scroll down to the **Floating Action Button** card

---

# **🛠️ Step 2 — Enable the Floating Action Button**

Inside the **Floating Action Button** card:

1. Turn on the **Enable floating button** toggle

Once enabled, the configuration fields appear below the toggle.

---

# **🛠️ Step 3 — Configure the Button**

Set up the button to match your store’s style and booking flow.

## **Button Text**

Enter the label customers will see on the button. The default text is **Book Now**, but you can use anything that fits your brand — for example:

* **Book a Call**  
* **Schedule Appointment**  
* **Reserve a Spot**

## **Position**

Choose where the button appears on the screen:

* **Bottom Right** — appears in the lower-right corner  
* **Bottom Left** — appears in the lower-left corner  
* **Bottom Center** — appears centered at the bottom

## **Background Color**

Pick the button background color. The default is black.

## **Text Color**

Pick the button label color. The default is white.

💡 Choose colors with strong contrast so the button is easy to read against your store background.

---

# **💾 Step 4 — Save and Preview**

1. Click **Save** at the top of the service page  
2. Wait for the confirmation message  
3. Visit your storefront and check different pages — home, product, collection, cart, etc.

The button should stay fixed in the chosen corner and open the booking modal when clicked.

---

# **⚠️ Important Notes**

* **Per-service setting** — each service has its own floating button. Configure it separately for every service you want to display it on.  
* **Appears on all pages** — once enabled, the button shows on every page where the Hoppy Appointments app embed is active. There are no page-specific visibility rules.  
* **Multiple services \= multiple buttons** — if you enable the floating button for several services, each one will render its own button. For a cleaner experience, enable it only on the service you want to promote most.  
* **Opens the booking modal** — clicking the button opens the booking flow for that service directly, without leaving the current page.  
* **Translations require Advanced Configuration** — if you want the button text to change per language, enable **Use Advanced Configuration** on the service and set the translation under **Settings → Translations → Service Translations**. See the Translation guide for details.

---

# **🐞 Troubleshooting**

## **The button is not showing on my store**

1. Make sure **Enable floating button** is turned on for the service  
2. Make sure you clicked **Save**  
3. Confirm the Hoppy Appointments app embed is enabled in your theme  
4. Clear your browser cache or test in an incognito window  
5. Check that the service is active and properly connected to a product

## **The button text is wrong or not translated**

* If **Use Advanced Configuration** is off, the button uses the text from the **Button Text** field directly.  
* If **Use Advanced Configuration** is on, the button text is pulled from **Settings → Translations → Service Translations → Floating Button Label**.

## **The button color doesn’t look right**

Use the color pickers in the FAB card for basic styling. For more advanced visual changes, you can target the `.futureblink-fab` class with Custom CSS. See the Custom CSS guide for details.

---

# **🎉 Final Result**

Once configured:

✅ A floating "Book Now" button appears on every page of your store  
✅ Customers can start booking from anywhere without navigating to a product page  
✅ The button opens your service’s booking modal instantly  
✅ The text, position, and colors match your brand

---

# **📚 Related Articles**

* **Appointment Bookings — Design & Styling Options**  
* **How to set Custom CSS for Appointment Bookings App**  
* **Appointment Bookings — Translation**  
* **How to Set Up Appointment Booking Services**