Pre-release Documentation for Ascent Direct Booking. Not yet approved for commercial release. View availability details

Connect an existing website

The demonstrated path is a button or link to the booking page. An embed was not demonstrated, so there is no embed snippet.

On this page

  1. Copy the booking page address
  2. Add a Book an appointment button
  3. Test the button signed out and on a phone

Copy the booking page address

Role
Business owner
Prerequisites
Today says the booking page is ready.
Menu path
Booking owner → Today → Open booking page

Action. Open booking page and copy the address of the booking page it opens. Use that address. Do not use the guide, the owner page, or a local fixture address.

Saved result. The customer page shows Service, Date, Time, and Confirm, and says no payment is required today.

Reload check. Open the copied address in a signed-out window. The same booking page appears.

Safe recovery. If the address opens Booking owner or this guide, you copied the wrong page. Return to Open booking page and copy the customer page.

Customer service step
Customer service step. A separate selection from the completed booking. After category Body, Haircut is listed as 30 mins and GBP 25.00, with Add. Progress labels are Service, Date, Time, and Confirm. The page says no payment is required today.

Open the full-size image

Add a Book an appointment button

Role
The person who edits the existing website
Prerequisites
You have the booking page address from Open booking page. The WordPress block editor on the fixture was not walked, so this is the link itself, not a captured editor click-path.
Menu path
The existing website’s page editor. On WordPress, add a link or button in the page content. Other site builders were not opened.
Field reference
FieldExampleWhat it does
Visible labelBook an appointmentWhat the visitor reads.
DestinationThe address copied from Open booking pageThe customer booking page, not the owner page and not this guide.

Action. Save the page. A non-clickable pattern for the link is shown below. Replace the destination with the copied address before using it.

Saved result. The saved page shows Book an appointment. This fixture did not save that button on a second page.

Reload check. Reload the website page. The button is still there and its destination is still the booking page address.

Safe recovery. If the button opens the wrong site, edit the destination and save again. Do not paste an embed snippet. Embedding was not demonstrated.

Test the button signed out and on a phone

Role
A signed-out visitor
Prerequisites
The button destination is the booking page address.
Menu path
The website page, signed out, including a narrow phone-width window.

Action. Press Book an appointment. Confirm the page shows Service, Date, Time, and Confirm, and says no payment is required today.

Saved result. The signed-out booking page was captured on this fixture, including a 390 by 844 CSS pixel view of its start. The button on a separate website page was not placed, so that second-page press was not captured.

Reload check. Repeat the press in a private window. It should not open Booking owner.

Safe recovery. If a phone-width window cuts the button off, put the link in the page content rather than only in a wide header. The booking page itself did not overflow the guide at 390 CSS pixels in the later guide check; that is the guide, not the customer site.

Signed-out booking page at phone width
Signed-out booking page at phone width. The signed-out booking page captured with a 390 by 844 CSS pixel request, before a category is chosen. It is the start of that page, not the 28 October confirmation.

Open the full-size image

Link pattern

This pattern is text, not a working link. Replace the destination with the address from Open booking page before anyone uses it.

<a href="PASTE-THE-OPEN-BOOKING-PAGE-ADDRESS">Book an appointment</a>