Book on any website
Put the DoRoutes booking form on the website you already have, connect it and prove you own its domain.
Customers can get a price, book, sign and pay without leaving your own website. Connect the website in DoRoutes, then paste a short snippet into the page where customers should book. On a WordPress site, use the plugin instead: see Connecting a WordPress site.
Connect your website
- Open Settings → Website and the Address tab. Find Booking on your website.
- Under Website addresses, enter each address your site is reached on, such as
https://www.yourfirm.co.ukandhttps://yourfirm.co.uk. Each one ishttps://and the host name only, with no page path. You can add up to five. - Enter the Booking page: the full address of the page that will hold the form. It must be on one of your website addresses.
- Choose Connect.
The card then shows Waiting for proof until DoRoutes knows the domain is yours.
Prove you own your website
DoRoutes shows a TXT record for each domain your addresses use. Add each one where your domain's DNS is managed (often the company you bought the domain from):
- Name:
_doroutes.followed by your domain, such as_doroutes.yourfirm.co.uk. - Value: the value shown in DoRoutes, starting
doroutes-connect=.
One record per domain covers every address on it, so www.yourfirm.co.uk and yourfirm.co.uk need only one.
A new record can take from a few minutes to a few hours to be seen. DoRoutes checks by itself every 15 minutes for 7 days, or choose Check now. Once every domain is found, the connection goes live and the card shows your booking page and addresses.
Leave the record in place. DoRoutes checks it every day. The first day it's missing, your Owners get an email. If it's still missing on the third day, the connection stops and waits for proof again. A domain can be connected to one DoRoutes account only.
Paste the snippet
Once connected, the card shows a snippet like this:
<script type="module" src="https://api.doroutes.com/booking/v1/booking.js"></script>
<doroutes-booking slug="yourfirm" colour="#b23f0e" radius="8" privacy="https://www.yourfirm.co.uk/privacy"></doroutes-booking>
Set the Colour, Corner radius and Privacy policy on the card and the snippet updates as you type. Choose Copy, then paste it into your booking page's HTML where the form should appear. Your website builder may call this an HTML, code or embed block.
What you can set
| Attribute | What it does |
|---|---|
slug | Your firm. Filled in for you; leave it as it is. |
colour | Your brand colour, as #rrggbb. Buttons and highlights are built from it. |
radius | How rounded corners are, from 0 to 24 pixels. |
privacy | The address of your privacy policy, linked from the form. |
font | A font list, such as "Lato", sans-serif, if you don't want the form's own fonts. The font must already be loaded on your page. |
inherit-font | Add it with no value to use your page's font. |
css | Your own CSS for the form. |
Styling with your own CSS
The form sits in its own space on the page, so your site's styles don't change it and its styles don't change your site. To style it, put CSS in the css attribute, using these names with ::part():
| Part | |
|---|---|
booking | the whole form |
form | each form |
heading | headings |
button | every button |
button-primary | the main button on each step |
price | the price |
map | the route map |
notice | messages and warnings |
For example, css="::part(button-primary) { text-transform: uppercase; }". The CSS can also set the form's colour tokens, such as --c-brand.
reCAPTCHA
If you ask for reCAPTCHA on sign-in (Settings → Sign-in), add your website's domain to your reCAPTCHA key in Google's reCAPTCHA admin console, so customers can sign in from the form on your site.
What connecting changes
While your website is connected, every link DoRoutes sends a customer goes to your booking page: quote emails, sign-in links, payment links and signing links. The DoRoutes-hosted customer pages send visitors there too. Disconnect, and links go back to the hosted pages.
Last seen on the card shows when the form was last used from your website. It tells you customers are reaching the form there, not that every page has the snippet.
Change or disconnect
Choose Edit to change the addresses or booking page. A change that adds a new domain waits for that domain's proof, and the current connection keeps working meanwhile. Disconnect ends the connection straight away. If the WordPress plugin made the connection, change it in WordPress; you can still disconnect it here.
Each change emails your Owners.