Skip to main content

Online Booking: Booking Page and Website Form

Let customers book with you online, day or night. Every booking lands in your autoGMS dashboard with the customer's details already filled in. It arrives as Pending, or as Confirmed when Confirm automatically is on in Booking Settings.

This guide covers the Booking page and form screen, where you set up your booking link, design your booking page, word your booking form, and add the form to your website.

Overview​

Customers can book in two ways:

  1. Booking page -- A full booking page hosted by autoGMS. You get a link such as book.myautogms.com/g/your-garage to share anywhere: Google Business Profile, social media, WhatsApp, email signatures or a QR code.
  2. Website form -- The same booking form placed inside your own website, so customers book without leaving your site.

Both use the same settings and create bookings in the same garage.

How to Access​

  1. Log in to your autoGMS dashboard.
  2. Select the right garage if you manage more than one.
  3. Open Booking page and form from the Bookings & Jobs section in the sidebar, or from the Settings menu.

Good to know: Access follows the selected garage's Booking widget permission. Organisation owners, garage owners, autoGMS admins and super admins always have access. Garage admins, managers and custom staff need the permission turned on. Service Advisors, Receptionists and Technicians cannot open this page.

How the Page Works​

Booking page and form is one scrolling page with four groups: Link, Booking page, Booking form and Your website. Each group holds a few cards.

At the top of the page:

  • Find a setting -- Type a word such as "photos", "colours" or "code" to show only the matching cards.
  • Link, Booking page, Booking form, Your website -- Jump straight to a group.
  • N to fix -- An amber button that appears when something needs attention. Click it to show only those cards. It appears when your link still ends in a long code, when trust badges or workshop photos are switched on but empty, or when no website is approved yet.
  • Booking settings -- Opens your Booking Settings, where you control which fields the form asks for.

Saving your changes​

Changes you make on the cards are drafts until you save them. A changed card shows "Changed, not saved yet".

A bar at the bottom of the screen lists the cards you changed. Click Save changes to publish them, or Discard to drop them.

Two things save straight away and do not need the bar: changing your booking link name, and adding a website.

Preview​

The Preview shows the real booking page or website form, including changes you have not saved yet. While you have unsaved changes it says "Showing changes you have not saved".

  • Wide screens (about 1280px and up): the Preview column sits beside the settings and stays in view while you scroll.
  • Smaller screens and phones: click the Preview button in the search row to open it full screen. Click Done to close it.

Inside the preview:

  • Switch between Booking page and Website form.
  • For the booking page, choose Phone or Desktop.
  • For the website form, choose the Services or Details step.
  • Click Open page to open your live booking page in a new tab.
  • When the preview shows the Website form, the button reads Open form. It opens the form on its own, the way it loads inside your website.

When you point at a card, the preview switches to what that card changes. For example, pointing at Details step shows the details step of the website form.

The preview is the real page. If you submit a booking from it, it may create a real booking, so use test details.

This card holds the link customers use to book with you.

  • Copy link copies your booking link.
  • Open page opens your booking page in a new tab.

To change the readable name in your link (book.myautogms.com/g/your-name):

  1. Click the address row.
  2. Type the new name. Use letters, numbers and hyphens.
  3. Click Done. The new name saves straight away.

Old readable links keep redirecting to your garage, so links you already shared keep working. The link with your garage ID also always works.

If your link still ends in a long code, the card shows "Uses a code, not your name". Give it your garage name so customers can type and remember it.

To add a "Book online" link in Google Maps or Google Business Profile, use your booking link:

  1. Click Copy link on the Booking link card.
  2. Paste it into the booking, appointment, website or link field in Google Business Profile.

Do not use a Google Maps link to your address for this. That link gives customers directions to your garage. It is not your booking link.

Booking Page​

These cards control what customers see on your hosted booking page.

Trust badges​

Short reasons to book with you, such as a warranty or same-day service. They show under "Why this garage".

  1. Switch the card on with Show trust badges.
  2. Click Add badge.
  3. Type the Text. Under 40 characters fits on one line on a phone.
  4. Pick an Icon, then click Add badge.

Use Edit or Remove on any badge. Two or three badges work well.

Workshop photos​

Photos of your workshop, team or finished work. You can show up to 6.

  1. Switch the card on with Show workshop photos.
  2. Click Add photo.
  3. Paste a direct link to the image file into Photo link. It usually ends in .jpg, .png or .webp.
  4. Click Add photo.

Google Drive and OneDrive sharing pages are not direct image links. The panel warns you when you paste one, because the photo may not load for customers. A photo that cannot load shows "Image will not load" on the card. Click Remove to take it off.

Location and map​

Shows where to find you, with directions.

Switch the card on with Show location and map. The card then shows your garage address from Workshop settings, and your booking page shows that address and a map.

If Workshop settings has no address, the card shows "No address in Workshop settings" and the map does not show. Add your address in Workshop settings.

Hours and contact​

Shows your opening hours, phone and email. Switch it on or off with Show opening hours and contact.

These details come from Workshop settings. To change them, click Edit in Workshop settings.

Booking Form​

These cards control the wording and colours of the booking form. They apply to both your booking page and the website form.

When a wording field is empty, the card shows the default text as "Default: …" and customers see that default. Click any row to change it.

Service step​

Step 1 of 2, where customers pick services.

  • Heading and Short text -- Shown above the service list.
  • Show service prices -- Customers see the price next to each service. On by default.
  • More than one service -- Customers can add several services to one booking.

Details step​

Step 2 of 2, where customers enter their details.

  • Heading and Short text -- Shown above the details fields.
  • Above the button -- Small text above the final button, for example what happens next.
  • Button -- The label on the final booking button.

After booking​

  • Message -- Shown once the booking is sent, for example that your team will be in touch.

Colours​

Used on your booking page and website form.

  • Accent -- Selected services, the progress bar and links.
  • Buttons -- Continue and the final booking button.

Each opens a colour panel with Quick picks and an Exact colour picker. Click Use colour to apply it.

Customer fields​

The fields the form asks for are set in Booking Settings > Online booking form, not on this page. Click Booking settings at the top of the page to open them. There you can set email, notes, registration number, VIN, current mileage, vehicle make, vehicle model and arrival time slot to Hidden, Optional or Required.

Customer name, phone number, vehicle type, service or reason for visit, and preferred date are always required. MOT bookings always ask for a registration number, even when registration is normally hidden. You can set the arrival time slot only after Arrival time slots are turned on.

See Booking Settings for the full field guide.

Your Website​

Use this group to add the booking form to your own website.

Allowed websites (required)​

The website form only loads on websites you add here. This stops anyone from placing your form on a site you have not approved.

  1. Click Add website.
  2. Type your Website address, for example www.mygarage.com. You do not need https://.
  3. Click Add website.

We check that the site is live, then approve it. If we cannot reach the site, check the address and try again. Each website shows Approved or Checking.

You can add more than one website. Use the same code on each one.

Website code​

The code is always visible on this card. Copy website code works only once at least one website is approved. Until then, the card asks you to add your website first.

Paste the code where the form should appear, then publish the page and test a booking.

Here is what the code looks like. Your garage ID and link name 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-public-slug="your-garage"
  data-container-id="auto-gms-booking-widget"
  data-mode="embedded"
  async
  defer
></script>

You never need to edit this code. Copy it from the card and paste it into your website.

Good to know: The form works on a live website you have added and approved. Developer previews on localhost work too, but a saved HTML file opened straight from your computer may not, because it has no website address.

How to add it​

Pick the tool your website is built with: WordPress, Shopify, Wix, Squarespace, Webflow or Other. The card shows numbered steps for that tool. The same steps are below.

Before you start:

  1. Make sure your website shows Approved on the Allowed websites card.
  2. Click Copy website code on the Website code card.
  3. Paste the full code exactly as copied. It includes the <div> and the <script>.
  4. Publish the page, then test a booking on the live website.

Use the website code when your platform allows custom HTML or scripts. Use your booking link inside an iframe only when your platform blocks scripts or only allows iframes.

Platform editors change over time. If a button label is slightly different from the wording below, look for the platform's equivalent of Custom HTML, Code, Embed, Custom Liquid or Code Embed.

WordPress

Use a Custom HTML block on the page where you want customers to book.

  1. Log in to your WordPress admin dashboard.
  2. Open Pages or Posts, then edit the page where the booking form should appear.
  3. If you use the block editor (Gutenberg), click +, search for Custom HTML, and add that block.
  4. If you use the classic editor, switch from Visual to Text or HTML mode.
  5. Paste the full autoGMS code into the Custom HTML block or HTML editor.
  6. If you use Elementor, Divi, WPBakery or a similar page builder, add an HTML, Code or Custom Code widget and paste the code there.
  7. Update or publish the page.
  8. Visit the public page in a normal browser window and submit a test booking.

If WordPress removes the script tag, check whether your user role can add custom scripts. WordPress cleans HTML for users without the unfiltered_html capability, and some security plugins or managed hosts block script embeds. Ask a site admin to add the code, or use a trusted custom-code plugin if your account cannot save the script.

Shopify

Use a Custom Liquid or Custom HTML section on the page where the form should appear.

  1. Log in to Shopify Admin.
  2. Go to Online Store > Themes.
  3. On your current theme, click Customize.
  4. Open the page template where you want the form to appear.
  5. Add a section or block named Custom Liquid, Custom HTML or similar.
  6. Paste the full autoGMS code into that field.
  7. Save the theme.
  8. Open your storefront page and confirm the form loads.

If your theme does not offer a Custom Liquid section on that page, create a booking page template or ask your Shopify developer to place the code in the right template. Avoid a shared Header or Footer section unless you want the form on many pages.

Wix

Use Wix's Embed HTML element. This is the recommended approach for Wix.

  1. Open your site in the Wix editor.
  2. In the classic Wix Editor, click + Add Elements on the left. In the newer Wix Harmony Editor, click + Add at the top left.
  3. Choose Embed Code or Embed.
  4. Select Embed HTML or Embed code.
  5. Place the HTML box where you want the booking form to appear.
  6. Click Enter Code.
  7. Paste the full autoGMS code, including the <div> and <script>.
  8. Resize the HTML box so the form has enough room. A height of about 720px is a good start.
  9. If Wix asks for an accessible name or cookie category, use a clear name such as autoGMS booking form and choose the category that matches your site's cookie and privacy setup.
  10. Preview the page, then publish it.
  11. Test the live site after publishing.

If Wix blocks the script or the form does not resize well, use your booking link instead:

<iframe src="YOUR_BOOKING_PAGE_LINK" width="100%" height="720" style="border:0;"></iframe>

Paste this iframe code into the same Embed HTML element and replace YOUR_BOOKING_PAGE_LINK with the link from Copy link.

Squarespace

Use a Code Block on the page where you want the form to appear.

  1. Log in to Squarespace.
  2. Open the page where you want the form.
  3. Click Edit.
  4. Add a content block and choose Code.
  5. Make sure the block is set to HTML.
  6. Remove any placeholder content.
  7. Paste the full autoGMS code into the Code Block.
  8. If there is a Display Source option, leave it off.
  9. Click Apply, then Save.
  10. Open the public page and test a booking.

If the form does not load because your plan or template restricts scripts, use your booking link in an iframe:

<iframe src="YOUR_BOOKING_PAGE_LINK" width="100%" height="720" style="border:0;"></iframe>

Squarespace Code Blocks support HTML on all plans, but JavaScript and iframes can depend on your plan. If the Code Block shows the code as text or strips the iframe or script, check your Squarespace plan and make sure the block is set to HTML with Display Source off.

Webflow

Use Webflow's Code Embed element.

  1. Open the page in Webflow Designer.
  2. Open the Add panel.
  3. Add a Code Embed element where the booking form should appear.
  4. Paste the full autoGMS code into the embed editor.
  5. Save and close the window.
  6. Publish the site.
  7. Open the published page and submit a test booking.

Webflow Code Embed supports HTML, CSS inside <style> tags and JavaScript inside <script> tags. It does not run server-side code such as PHP or Python. Webflow limits the size of a single embed, but the autoGMS code is small enough.

Other

Use this for hand-coded websites, Framer embeds, static-site builders, or any platform that lets you paste custom HTML.

  1. Open the page or template where the booking form should appear.
  2. Add a custom HTML, embed or code block exactly where customers should see the form.
  3. Paste the full autoGMS code into that block.
  4. Keep the container ID in the code the same as the script's data-container-id.
  5. If you place more than one form on a page, give each container a unique ID and update the matching data-container-id.
  6. Publish or deploy the page to your website.
  7. Visit the live page and complete a test booking.

On a hand-coded page, the code goes inside the <body> where the form should appear. You do not need to put it in the <head>.

Start over​

Reset to defaults puts the booking page and form back to the default wording, colours and sections. You are asked to confirm first, and you cannot undo it.

Your booking link and your allowed websites stay as they are.

The Customer Booking Experience​

Booking page​

On a computer, customers see the sections you switched on (trust badges, workshop photos, location and map, hours and contact) beside the booking form.

On phones and tablets, the page switches to a full-screen layout with the form in front.

Website form​

On your website, the form appears as a compact form inside your page. It fits the space you give it on desktop and mobile.

The booking flow​

Step 1: Vehicle and services

  1. The customer chooses a vehicle type.
  2. They pick one service, or several if More than one service is on.
  3. They can open "Describe Your Issue" to type a note.
  4. They click Continue.

Step 2: Details

  1. The customer enters their first and last name.
  2. They enter their phone number. The form uses your garage's country code.
  3. They fill in any fields you set to Optional or Required in Booking Settings, such as email, vehicle make and model, registration, VIN, mileage, time slot or notes.
  4. For MOT services, the registration number shows even if you normally hide it.
  5. They click the final button to send the booking.

Step 3: Confirmation

The customer sees a thank-you screen with your garage name, a summary of the date, vehicle and service, and your After booking message.

Good to know: The form also tells customers that by booking they agree to receive booking updates and reminders by SMS.

Language​

The booking page and website form support more than one language. If your garage's preferred language is Arabic, or your garage name is in Arabic, customers can switch between English and Arabic. Arabic also switches the layout to right-to-left.

How Online Bookings Appear in Your Dashboard​

  1. You get a real-time notification if notifications are on.
  2. The booking appears in your Bookings list as Pending, or as Confirmed if Confirm automatically is on.
  3. The customer's name, phone, email, vehicle, services, preferred date, time slot (if used) and notes are already filled in.
  4. You then follow your normal workflow: review, confirm, assign a bay and technician, and move the job through Confirmed, In-Service and Completed.

Good to know: A new customer gets a customer record automatically. A returning customer's booking links to their existing record.

Tips​

  • Share your booking link everywhere. Add it to Google Business Profile, social media bios, email signatures and WhatsApp auto-replies.
  • Give your link your garage name. A readable link is easier to type and trust.
  • Keep your service list up to date. Customers can only book services in your autoGMS service menu. New services appear on the form automatically.
  • Show prices when your pricing is competitive. Hide them when prices vary a lot by vehicle or condition.
  • Match your brand. Pick an accent and button colour that fit your logo.
  • Add two or three trust badges, such as "Genuine parts only" or "Free collection and delivery".
  • Use real workshop photos. They build more trust than stock images.
  • Keep your opening hours current in Workshop settings. The form uses them to offer available dates and, if turned on, time slots.
  • Test after installing. Make a test booking from your live website and check it appears in your dashboard.
  • Add your new website on Allowed websites if your website address changes.

Frequently Asked Questions​

Do I need a website to take online bookings? No. Your booking link works on its own. Share it on social media, in messages, by email or as a QR code.

Can I use the booking link and the website form together? Yes. 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 created as Pending, so you can review and confirm it when you are back. With Confirm automatically on, eligible bookings are confirmed straight away.

Can customers choose an appointment time? Yes. Turn on Arrival time slots in Booking Settings, then set Arrival time slot to Optional or Required under Booking Settings > Online booking form. Customers then see a time field next to the date.

Can I turn off online bookings for a while? Yes. If your garage is set to inactive in autoGMS, the booking page shows an "offline" message with your contact details. Customers cannot book until you reactivate it.

Will the form slow down my website? No. The code loads in the background and does not block the rest of your page.

Does the booking form work on phones? Yes. The booking page switches to a phone layout, and the website form fits the space on your page.

What must the customer provide? At least their first name, last name, phone number, vehicle type, service and preferred date. Anything else depends on your fields in Booking Settings > Online booking form and rules such as MOT registration or time slots.

Do I need to update the code on my website after I change my settings? No. When you click Save changes, your booking page and website form update. The code on your website stays the same.

Do I need to update the code when autoGMS releases new features? No. The code always loads the latest version.

Can I add the form to more than one website? Yes. Add each website on Allowed websites and paste the same code on each site. All bookings go to the same garage.

What if I manage more than one garage? Each garage has its own booking link, settings and website code. Switch to the right garage first, then open Booking page and form.

Why is the form not showing on my website? Check these first:

  • Your website shows Approved on the Allowed websites card.
  • You pasted the code into a block that allows HTML, not a plain text block.
  • The page with the code is published, not a draft.
  • You cleared your browser cache and refreshed the page.

Quick Reference​

What you want to doWhere to go
Copy your booking linkLink > Booking link > Copy link
Change your link nameLink > Booking link > click the address row
Show trust badges, photos, map, or hours and contactBooking page > the matching card's switch
Change the form's wordingBooking form > Service step, Details step or After booking
Change form coloursBooking form > Colours
Set optional and required customer fieldsBooking settings button > Online booking form
Preview your changesPreview column, or the Preview button on smaller screens
Add your websiteYour website > Allowed websites > Add website
Copy your website codeYour website > Website code > Copy website code
See install steps for your platformYour website > How to add it
Reset wording, colours and sectionsYour website > Start over > Reset to defaults
See online bookingsBookings in your dashboard (Pending, or Confirmed with automatic confirmation)