[{"data":1,"prerenderedAt":884},["ShallowReactive",2],{"doc:\u002Fv\u002F2026.3\u002Fscheduling\u002Fembed-booking-on-your-website":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"section":10,"version":11,"lastUpdated":12,"body":13,"_type":878,"_id":879,"_source":880,"_file":881,"_stem":882,"_extension":883},"\u002Fv\u002F2026.3\u002Fscheduling\u002Fembed-booking-on-your-website","scheduling",false,"","Embed booking on your website","Add your Workspace369 booking page to any website inline or as a popup button with one script tag, fall back to a plain iframe, or drive it from JavaScript.","Scheduling","2026.3","2026-09-07",{"type":14,"children":15,"toc":866},"root",[16,32,39,106,111,117,132,145,172,178,199,208,227,240,249,255,267,276,297,303,554,579,585,624,630,635,644,735,741,760,765,771,844,857],{"type":17,"tag":18,"props":19,"children":20},"element","p",{},[21,24,30],{"type":22,"value":23},"text","Your booking page does not have to live only at 369.dev. Paste one snippet from ",{"type":17,"tag":25,"props":26,"children":27},"strong",{},[28],{"type":22,"value":29},"Share & embed",{"type":22,"value":31}," into your website and clients can book without leaving your site. The embed shows the same services, availability, and payment steps as the public page.",{"type":17,"tag":33,"props":34,"children":36},"h2",{"id":35},"choose-an-embed-style",[37],{"type":22,"value":38},"Choose an embed style",{"type":17,"tag":40,"props":41,"children":42},"table",{},[43,62],{"type":17,"tag":44,"props":45,"children":46},"thead",{},[47],{"type":17,"tag":48,"props":49,"children":50},"tr",{},[51,57],{"type":17,"tag":52,"props":53,"children":54},"th",{},[55],{"type":22,"value":56},"Style",{"type":17,"tag":52,"props":58,"children":59},{},[60],{"type":22,"value":61},"Best for",{"type":17,"tag":63,"props":64,"children":65},"tbody",{},[66,80,93],{"type":17,"tag":48,"props":67,"children":68},{},[69,75],{"type":17,"tag":70,"props":71,"children":72},"td",{},[73],{"type":22,"value":74},"Inline",{"type":17,"tag":70,"props":76,"children":77},{},[78],{"type":22,"value":79},"A dedicated booking page or section on your site; the booking flow renders in place and grows to fit its content",{"type":17,"tag":48,"props":81,"children":82},{},[83,88],{"type":17,"tag":70,"props":84,"children":85},{},[86],{"type":22,"value":87},"Popup button",{"type":17,"tag":70,"props":89,"children":90},{},[91],{"type":22,"value":92},"Any page on the site; a floating button opens the booking flow in an overlay",{"type":17,"tag":48,"props":94,"children":95},{},[96,101],{"type":17,"tag":70,"props":97,"children":98},{},[99],{"type":22,"value":100},"Plain iframe",{"type":17,"tag":70,"props":102,"children":103},{},[104],{"type":22,"value":105},"Site builders that block custom scripts; fixed height, no popup, no JavaScript API",{"type":17,"tag":18,"props":107,"children":108},{},[109],{"type":22,"value":110},"All three come ready to copy from Share & embed with your workspace and page already filled in. Every embed shows a \"Powered by Workspace369\" credit line.",{"type":17,"tag":33,"props":112,"children":114},{"id":113},"add-an-inline-booking-page",[115],{"type":22,"value":116},"Add an inline booking page",{"type":17,"tag":118,"props":119,"children":120},"ol",{},[121,127],{"type":17,"tag":122,"props":123,"children":124},"li",{},[125],{"type":22,"value":126},"Open the booking page's Share & embed action and copy the inline snippet.",{"type":17,"tag":122,"props":128,"children":129},{},[130],{"type":22,"value":131},"Paste it into your site's HTML where the booking flow should appear.",{"type":17,"tag":133,"props":134,"children":139},"pre",{"className":135,"code":137,"language":138,"meta":7},[136],"language-html","\u003Cscript src=\"https:\u002F\u002F369.dev\u002Fbooking.js\" data-booking\n  data-workspace=\"WS_ID\"\n  data-page=\"SLUG\" async>\u003C\u002Fscript>\n","html",[140],{"type":17,"tag":141,"props":142,"children":143},"code",{"__ignoreMap":7},[144],{"type":22,"value":137},{"type":17,"tag":18,"props":146,"children":147},{},[148,154,156,162,164,170],{"type":17,"tag":141,"props":149,"children":151},{"className":150},[],[152],{"type":22,"value":153},"WS_ID",{"type":22,"value":155}," is your workspace ID and ",{"type":17,"tag":141,"props":157,"children":159},{"className":158},[],[160],{"type":22,"value":161},"SLUG",{"type":22,"value":163}," is the page's link slug; the snippet from Share & embed already contains both, and the default page needs no ",{"type":17,"tag":141,"props":165,"children":167},{"className":166},[],[168],{"type":22,"value":169},"data-page",{"type":22,"value":171}," at all. The frame sizes itself to the booking flow as the client moves through it, so it needs no fixed height.",{"type":17,"tag":33,"props":173,"children":175},{"id":174},"add-a-popup-button",[176],{"type":22,"value":177},"Add a popup button",{"type":17,"tag":118,"props":179,"children":180},{},[181,186],{"type":17,"tag":122,"props":182,"children":183},{},[184],{"type":22,"value":185},"Open the booking page's Share & embed action and copy the popup snippet.",{"type":17,"tag":122,"props":187,"children":188},{},[189,191,197],{"type":22,"value":190},"Paste it just before the closing ",{"type":17,"tag":141,"props":192,"children":194},{"className":193},[],[195],{"type":22,"value":196},"\u003C\u002Fbody>",{"type":22,"value":198}," tag of every page where the button should appear, or into your site builder's site-wide footer or custom-code area so the button appears everywhere.",{"type":17,"tag":133,"props":200,"children":203},{"className":201,"code":202,"language":138,"meta":7},[136],"\u003Cscript src=\"https:\u002F\u002F369.dev\u002Fbooking.js\" data-booking\n  data-workspace=\"WS_ID\"\n  data-page=\"SLUG\"\n  data-mode=\"popup\" data-label=\"Book now\" data-color=\"#111827\" async>\u003C\u002Fscript>\n",[204],{"type":17,"tag":141,"props":205,"children":206},{"__ignoreMap":7},[207],{"type":22,"value":202},{"type":17,"tag":18,"props":209,"children":210},{},[211,217,219,225],{"type":17,"tag":141,"props":212,"children":214},{"className":213},[],[215],{"type":22,"value":216},"data-label",{"type":22,"value":218}," sets the button text and ",{"type":17,"tag":141,"props":220,"children":222},{"className":221},[],[223],{"type":22,"value":224},"data-color",{"type":22,"value":226}," its color. The booking flow opens in an overlay that scrolls inside itself; the client closes it with the close control or by pressing Escape.",{"type":17,"tag":18,"props":228,"children":229},{},[230,232,238],{"type":22,"value":231},"To open the popup from your own button or link instead, add ",{"type":17,"tag":141,"props":233,"children":235},{"className":234},[],[236],{"type":22,"value":237},"data-w369-booking",{"type":22,"value":239}," to any element on the page:",{"type":17,"tag":133,"props":241,"children":244},{"className":242,"code":243,"language":138,"meta":7},[136],"\u003Ca href=\"#\" data-w369-booking>Book a consultation\u003C\u002Fa>\n",[245],{"type":17,"tag":141,"props":246,"children":247},{"__ignoreMap":7},[248],{"type":22,"value":243},{"type":17,"tag":33,"props":250,"children":252},{"id":251},"use-a-plain-iframe",[253],{"type":22,"value":254},"Use a plain iframe",{"type":17,"tag":118,"props":256,"children":257},{},[258,263],{"type":17,"tag":122,"props":259,"children":260},{},[261],{"type":22,"value":262},"Open the booking page's Share & embed action and copy the iframe snippet.",{"type":17,"tag":122,"props":264,"children":265},{},[266],{"type":22,"value":131},{"type":17,"tag":133,"props":268,"children":271},{"className":269,"code":270,"language":138,"meta":7},[136],"\u003Ciframe src=\"https:\u002F\u002F369.dev\u002Fws\u002FWS_ID\u002Fbook\u002FSLUG?embed=1\" title=\"Book an appointment\" width=\"100%\" height=\"900\" style=\"border:0;display:block\" loading=\"lazy\">\u003C\u002Fiframe>\n",[272],{"type":17,"tag":141,"props":273,"children":274},{"__ignoreMap":7},[275],{"type":22,"value":270},{"type":17,"tag":18,"props":277,"children":278},{},[279,281,287,289,295],{"type":22,"value":280},"Use this when your site builder strips or blocks script tags. The iframe cannot resize itself, so adjust ",{"type":17,"tag":141,"props":282,"children":284},{"className":283},[],[285],{"type":22,"value":286},"height",{"type":22,"value":288}," to fit the longest step of the booking flow. The popup mode, the ",{"type":17,"tag":141,"props":290,"children":292},{"className":291},[],[293],{"type":22,"value":294},"data-",{"type":22,"value":296}," attributes, and the JavaScript API are not available with a plain iframe.",{"type":17,"tag":33,"props":298,"children":300},{"id":299},"attributes-reference",[301],{"type":22,"value":302},"Attributes reference",{"type":17,"tag":40,"props":304,"children":305},{},[306,327],{"type":17,"tag":44,"props":307,"children":308},{},[309],{"type":17,"tag":48,"props":310,"children":311},{},[312,317,322],{"type":17,"tag":52,"props":313,"children":314},{},[315],{"type":22,"value":316},"Attribute",{"type":17,"tag":52,"props":318,"children":319},{},[320],{"type":22,"value":321},"Required",{"type":17,"tag":52,"props":323,"children":324},{},[325],{"type":22,"value":326},"Purpose",{"type":17,"tag":63,"props":328,"children":329},{},[330,352,373,394,415,435,455,476,497,518],{"type":17,"tag":48,"props":331,"children":332},{},[333,342,347],{"type":17,"tag":70,"props":334,"children":335},{},[336],{"type":17,"tag":141,"props":337,"children":339},{"className":338},[],[340],{"type":22,"value":341},"data-booking",{"type":17,"tag":70,"props":343,"children":344},{},[345],{"type":22,"value":346},"Yes",{"type":17,"tag":70,"props":348,"children":349},{},[350],{"type":22,"value":351},"Marks the script tag as a booking embed",{"type":17,"tag":48,"props":353,"children":354},{},[355,364,368],{"type":17,"tag":70,"props":356,"children":357},{},[358],{"type":17,"tag":141,"props":359,"children":361},{"className":360},[],[362],{"type":22,"value":363},"data-workspace",{"type":17,"tag":70,"props":365,"children":366},{},[367],{"type":22,"value":346},{"type":17,"tag":70,"props":369,"children":370},{},[371],{"type":22,"value":372},"Your workspace ID",{"type":17,"tag":48,"props":374,"children":375},{},[376,384,389],{"type":17,"tag":70,"props":377,"children":378},{},[379],{"type":17,"tag":141,"props":380,"children":382},{"className":381},[],[383],{"type":22,"value":169},{"type":17,"tag":70,"props":385,"children":386},{},[387],{"type":22,"value":388},"No",{"type":17,"tag":70,"props":390,"children":391},{},[392],{"type":22,"value":393},"The booking page slug; omit it for the default page",{"type":17,"tag":48,"props":395,"children":396},{},[397,406,410],{"type":17,"tag":70,"props":398,"children":399},{},[400],{"type":17,"tag":141,"props":401,"children":403},{"className":402},[],[404],{"type":22,"value":405},"data-mode=\"popup\"",{"type":17,"tag":70,"props":407,"children":408},{},[409],{"type":22,"value":388},{"type":17,"tag":70,"props":411,"children":412},{},[413],{"type":22,"value":414},"Shows a floating button instead of an inline frame",{"type":17,"tag":48,"props":416,"children":417},{},[418,426,430],{"type":17,"tag":70,"props":419,"children":420},{},[421],{"type":17,"tag":141,"props":422,"children":424},{"className":423},[],[425],{"type":22,"value":216},{"type":17,"tag":70,"props":427,"children":428},{},[429],{"type":22,"value":388},{"type":17,"tag":70,"props":431,"children":432},{},[433],{"type":22,"value":434},"The popup button text; defaults to \"Book now\"",{"type":17,"tag":48,"props":436,"children":437},{},[438,446,450],{"type":17,"tag":70,"props":439,"children":440},{},[441],{"type":17,"tag":141,"props":442,"children":444},{"className":443},[],[445],{"type":22,"value":224},{"type":17,"tag":70,"props":447,"children":448},{},[449],{"type":22,"value":388},{"type":17,"tag":70,"props":451,"children":452},{},[453],{"type":22,"value":454},"The popup button color as a hex value",{"type":17,"tag":48,"props":456,"children":457},{},[458,467,471],{"type":17,"tag":70,"props":459,"children":460},{},[461],{"type":17,"tag":141,"props":462,"children":464},{"className":463},[],[465],{"type":22,"value":466},"data-service",{"type":17,"tag":70,"props":468,"children":469},{},[470],{"type":22,"value":388},{"type":17,"tag":70,"props":472,"children":473},{},[474],{"type":22,"value":475},"Starts the flow with a service already selected",{"type":17,"tag":48,"props":477,"children":478},{},[479,488,492],{"type":17,"tag":70,"props":480,"children":481},{},[482],{"type":17,"tag":141,"props":483,"children":485},{"className":484},[],[486],{"type":22,"value":487},"data-member",{"type":17,"tag":70,"props":489,"children":490},{},[491],{"type":22,"value":388},{"type":17,"tag":70,"props":493,"children":494},{},[495],{"type":22,"value":496},"Starts the flow with a host already selected",{"type":17,"tag":48,"props":498,"children":499},{},[500,509,513],{"type":17,"tag":70,"props":501,"children":502},{},[503],{"type":17,"tag":141,"props":504,"children":506},{"className":505},[],[507],{"type":22,"value":508},"data-theme",{"type":17,"tag":70,"props":510,"children":511},{},[512],{"type":22,"value":388},{"type":17,"tag":70,"props":514,"children":515},{},[516],{"type":22,"value":517},"Applies a specific theme to the embed",{"type":17,"tag":48,"props":519,"children":520},{},[521,545,549],{"type":17,"tag":70,"props":522,"children":523},{},[524,530,532,538,539],{"type":17,"tag":141,"props":525,"children":527},{"className":526},[],[528],{"type":22,"value":529},"data-prefill-name",{"type":22,"value":531},", ",{"type":17,"tag":141,"props":533,"children":535},{"className":534},[],[536],{"type":22,"value":537},"data-prefill-email",{"type":22,"value":531},{"type":17,"tag":141,"props":540,"children":542},{"className":541},[],[543],{"type":22,"value":544},"data-prefill-phone",{"type":17,"tag":70,"props":546,"children":547},{},[548],{"type":22,"value":388},{"type":17,"tag":70,"props":550,"children":551},{},[552],{"type":22,"value":553},"Prefill the client's details",{"type":17,"tag":18,"props":555,"children":556},{},[557,559,564,565,570,572,577],{"type":22,"value":558},"Advanced — ",{"type":17,"tag":141,"props":560,"children":562},{"className":561},[],[563],{"type":22,"value":466},{"type":22,"value":531},{"type":17,"tag":141,"props":566,"children":568},{"className":567},[],[569],{"type":22,"value":487},{"type":22,"value":571},", and ",{"type":17,"tag":141,"props":573,"children":575},{"className":574},[],[576],{"type":22,"value":508},{"type":22,"value":578}," take internal identifiers and are meant for developer integrations; most sites should let the visitor choose.",{"type":17,"tag":33,"props":580,"children":582},{"id":581},"keep-campaign-attribution",[583],{"type":22,"value":584},"Keep campaign attribution",{"type":17,"tag":18,"props":586,"children":587},{},[588,594,595,601,602,608,609,615,616,622],{"type":17,"tag":141,"props":589,"children":591},{"className":590},[],[592],{"type":22,"value":593},"utm_source",{"type":22,"value":531},{"type":17,"tag":141,"props":596,"children":598},{"className":597},[],[599],{"type":22,"value":600},"utm_medium",{"type":22,"value":531},{"type":17,"tag":141,"props":603,"children":605},{"className":604},[],[606],{"type":22,"value":607},"utm_campaign",{"type":22,"value":531},{"type":17,"tag":141,"props":610,"children":612},{"className":611},[],[613],{"type":22,"value":614},"utm_term",{"type":22,"value":571},{"type":17,"tag":141,"props":617,"children":619},{"className":618},[],[620],{"type":22,"value":621},"utm_content",{"type":22,"value":623}," on the URL of the page hosting the embed are forwarded to the booking page, so campaign links keep their attribution.",{"type":17,"tag":33,"props":625,"children":627},{"id":626},"react-to-bookings-from-your-page",[628],{"type":22,"value":629},"React to bookings from your page",{"type":17,"tag":18,"props":631,"children":632},{},[633],{"type":22,"value":634},"The script installs a small JavaScript API on the page:",{"type":17,"tag":133,"props":636,"children":639},{"className":637,"code":638,"language":138,"meta":7},[136],"\u003Cbutton type=\"button\" onclick=\"W369Booking.open({ prefill: { name: 'Ada Lovelace', email: 'ada@example.com' } })\">Book an appointment\u003C\u002Fbutton>\n\u003Cscript>\n  window.addEventListener('w369:booked', (event) => {\n    const { bookingId, status, startMs } = event.detail;\n    \u002F\u002F record a conversion, show a thank-you message, and so on\n  });\n\u003C\u002Fscript>\n",[640],{"type":17,"tag":141,"props":641,"children":642},{"__ignoreMap":7},[643],{"type":22,"value":638},{"type":17,"tag":645,"props":646,"children":647},"ul",{},[648,675,686],{"type":17,"tag":122,"props":649,"children":650},{},[651,657,659,665,667,673],{"type":17,"tag":141,"props":652,"children":654},{"className":653},[],[655],{"type":22,"value":656},"W369Booking.open({ page, service, member, theme, prefill })",{"type":22,"value":658}," opens the booking flow in the popup overlay. Every option is optional and overrides the matching script attribute; ",{"type":17,"tag":141,"props":660,"children":662},{"className":661},[],[663],{"type":22,"value":664},"prefill",{"type":22,"value":666}," takes ",{"type":17,"tag":141,"props":668,"children":670},{"className":669},[],[671],{"type":22,"value":672},"{ name, email, phone }",{"type":22,"value":674},".",{"type":17,"tag":122,"props":676,"children":677},{},[678,684],{"type":17,"tag":141,"props":679,"children":681},{"className":680},[],[682],{"type":22,"value":683},"W369Booking.close()",{"type":22,"value":685}," closes the popup.",{"type":17,"tag":122,"props":687,"children":688},{},[689,695,697,703,705,711,713,719,720,726,727,733],{"type":17,"tag":141,"props":690,"children":692},{"className":691},[],[693],{"type":22,"value":694},"w369:booked",{"type":22,"value":696}," fires on ",{"type":17,"tag":141,"props":698,"children":700},{"className":699},[],[701],{"type":22,"value":702},"window",{"type":22,"value":704}," when a client completes the flow. ",{"type":17,"tag":141,"props":706,"children":708},{"className":707},[],[709],{"type":22,"value":710},"event.detail",{"type":22,"value":712}," carries ",{"type":17,"tag":141,"props":714,"children":716},{"className":715},[],[717],{"type":22,"value":718},"bookingId",{"type":22,"value":531},{"type":17,"tag":141,"props":721,"children":723},{"className":722},[],[724],{"type":22,"value":725},"status",{"type":22,"value":571},{"type":17,"tag":141,"props":728,"children":730},{"className":729},[],[731],{"type":22,"value":732},"startMs",{"type":22,"value":734},", the appointment's start time in milliseconds.",{"type":17,"tag":33,"props":736,"children":738},{"id":737},"payments-inside-an-embed",[739],{"type":22,"value":740},"Payments inside an embed",{"type":17,"tag":18,"props":742,"children":743},{},[744,746,751,753,758],{"type":22,"value":745},"When a service requires a deposit or full payment, the embed does not try to take the card inside the frame. The client sees a ",{"type":17,"tag":25,"props":747,"children":748},{},[749],{"type":22,"value":750},"Continue to secure payment",{"type":22,"value":752}," button that opens Stripe Checkout at the top level of the browser window. After paying, the client lands on a confirmation page on 369.dev with a ",{"type":17,"tag":25,"props":754,"children":755},{},[756],{"type":22,"value":757},"Back to example.com",{"type":22,"value":759}," button, where example.com is your site's domain, that returns them to your website.",{"type":17,"tag":18,"props":761,"children":762},{},[763],{"type":22,"value":764},"The slot stays held for 30 minutes during payment, exactly as on the public page.",{"type":17,"tag":33,"props":766,"children":768},{"id":767},"troubleshooting",[769],{"type":22,"value":770},"Troubleshooting",{"type":17,"tag":40,"props":772,"children":773},{},[774,790],{"type":17,"tag":44,"props":775,"children":776},{},[777],{"type":17,"tag":48,"props":778,"children":779},{},[780,785],{"type":17,"tag":52,"props":781,"children":782},{},[783],{"type":22,"value":784},"Symptom",{"type":17,"tag":52,"props":786,"children":787},{},[788],{"type":22,"value":789},"Check",{"type":17,"tag":63,"props":791,"children":792},{},[793,806,824],{"type":17,"tag":48,"props":794,"children":795},{},[796,801],{"type":17,"tag":70,"props":797,"children":798},{},[799],{"type":22,"value":800},"Nothing renders",{"type":17,"tag":70,"props":802,"children":803},{},[804],{"type":22,"value":805},"Your site builder may block custom scripts; confirm the script tag survived publishing, or switch to the plain iframe",{"type":17,"tag":48,"props":807,"children":808},{},[809,814],{"type":17,"tag":70,"props":810,"children":811},{},[812],{"type":22,"value":813},"\"Booking is not available\"",{"type":17,"tag":70,"props":815,"children":816},{},[817,819],{"type":22,"value":818},"The page is paused, or the last active page was paused or deleted. Resume it in ",{"type":17,"tag":25,"props":820,"children":821},{},[822],{"type":22,"value":823},"Booking Pages",{"type":17,"tag":48,"props":825,"children":826},{},[827,832],{"type":17,"tag":70,"props":828,"children":829},{},[830],{"type":22,"value":831},"The frame is cut off",{"type":17,"tag":70,"props":833,"children":834},{},[835,837,842],{"type":22,"value":836},"Inline embeds size themselves; a plain iframe needs a larger ",{"type":17,"tag":141,"props":838,"children":840},{"className":839},[],[841],{"type":22,"value":286},{"type":22,"value":843},"; popups scroll inside the overlay",{"type":17,"tag":18,"props":845,"children":846},{},[847,849,856],{"type":22,"value":848},"Continue to ",{"type":17,"tag":850,"props":851,"children":853},"a",{"href":852},"\u002Fv\u002F2026.3\u002Fscheduling\u002Fmanage-booking-requests\u002F",[854],{"type":22,"value":855},"Manage booking requests",{"type":22,"value":674},{"type":17,"tag":858,"props":859,"children":860},"blockquote",{},[861],{"type":17,"tag":18,"props":862,"children":863},{},[864],{"type":22,"value":865},"Embeds always show \"Powered by Workspace369\". Deposits and full payments open Stripe Checkout in the top-level window and need a connected Stripe account.",{"title":7,"searchDepth":867,"depth":867,"links":868},2,[869,870,871,872,873,874,875,876,877],{"id":35,"depth":867,"text":38},{"id":113,"depth":867,"text":116},{"id":174,"depth":867,"text":177},{"id":251,"depth":867,"text":254},{"id":299,"depth":867,"text":302},{"id":581,"depth":867,"text":584},{"id":626,"depth":867,"text":629},{"id":737,"depth":867,"text":740},{"id":767,"depth":867,"text":770},"markdown","content:v:2026.3:scheduling:embed-booking-on-your-website.md","content","v\u002F2026.3\u002Fscheduling\u002Fembed-booking-on-your-website.md","v\u002F2026.3\u002Fscheduling\u002Fembed-booking-on-your-website","md",1788762395660]