Skip to main content

Online Booking Widget & Installation

Let your customers book appointments directly from your website -- 24 hours a day, 7 days a week. The autoGMS Online Booking Widget gives your garage a professional booking experience that matches your brand and feeds bookings straight into your dashboard. No phone calls needed, no double-entry, no missed opportunities.

This guide covers everything you need to know: setting it up, customising it, installing it on your website, and managing the bookings that come in.

Overview​

The Online Booking Widget is a self-service booking form that you can add to any website. When a customer visits your site, they can select a vehicle type, choose services, enter their details, and submit a booking request -- all without leaving your page.

Here is what it does for your garage:

  • Accepts bookings around the clock, even when you are closed
  • Shows your live service menu with optional pricing
  • Collects customer details, vehicle information, and preferred dates
  • Creates a new booking in your autoGMS dashboard automatically
  • Works on both desktop and mobile devices
  • Matches your brand colours and style

There are two ways customers can use your booking form:

  1. Booking Page -- A dedicated, full-page booking experience hosted by autoGMS. You get a unique link (like book.myautogms.com/your-garage) that you can share anywhere: social media, Google Business, email signatures, and more.
  2. Embed Widget -- A compact widget that you paste into your existing website. It loads directly inside your page so customers never have to leave your site.

Both options are managed from a single place: the Installation page inside your garage dashboard.

How to Access​

  1. Log in to your autoGMS dashboard.
  2. Make sure you have the correct garage selected (if you manage more than one).
  3. In the left sidebar, look for Installation (it has a link icon next to it).
  4. Click it to open the Installation page.

The first time you visit this page, you may be asked to authorise a domain before you can proceed. This is a one-time security step -- more on that below.

First Time Setup: Authorising Your Domain (Required)​

Before your booking widget can go live, you must add and authorise your website URL. This is a security requirement — the widget will only load on approved domains. Requests from unapproved domains are blocked at the server level. Without this step, the embed widget will not work on your website.

autoGMS needs to know which website(s) are allowed to display it. This protects your garage from someone embedding your form on an unauthorised site.

What you will see​

If no domains are authorised yet, a popup will appear asking you to add your website address. The popup includes a text field with a globe icon, an Add Domain button, and a list of any domains you have already submitted.

Step-by-step: Adding your first domain​

  1. In the popup, type your website address into the text field (for example, www.mygarage.com or mygarage.co.uk).
  2. You do not need to include https:// -- the system strips that automatically.
  3. Click Add Domain.
  4. You will see a confirmation message. Depending on your setup, the domain may be approved instantly or may show as "Pending" until it is verified.
  5. Once at least one domain is approved, the popup closes and you can access all the installation features.

Good to know: You can add multiple domains if your garage has more than one website. Each domain will appear in a list inside the popup with a status badge showing whether it is "Approved" or "Pending". You can also manage domains later from your garage profile settings.

If you need to check or refresh your domain status, click the small Refresh link at the bottom of the popup.

The Installation Page: Two Tabs​

The Installation page has two main tabs along the top. Each tab gives you a different way to share your booking form with customers.

Tab 1: Booking Page​

This tab is all about your standalone booking page -- the dedicated, full-screen booking experience hosted by autoGMS.

What you will see​

The screen is split into two columns:

  • Left column: Booking Page Editor -- Controls for customising the hero section (the large branded area at the top of your booking page).
  • Right column: Live Preview & Copy Link -- A real-time preview of how your booking page hero will look, plus a button to copy your unique booking link.

What you can customise​

The editor on the left is organised into clearly labelled sections:

Branding

  • Background Colour -- Pick the main colour for your booking page hero using a colour picker. This sets the overall tone and feel.
  • Use Gradient -- Toggle this on to add a smooth gradient effect to your background colour, giving it a more polished, modern look. Toggle it off for a flat, solid colour.
  • Gradient Strength -- If gradients are on, choose how noticeable the effect is: Subtle, Light, Medium, or Strong.
  • Description -- Write a short tagline or call-to-action that appears beneath your garage name (for example, "Expert car care you can trust" or "Book your next service in 60 seconds").

Panel Visibility

Use these toggles to show or hide specific sections on your booking page:

  • Features -- Show a row of feature badges highlighting your garage's strengths (like "Certified Technicians" or "Same-Day Service").
  • Gallery -- Display a photo carousel of your workshop, team, or completed jobs.
  • Map -- Show an interactive Google Maps card with your garage's address and a "Get Directions" link.
  • Info Card -- Show a card with your opening hours, phone number, email, and WhatsApp contact details.

Feature Badges (appears when the Features toggle is on)

  • Click Add Feature to create a new badge.
  • For each badge, choose an icon from the dropdown (options include check, star, shield, clock, award, wrench, car, heart, thumbs up, and verified) and type the text you want displayed.
  • You can add as many badges as you like. Remove any badge by clicking the X button next to it.

Gallery (appears when the Gallery toggle is on)

  • Click Add Image to add a new gallery slot.
  • Paste the URL of each image you want to display. You can add up to 6 images.
  • Customers will see these in a carousel with navigation arrows and dot indicators.
  • Remove any image by clicking the X button next to it.

Reviews Integration

  • If you use a third-party review widget (like Google Reviews or Trustpilot), you can paste its embed code here. It will appear on your booking page to build trust with new customers.

Copying your booking page link​

At the top of the right column, you will find a Copy Booking Link button. Click it to copy your unique booking page URL to your clipboard. You can then paste it anywhere:

  • In your Instagram or Facebook bio
  • In your Google Business profile
  • In email signatures
  • In WhatsApp messages to customers
  • On printed flyers or business cards (consider generating a QR code from the link)

Saving your changes​

At the bottom of the page, a sticky bar shows whether you have unsaved changes:

  • If you see "Unsaved changes", click Save to apply your customisations.
  • Click Reset if you want to revert everything back to default settings. You will be asked to confirm before the reset happens.

Good to know: Your changes apply to both the standalone booking page and the desktop version that customers see. The live preview on the right updates in real time as you make changes, so you can see exactly how things will look before saving.

Tab 2: Embed Widget​

This tab is for adding the booking form directly into your own website. It has three main sections on the left and a live preview on the right.

What you will see​

The screen is split into two columns:

  • Left column:
    1. Widget Code -- The snippet you copy and paste into your website.
    2. Form Customisation -- Controls for which fields appear on the form and how it looks.
    3. Platform Guides -- Step-by-step instructions for installing the widget on popular website platforms.
  • Right column: Live Widget Preview -- An interactive mock-up of exactly what your customers will see.

Section 1: Widget Code​

This card gives you the code snippet needed to embed the booking widget on your website.

Step-by-step: Getting your widget code

  1. Click the Copy Widget Code button. The code is copied to your clipboard instantly.
  2. If you want to see the actual code before copying, click the small Show code link below the button. This expands a code preview area.
  3. Click anywhere on the code preview to copy it as well.

The widget code is a small HTML snippet that loads the booking form automatically when your web page opens. You do not need to understand the code -- just paste it where you want the booking form to appear on your site.

Here is what the snippet looks like (your garage ID will be different):

<!-- autoGMS InstantBook Widget -->
<div id="auto-gms-booking-widget"></div>
<script
  src="https://autogms.onrender.com/static/js/booking-widget.js"
  data-garage-id="YOUR_GARAGE_ID"
  data-container-id="auto-gms-booking-widget"
  data-mode="embedded"
  async
  defer
></script>

You will never need to edit this snippet. Just copy it from the dashboard and paste it into your website.

Good to know: If you have not yet authorised a domain, you will see a warning message here reminding you to add your website domain first. The widget will only work on authorised domains. There is a handy link that takes you directly to your garage profile to add a domain.

Good to know: The widget works for local testing too. If you are building or previewing your site on your own computer before going live, the widget will still load so you can check that everything looks right.

Section 2: Form Customisation​

This card lets you control what the booking form looks like and which fields your customers need to fill in.

Fields

Toggle these on or off depending on what information you want to collect:

  • Phone -- Customer's phone number (on by default). Includes a country code selector that matches your garage's region.
  • Email -- Customer's email address (on by default).
  • Date -- Preferred appointment date with a calendar picker (on by default).
  • Notes -- A free-text area where customers can describe their issue or add special requests (on by default).
  • Show Prices -- Whether to display service prices in the booking form (on by default).

Layout

Fine-tune how the widget fits into your page:

  • Max Width -- The maximum width of the widget (default: 480px). Increase this if you want the form to be wider on large screens.
  • Max Height -- The maximum height of the widget (default: 720px).
  • Border Radius -- How rounded the corners of the widget are (default: 12px). Set to 0px for sharp corners.
  • Padding -- Extra space around the inside of the widget (default: 0px).

Appearance

Control the visual styling of the form:

  • Primary Colour -- The accent colour used throughout the form (selected services, vehicle type highlights, etc.).
  • Button Colour -- The colour of the main action buttons ("Continue" and "Book Now").
  • Header Text -- The text shown at the top of the form (your garage name by default).
  • Button Text -- The label on the final submit button (defaults to "Book Now").

Good to know: All appearance changes update the live preview on the right in real time. Experiment freely -- nothing is saved until you click the Save button at the bottom.

Section 3: Platform Installation Guides​

This expandable accordion section provides step-by-step instructions for installing the widget on the most popular website platforms. Click on any platform name to expand its guide.

WordPress Detailed steps for adding the widget code using the WordPress editor, covering both the block editor (Custom HTML block) and the classic editor.

Shopify Instructions for adding the widget to your Shopify store pages using the theme editor's custom HTML section.

Wix Two methods covered:

  • Using Wix's built-in HTML embed element
  • Using an iframe with your booking page link

Squarespace Two methods covered:

  • Using Squarespace's Code Block in the page editor
  • Using an iframe with your booking page link

Custom HTML / Other Platforms Generic instructions for any website where you have access to edit HTML. This works for hand-coded sites, other website builders, or any platform that supports custom HTML.

The Live Widget Preview​

On the right side of the Embed Widget tab, you will see an interactive preview of your booking form. This is not just a static image -- you can actually click through it to see the full booking flow.

What you will see:

Two buttons at the top let you switch between the two steps of the form:

  1. Service Selection -- The first screen your customers see. It shows:

    • Your header text at the top
    • A vehicle type selector (Car, SUV, Truck, Sports)
    • Your list of services with checkboxes
    • A "Continue" button at the bottom

  2. Booking Details -- The second screen where customers enter their information:

    • First name and last name fields
    • Phone number with country code (if enabled)
    • Email address (if enabled)
    • Vehicle registration number (shown automatically for UK garages or MOT services)
    • Preferred appointment date (if enabled)
    • Additional notes (if enabled)
    • A "Book Now" submit button

Below the preview, a note reminds you that this is a preview only and clicking the buttons will not create a real booking.

Good to know: The preview reflects your customisation settings in real time. Change a colour, toggle a field, or update the button text and watch the preview update instantly.

The Customer-Facing Booking Experience​

Here is what your customers actually see and do when they use your booking form, whether on your dedicated booking page or via the embedded widget.

On Desktop (Booking Page)​

When a customer visits your booking page link on a computer, they see a polished two-panel layout:

  • Left panel (Hero): Your branded area with your logo, garage name, description, feature badges, photo gallery, map, opening hours, and contact details -- depending on what you have enabled.
  • Right panel (Form): The multi-step booking form.

On Mobile (Booking Page)​

On phones and tablets, the layout automatically switches to a mobile-optimised, full-screen view. The hero content is condensed and the form takes centre stage for easy thumb-friendly filling.

On Any Device (Embed Widget)​

When embedded in your website, the widget appears as a compact, self-contained form within your page. It adapts to the container size and looks great on both desktop and mobile.

The Booking Flow (All Devices)​

Step 1: Select a Vehicle and Services

  1. The customer chooses their vehicle type (Car, SUV, Truck, Sports, or others depending on your garage settings).
  2. They browse your service list and tap/click to select one or more services.
  3. Optionally, they can expand a "Describe Your Issue" section to type a free-text diagnostic note.
  4. They click Continue.

Step 2: Enter Details and Book

  1. The customer fills in their first name and last name (required).
  2. They enter their phone number, with an automatic country code selector based on your garage's region.
  3. Optionally, they enter their email address.
  4. For UK garages or when an MOT service is selected, a vehicle registration number field appears.
  5. They select their vehicle make from a dropdown, then select their vehicle model.
  6. They pick a preferred appointment date using a calendar. Dates when your garage is fully booked or closed are automatically greyed out so customers cannot select them.
  7. Optionally, they add any extra notes.
  8. They click Book Now to submit.

Step 3: Confirmation

After a successful submission, the customer sees an animated success screen with:

  • A confirmation message thanking them and mentioning your garage name
  • A summary showing their selected date, vehicle, and service
  • A reassuring follow-up message (for example, that your team will be in touch)
  • A close button

Good to know: The customer also sees a brief note that by submitting, they agree to receive booking updates and reminders via SMS. This keeps you compliant with communication consent requirements.

Language Support​

The booking form supports multiple languages. If your garage's preferred language is Arabic, a language switcher appears so customers can toggle between English and Arabic. The entire form, including labels, buttons, and placeholder text, adapts to the selected language. Arabic mode also switches the layout to right-to-left.

How Online Bookings Appear in Your Dashboard​

When a customer submits a booking through the widget or booking page, it appears in your autoGMS dashboard just like any other booking.

  1. You will receive a real-time notification (if notifications are enabled) alerting you to the new booking.
  2. The booking appears in your Bookings list with a status of Pending.
  3. The customer's name, phone number, email, vehicle details, selected services, preferred date, and any notes are all pre-filled from the form submission.
  4. From there, you follow the normal booking workflow: review the details, confirm the booking, assign it to a bay and technician, and move it through the lifecycle (Confirmed, In-Service, Completed).

No manual data entry required -- everything the customer typed in the form flows straight into the booking record.

Good to know: The booking form automatically creates a customer record in your system if the customer is new. If an existing customer books again, their details are linked to their existing profile. This means your customer database grows naturally as bookings come in.

Tips & Best Practices​

Getting the most bookings​

  • Put your booking link everywhere. Add it to your Google Business profile, social media bios, email signatures, and WhatsApp auto-replies. The easier it is to find, the more bookings you will get.
  • Keep your service list up to date. Customers can only book services that are in your autoGMS service menu. If you add a new service, it automatically appears on the booking form.
  • Turn on Show Prices if your pricing is competitive. Transparency builds trust and helps customers make quick decisions.
  • Turn off Show Prices if your pricing varies a lot by vehicle or condition. You can always quote the customer after they book.

Making a great first impression​

  • Choose a brand colour that matches your logo. The hero background colour and form accent colours should feel consistent with your garage's brand.
  • Write a compelling description. Your tagline is the first thing customers read. Keep it short, specific, and benefit-focused (for example, "Same-day MOT with free re-test" rather than "Welcome to our garage").
  • Add feature badges to highlight what makes you stand out: "15 Years Experience", "Genuine Parts Only", "Free Collection & Delivery", etc.
  • Upload gallery photos of your workshop, your team, or happy customers. Real photos build more trust than stock images.
  • Enable the map and info card so customers can easily find your garage and see your opening hours at a glance.

Keeping things running smoothly​

  • Check your bookings regularly. Online bookings come in as Pending and need to be confirmed. The sooner you respond, the happier the customer.
  • Test your widget after installation. Visit your website as a customer would and go through the full booking flow. Make sure everything looks right and that the booking appears in your dashboard.
  • Keep your opening hours current. The booking form uses your garage's opening hours to grey out unavailable dates. If your hours change, update them in your garage settings so the calendar stays accurate.
  • Review your authorised domains if you change your website address. Old domains can be managed from your garage profile settings.

Frequently Asked Questions​

Do I need a website to use the booking form? No. The Booking Page tab gives you a standalone link that works without a website. You can share it on social media, messaging apps, email, or even as a QR code on printed materials.

Can I have both the booking page link and the embedded widget at the same time? Yes, absolutely. Many garages use the booking page link for social media and the embedded widget on their website. They both connect to the same garage and create bookings in the same place.

What happens if a customer books when my garage is closed? The booking is still created with a Pending status. You will see it in your dashboard the next time you log in (or sooner, if you have notifications enabled on your phone). The customer picks a preferred date, so you can review it and confirm when you are back.

Can I turn off online bookings temporarily? Yes. If your garage is set to an inactive status in autoGMS, the booking page will show an "offline" overlay to customers with your contact details. They will not be able to submit bookings until you reactivate.

Will the widget slow down my website? No. The widget code loads asynchronously, which means it does not block the rest of your page from loading. Your website will perform just as it did before.

Does the booking form work on mobile phones? Yes. The form is fully responsive. On the standalone booking page, it automatically switches to a mobile-optimised layout. When embedded in your website, it adapts to whatever container size is available.

What information does the customer need to provide? At a minimum, their first name, last name, phone number, vehicle make, and vehicle model. All other fields (email, date, notes, registration number) depend on your form settings and can be toggled on or off.

Can I change the look of the form after it is already installed on my website? Yes. Any changes you make on the Installation page are saved to your garage and take effect immediately. You do not need to update the code on your website -- the widget pulls its settings from autoGMS each time it loads.

Do I need to update the code on my website if autoGMS releases new features? No. The widget code you paste is a lightweight loader that always fetches the latest version automatically. New features, bug fixes, and improvements are applied without you needing to touch your website.

Can I embed the booking form on more than one website? Yes. Just authorise each domain and paste the same widget code on each site. All bookings will flow into the same garage in your dashboard.

What if I want different forms for different garages? Each garage in autoGMS has its own Installation page with its own widget code and booking page link. If you manage multiple garages, switch to the correct garage in the dashboard first, then visit its Installation page.

Why is my widget not showing up on my website? Check these things first:

  • Make sure your website domain is authorised (visit the Installation page and look for the domain list).
  • Make sure you pasted the code in an area of your page that allows HTML (not inside a plain text block).
  • Try clearing your browser cache and refreshing the page.
  • If you are using a website builder, make sure the HTML block is published and not in draft mode.

Can customers book multiple services at once? Yes. On the service selection step, customers can check as many services as they need. All selected services are included in the booking that appears in your dashboard.

Quick Reference​

What you want to doWhere to go
Get your booking page linkInstallation > Booking Page tab > Copy Booking Link button
Customise the booking page heroInstallation > Booking Page tab > Left column editor
Get your embed widget codeInstallation > Embed Widget tab > Copy Widget Code button
Customise form fields and coloursInstallation > Embed Widget tab > Form Customisation card
See platform-specific install stepsInstallation > Embed Widget tab > Platform Guides card
Add or manage authorised domainsInstallation page (first-time popup) or Garage Profile > General
View online bookingsBookings page in your dashboard (status: Pending)