[{"data":1,"prerenderedAt":509},["ShallowReactive",2],{"\u002Fguide\u002Fbook-on-any-website":3},{"page":4,"pages":463},{"id":5,"title":6,"body":7,"description":453,"extension":454,"meta":455,"navigation":456,"order":457,"path":458,"placeholder":459,"seo":460,"stem":461,"__hash__":462},"guide\u002Fguide\u002Fbook-on-any-website.md","Book on any website",{"type":8,"value":9,"toc":440},"minimark",[10,20,25,77,84,88,91,116,126,133,136,140,143,153,171,176,282,286,296,389,399,403,410,414,417,423,427,437],[11,12,13,14,19],"p",{},"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 ",[15,16,18],"a",{"href":17},"\u002Fguide\u002Fwordpress","Connecting a WordPress site",".",[21,22,24],"h2",{"id":23},"connect-your-website","Connect your website",[26,27,28,44,64,71],"ol",{},[29,30,31,32,36,37,40,41,19],"li",{},"Open ",[33,34,35],"strong",{},"Settings → Website"," and the ",[33,38,39],{},"Address"," tab. Find ",[33,42,43],{},"Booking on your website",[29,45,46,47,50,51,55,56,59,60,63],{},"Under ",[33,48,49],{},"Website addresses",", enter each address your site is reached on, such as ",[52,53,54],"code",{},"https:\u002F\u002Fwww.yourfirm.co.uk"," and ",[52,57,58],{},"https:\u002F\u002Fyourfirm.co.uk",". Each one is ",[52,61,62],{},"https:\u002F\u002F"," and the host name only, with no page path. You can add up to five.",[29,65,66,67,70],{},"Enter the ",[33,68,69],{},"Booking page",": the full address of the page that will hold the form. It must be on one of your website addresses.",[29,72,73,74,19],{},"Choose ",[33,75,76],{},"Connect",[11,78,79,80,83],{},"The card then shows ",[33,81,82],{},"Waiting for proof"," until DoRoutes knows the domain is yours.",[21,85,87],{"id":86},"prove-you-own-your-website","Prove you own your website",[11,89,90],{},"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):",[92,93,94,107],"ul",{},[29,95,96,99,100,103,104,19],{},[33,97,98],{},"Name:"," ",[52,101,102],{},"_doroutes."," followed by your domain, such as ",[52,105,106],{},"_doroutes.yourfirm.co.uk",[29,108,109,112,113,19],{},[33,110,111],{},"Value:"," the value shown in DoRoutes, starting ",[52,114,115],{},"doroutes-connect=",[11,117,118,119,55,122,125],{},"One record per domain covers every address on it, so ",[52,120,121],{},"www.yourfirm.co.uk",[52,123,124],{},"yourfirm.co.uk"," need only one.",[11,127,128,129,132],{},"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 ",[33,130,131],{},"Check now",". Once every domain is found, the connection goes live and the card shows your booking page and addresses.",[11,134,135],{},"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.",[21,137,139],{"id":138},"paste-the-snippet","Paste the snippet",[11,141,142],{},"Once connected, the card shows a snippet like this:",[144,145,151],"pre",{"className":146,"code":148,"language":149,"meta":150},[147],"language-text","\u003Cscript type=\"module\" src=\"https:\u002F\u002Fapi.doroutes.com\u002Fbooking\u002Fv1\u002Fbooking.js\">\u003C\u002Fscript>\n\u003Cdoroutes-booking slug=\"yourfirm\" colour=\"#b23f0e\" radius=\"8\" privacy=\"https:\u002F\u002Fwww.yourfirm.co.uk\u002Fprivacy\">\u003C\u002Fdoroutes-booking>\n","text","",[52,152,148],{"__ignoreMap":150},[11,154,155,156,159,160,55,163,166,167,170],{},"Set the ",[33,157,158],{},"Colour",", ",[33,161,162],{},"Corner radius",[33,164,165],{},"Privacy policy"," on the card and the snippet updates as you type. Choose ",[33,168,169],{},"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.",[172,173,175],"h3",{"id":174},"what-you-can-set","What you can set",[177,178,179,192],"table",{},[180,181,182],"thead",{},[183,184,185,189],"tr",{},[186,187,188],"th",{},"Attribute",[186,190,191],{},"What it does",[193,194,195,206,220,238,248,262,272],"tbody",{},[183,196,197,203],{},[198,199,200],"td",{},[52,201,202],{},"slug",[198,204,205],{},"Your firm. Filled in for you; leave it as it is.",[183,207,208,213],{},[198,209,210],{},[52,211,212],{},"colour",[198,214,215,216,219],{},"Your brand colour, as ",[52,217,218],{},"#rrggbb",". Buttons and highlights are built from it.",[183,221,222,227],{},[198,223,224],{},[52,225,226],{},"radius",[198,228,229,230,233,234,237],{},"How rounded corners are, from ",[52,231,232],{},"0"," to ",[52,235,236],{},"24"," pixels.",[183,239,240,245],{},[198,241,242],{},[52,243,244],{},"privacy",[198,246,247],{},"The address of your privacy policy, linked from the form.",[183,249,250,255],{},[198,251,252],{},[52,253,254],{},"font",[198,256,257,258,261],{},"A font list, such as ",[52,259,260],{},"\"Lato\", sans-serif",", if you don't want the form's own fonts. The font must already be loaded on your page.",[183,263,264,269],{},[198,265,266],{},[52,267,268],{},"inherit-font",[198,270,271],{},"Add it with no value to use your page's font.",[183,273,274,279],{},[198,275,276],{},[52,277,278],{},"css",[198,280,281],{},"Your own CSS for the form.",[172,283,285],{"id":284},"styling-with-your-own-css","Styling with your own CSS",[11,287,288,289,291,292,295],{},"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 ",[52,290,278],{}," attribute, using these names with ",[52,293,294],{},"::part()",":",[177,297,298,307],{},[180,299,300],{},[183,301,302,305],{},[186,303,304],{},"Part",[186,306],{},[193,308,309,319,329,339,349,359,369,379],{},[183,310,311,316],{},[198,312,313],{},[52,314,315],{},"booking",[198,317,318],{},"the whole form",[183,320,321,326],{},[198,322,323],{},[52,324,325],{},"form",[198,327,328],{},"each form",[183,330,331,336],{},[198,332,333],{},[52,334,335],{},"heading",[198,337,338],{},"headings",[183,340,341,346],{},[198,342,343],{},[52,344,345],{},"button",[198,347,348],{},"every button",[183,350,351,356],{},[198,352,353],{},[52,354,355],{},"button-primary",[198,357,358],{},"the main button on each step",[183,360,361,366],{},[198,362,363],{},[52,364,365],{},"price",[198,367,368],{},"the price",[183,370,371,376],{},[198,372,373],{},[52,374,375],{},"map",[198,377,378],{},"the route map",[183,380,381,386],{},[198,382,383],{},[52,384,385],{},"notice",[198,387,388],{},"messages and warnings",[11,390,391,392,395,396,19],{},"For example, ",[52,393,394],{},"css=\"::part(button-primary) { text-transform: uppercase; }\"",". The CSS can also set the form's colour tokens, such as ",[52,397,398],{},"--c-brand",[21,400,402],{"id":401},"recaptcha","reCAPTCHA",[11,404,405,406,409],{},"If you ask for reCAPTCHA on sign-in (",[33,407,408],{},"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.",[21,411,413],{"id":412},"what-connecting-changes","What connecting changes",[11,415,416],{},"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.",[11,418,419,422],{},[33,420,421],{},"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.",[21,424,426],{"id":425},"change-or-disconnect","Change or disconnect",[11,428,73,429,432,433,436],{},[33,430,431],{},"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. ",[33,434,435],{},"Disconnect"," ends the connection straight away. If the WordPress plugin made the connection, change it in WordPress; you can still disconnect it here.",[11,438,439],{},"Each change emails your Owners.",{"title":150,"searchDepth":441,"depth":441,"links":442},2,[443,444,445,450,451,452],{"id":23,"depth":441,"text":24},{"id":86,"depth":441,"text":87},{"id":138,"depth":441,"text":139,"children":446},[447,449],{"id":174,"depth":448,"text":175},3,{"id":284,"depth":448,"text":285},{"id":401,"depth":441,"text":402},{"id":412,"depth":441,"text":413},{"id":425,"depth":441,"text":426},"Put the DoRoutes booking form on the website you already have, connect it and prove you own its domain.","md",{},true,12,"\u002Fguide\u002Fbook-on-any-website",false,{"title":6,"description":453},"guide\u002Fbook-on-any-website","Qv9e-VydRm1uEfkiDMya7VDb2vI1qwWgyIrGZ1IDuYQ",[464,465,469,473,477,481,485,489,493,497,500,502,505],{"path":458,"title":6,"order":457},{"path":466,"title":467,"order":468},"\u002Fguide\u002Fday-planning","Day planning",6,{"path":470,"title":471,"order":472},"\u002Fguide\u002Fgetting-started","Getting started",1,{"path":474,"title":475,"order":476},"\u002Fguide\u002Fimporting-records","Importing records",11,{"path":478,"title":479,"order":480},"\u002Fguide\u002Fjobs-and-the-diary","Jobs and the diary",5,{"path":482,"title":483,"order":484},"\u002Fguide\u002Flive-gps-and-tracking","Live GPS and tracking",8,{"path":486,"title":487,"order":488},"\u002Fguide\u002Fpayments-and-accounts","Payments and accounts",10,{"path":490,"title":491,"order":492},"\u002Fguide\u002Fquotes","Quotes",4,{"path":494,"title":495,"order":496},"\u002Fguide\u002Fthe-driver-app","The driver app",7,{"path":498,"title":499,"order":448},"\u002Fguide\u002Fvans-and-staff","Vans and staff",{"path":17,"title":18,"order":501},13,{"path":503,"title":504,"order":441},"\u002Fguide\u002Fyour-firm-and-settings","Your firm and settings",{"path":506,"title":507,"order":508},"\u002Fguide\u002Fyour-website","Your website",9,1793711177484]