Widget Embedding Guide

Add the Servegalo booking widget to any website using a single <script> tag. No backend required, no complex integration. Clients can book directly from your site without leaving the page.

Step 1 — Get your Business ID

Your Business ID is a unique identifier that connects the widget to your Servegalo account. You'll find it in the dashboard:

1. Log in to your Servegalo dashboard
2. Navigate to Settings → Integrations
3. Copy the value shown under Business ID — it looks like biz_a1b2c3d4

Step 2 — Add the script tag

Paste the following snippet just before the closing </body> tag on every page where you want the booking widget to appear.

<script
  src="https://widget.servegalo.com/booking.js"
  data-business-id="YOUR_BUSINESS_ID"
  defer
></script>

Replace YOUR_BUSINESS_ID with the ID you copied from the dashboard. The widget will render automatically — a floating "Book Now" button will appear in the bottom-right corner of the page.

Configuration Reference

The widget is configured entirely through data-* attributes on the script tag. No JavaScript configuration object is required.

Example with all options configured:

<script
  src="https://widget.servegalo.com/booking.js"
  data-business-id="biz_a1b2c3d4"
  data-theme="auto"
  data-color="#7C6FFF"
  data-position="bottom-right"
  data-label="Book Now"
  data-locale="en"
  defer
></script>

Platform-specific guides

Select your platform below for exact instructions on where to paste the script tag.

  <!-- ... rest of your page ... -->

  <script
    src="https://widget.servegalo.com/booking.js"
    data-business-id="YOUR_BUSINESS_ID"
    defer
  ></script>
</body>
</html>

Customization

The widget automatically adapts to your brand using the data-color and data-theme attributes. No CSS overrides are needed or supported — the widget is designed to look polished on any site.

Matching your brand color

Set data-color to any hex color. The widget uses this color for the booking button, selected states, progress indicators, and CTAs. High-contrast colors (avoid very light colors like #FFFFFF) produce the best results.

<script
  src="https://widget.servegalo.com/booking.js"
  data-business-id="YOUR_BUSINESS_ID"
  data-color="#D4A853"  ← your brand color
  defer
></script>

Dark mode

Set data-theme="dark" to always show the dark widget regardless of OS preference, or data-theme="auto" (the default) to follow the visitor's system setting.

Testing your widget

After adding the script tag, verify the widget is working correctly:

1. Open your website in a regular browser window (not incognito, not the platform's preview mode).
2. Look for the floating button in the bottom-right corner (or wherever you configured data-position). It should appear within 1–2 seconds of page load.
3. Click the button and complete a test booking using a test email address. The booking should appear in your dashboard under Bookings.
4. If you have Stripe test mode enabled, use the card number 4242 4242 4242 4242 with any future expiry and any 3-digit CVC to test the deposit flow.
5. Check that a confirmation email was received at the test email address (if email is configured), and that a confirmation SMS was sent (if Twilio is connected).

Troubleshooting

The booking button isn't appearing

• Confirm the script tag is present in your page source (View Source in your browser, search for bookingai).
• Ensure the script has the defer attribute — without it, the widget may not load correctly on some platforms.
• Check your browser's developer console (F12 → Console tab) for any JavaScript errors referencing Servegalo.
• Confirm your data-business-id matches exactly what's shown in your dashboard — it is case-sensitive.

The widget shows no services

• At least one active service must be configured in the dashboard. Go to Services and check that services have Active status.
• Each service must have at least one staff member assigned to it with availability set.

Stripe payment step is missing

• Stripe deposits only appear if you have connected a Stripe account in Settings → Payments AND the service has a deposit amount greater than $0 configured.
• In test mode, deposits appear but no real charge is made. See the Stripe setup guide →

Confirmation SMS isn't sending

• Check that Twilio is connected in Settings → Integrations with a valid Account SID, Auth Token, and outbound phone number.
• Verify the Twilio number you're using is SMS-capable (not just voice).
• In Twilio's free trial, outbound SMS can only be sent to verified numbers. See the Twilio setup guide →

Still stuck? Contact our support team — we typically respond within 2 business hours.