[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Fuitleg\u002Fonline-afspraken\u002Fonline-afspraken-voor-de-website-bouwer\u002Fdetail":3},{"id":4,"title":5,"body":6,"description":17,"extension":616,"meta":617,"navigation":229,"page_id":618,"path":619,"position":620,"seo":621,"sitemap":622,"stem":623,"tags":624,"updated":628,"__hash__":629},"pages\u002Fuitleg\u002Fonline-afspraken\u002Fonline-afspraken-voor-de-website-bouwer\u002Findex.md","Online Afspraken -  voor de website bouwer",{"type":7,"value":8,"toc":608},"minimark",[9,14,18,55,59,62,66,108,111,125,153,156,159,162,182,504,526,539,555,558,604],[10,11,13],"h1",{"id":12},"online-afspraken-voor-de-website-bouwer","Online Afspraken - voor de website bouwer",[15,16,17],"p",{},"Hoe implementeer je de OA widget?",[19,20,21,43,49],"ul",{},[22,23,24,29],"li",{},[25,26,28],"a",{"href":27},"#html-code","HTML code",[19,30,31,37],{},[22,32,33],{},[25,34,36],{"href":35},"#voor-autoflex10-en-autoflex-9","Voor Autoflex10 en Autoflex 9",[22,38,39],{},[25,40,42],{"href":41},"#oude-script-voor-autoflex-9","Oude script voor Autoflex 9",[22,44,45],{},[25,46,48],{"href":47},"#html-code-inclusief-widget","HTML code inclusief Widget",[22,50,51],{},[25,52,54],{"href":53},"#online-afspraken-weergave","Online afspraken weergave",[56,57,28],"h2",{"id":58},"html-code",[15,60,61],{},"De Online Afspraken module is doormiddel van een stuk HTML code gemakkelijk in je website te implementeren. Onderstaand de minimale instellingen en component token die nodig is, deze token wordt pas verstrekt na de installatie van AF10.",[63,64,36],"h3",{"id":65},"voor-autoflex10-en-autoflex-9",[67,68,73],"pre",{"className":69,"code":70,"language":71,"meta":72,"style":72},"language-sql shiki shiki-themes github-dark","\u003Clink href=\"https:\u002F\u002Foa.autoflex10.eu\u002Fcss\u002Fapp.css\" rel=\"stylesheet\" \u002F>\n\u003Coa-widget settings='{\"token\": \"######-####-####-####-##########\", \"APILocation\":\"eu\"}'>\nBezig met laden...\n\u003C\u002Foa-widget>\n\u003Cscript src=\"https:\u002F\u002Foa.autoflex10.eu\u002Fjs\u002Fapp.js\">\u003C\u002Fscript>\n","sql","",[74,75,76,84,90,96,102],"code",{"__ignoreMap":72},[77,78,81],"span",{"class":79,"line":80},"line",1,[77,82,83],{},"\u003Clink href=\"https:\u002F\u002Foa.autoflex10.eu\u002Fcss\u002Fapp.css\" rel=\"stylesheet\" \u002F>\n",[77,85,87],{"class":79,"line":86},2,[77,88,89],{},"\u003Coa-widget settings='{\"token\": \"######-####-####-####-##########\", \"APILocation\":\"eu\"}'>\n",[77,91,93],{"class":79,"line":92},3,[77,94,95],{},"Bezig met laden...\n",[77,97,99],{"class":79,"line":98},4,[77,100,101],{},"\u003C\u002Foa-widget>\n",[77,103,105],{"class":79,"line":104},5,[77,106,107],{},"\u003Cscript src=\"https:\u002F\u002Foa.autoflex10.eu\u002Fjs\u002Fapp.js\">\u003C\u002Fscript>\n",[63,109,42],{"id":110},"oude-script-voor-autoflex-9",[15,112,113,117,118,121,122,124],{},[114,115,116],"strong",{},"(vervangen door bovenstaand EU script va 31-5-2024",")",[119,120],"br",{},"\nonderstaande .nl url’s worden nu doorverwezen naar .eu",[119,123],{},"\nNieuwe gebruikers en gebruikers die een script aanpassen mogen bovenstaande code gebruiken.",[67,126,128],{"className":69,"code":127,"language":71,"meta":72,"style":72},"\u003Clink href=\"https:\u002F\u002Foa.autoflex10.nl\u002Fcss\u002Fapp.css\" rel=\"stylesheet\" \u002F>\n\u003Coa-widget settings='{\"token\": \"######-####-####-####-##########\", \"APILocation\":\"nl\"}'>\nBezig met laden...\n\u003C\u002Foa-widget>\n\u003Cscript src=\"https:\u002F\u002Foa.autoflex10.nl\u002Fjs\u002Fapp.js\">\u003C\u002Fscript>\n",[74,129,130,135,140,144,148],{"__ignoreMap":72},[77,131,132],{"class":79,"line":80},[77,133,134],{},"\u003Clink href=\"https:\u002F\u002Foa.autoflex10.nl\u002Fcss\u002Fapp.css\" rel=\"stylesheet\" \u002F>\n",[77,136,137],{"class":79,"line":86},[77,138,139],{},"\u003Coa-widget settings='{\"token\": \"######-####-####-####-##########\", \"APILocation\":\"nl\"}'>\n",[77,141,142],{"class":79,"line":92},[77,143,95],{},[77,145,146],{"class":79,"line":98},[77,147,101],{},[77,149,150],{"class":79,"line":104},[77,151,152],{},"\u003Cscript src=\"https:\u002F\u002Foa.autoflex10.nl\u002Fjs\u002Fapp.js\">\u003C\u002Fscript>\n",[56,154,48],{"id":155},"html-code-inclusief-widget",[15,157,158],{},"Onderstaande is een voorbeeld, let vooral op de CSS Override (regel 24) deze is vaak niet nodig.",[15,160,161],{},"Gebruik voor het gemak onderstaande Code Creator",[163,164,166],"alert",{":type":165},"warning",[167,168,169],"template",{"v-slot:content":72},[15,170,171,174,176],{},[114,172,173],{},"Embed Code Creator → playground → genereer de gewenste html code",[119,175],{},[25,177,181],{"href":178,"rel":179},"https:\u002F\u002Foa.autoflex10.dev\u002Fplayground\u002Fcreatecode.html",[180],"nofollow","Autoflex - Embed Code creator: Online Appointment",[67,183,187],{"className":184,"code":185,"language":186,"meta":72,"style":72},"language-html shiki shiki-themes github-dark","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\n\u003Chead>\n    \u003Ctitle>Autoflex OA minimal\u003C\u002Ftitle>\n    \u003C!-- Embedded OA CSS here # start -->\n    \u003Clink href=\"https:\u002F\u002Foa.autoflex10.nl\u002Fcss\u002Fapp.css\" rel=\"stylesheet\" \u002F>\n    \u003C!-- Embedded OA CSS here # end -->\n\u003C\u002Fhead>\n\n\u003Cbody>\n    \u003C!-- Embedded OA widget here # start -->\n    \u003Cnoscript>\n        \u003Cstrong>We're sorry but Autoflex OA embed doesn't work properly without JavaScript enabled. Please enable it to\n            continue.\u003C\u002Fstrong>\n    \u003C\u002Fnoscript>\n    \u003Coa-widget settings='{\n              \"token\": \"######-####-####-####-##########\"\n            }'>\n        Bezig met laden...\n    \u003C\u002Foa-widget>\n    \u003C!-- Embedded OA widget here # end -->\n    \u003C!-- OA override CSS here -->\n    \u003Clink href=\"online-afspraken-eigen-style.css\" rel=\"stylesheet\" \u002F>\n    \u003C!-- Embedded OA script here # start -->\n    \u003Cscript src=\"https:\u002F\u002Foa.autoflex10.nl\u002Fjs\u002Fapp.js\">\u003C\u002Fscript>\n    \u003C!-- Embedded OA script here # end -->\n\u003C\u002Fbody>\n\n\u003C\u002Fhtml>\n","html",[74,188,189,206,225,231,240,255,262,289,295,305,310,320,326,336,347,357,367,383,389,397,403,412,418,424,446,452,475,481,490,495],{"__ignoreMap":72},[77,190,191,195,199,203],{"class":79,"line":80},[77,192,194],{"class":193},"s95oV","\u003C!",[77,196,198],{"class":197},"s4JwU","DOCTYPE",[77,200,202],{"class":201},"svObZ"," html",[77,204,205],{"class":193},">\n",[77,207,208,211,213,216,219,223],{"class":79,"line":86},[77,209,210],{"class":193},"\u003C",[77,212,186],{"class":197},[77,214,215],{"class":201}," lang",[77,217,218],{"class":193},"=",[77,220,222],{"class":221},"sU2Wk","\"en\"",[77,224,205],{"class":193},[77,226,227],{"class":79,"line":92},[77,228,230],{"emptyLinePlaceholder":229},true,"\n",[77,232,233,235,238],{"class":79,"line":98},[77,234,210],{"class":193},[77,236,237],{"class":197},"head",[77,239,205],{"class":193},[77,241,242,245,248,251,253],{"class":79,"line":104},[77,243,244],{"class":193},"    \u003C",[77,246,247],{"class":197},"title",[77,249,250],{"class":193},">Autoflex OA minimal\u003C\u002F",[77,252,247],{"class":197},[77,254,205],{"class":193},[77,256,258],{"class":79,"line":257},6,[77,259,261],{"class":260},"sAwPA","    \u003C!-- Embedded OA CSS here # start -->\n",[77,263,265,267,270,273,275,278,281,283,286],{"class":79,"line":264},7,[77,266,244],{"class":193},[77,268,269],{"class":197},"link",[77,271,272],{"class":201}," href",[77,274,218],{"class":193},[77,276,277],{"class":221},"\"https:\u002F\u002Foa.autoflex10.nl\u002Fcss\u002Fapp.css\"",[77,279,280],{"class":201}," rel",[77,282,218],{"class":193},[77,284,285],{"class":221},"\"stylesheet\"",[77,287,288],{"class":193}," \u002F>\n",[77,290,292],{"class":79,"line":291},8,[77,293,294],{"class":260},"    \u003C!-- Embedded OA CSS here # end -->\n",[77,296,298,301,303],{"class":79,"line":297},9,[77,299,300],{"class":193},"\u003C\u002F",[77,302,237],{"class":197},[77,304,205],{"class":193},[77,306,308],{"class":79,"line":307},10,[77,309,230],{"emptyLinePlaceholder":229},[77,311,313,315,318],{"class":79,"line":312},11,[77,314,210],{"class":193},[77,316,317],{"class":197},"body",[77,319,205],{"class":193},[77,321,323],{"class":79,"line":322},12,[77,324,325],{"class":260},"    \u003C!-- Embedded OA widget here # start -->\n",[77,327,329,331,334],{"class":79,"line":328},13,[77,330,244],{"class":193},[77,332,333],{"class":197},"noscript",[77,335,205],{"class":193},[77,337,339,342,344],{"class":79,"line":338},14,[77,340,341],{"class":193},"        \u003C",[77,343,114],{"class":197},[77,345,346],{"class":193},">We're sorry but Autoflex OA embed doesn't work properly without JavaScript enabled. Please enable it to\n",[77,348,350,353,355],{"class":79,"line":349},15,[77,351,352],{"class":193},"            continue.\u003C\u002F",[77,354,114],{"class":197},[77,356,205],{"class":193},[77,358,360,363,365],{"class":79,"line":359},16,[77,361,362],{"class":193},"    \u003C\u002F",[77,364,333],{"class":197},[77,366,205],{"class":193},[77,368,370,372,375,378,380],{"class":79,"line":369},17,[77,371,244],{"class":193},[77,373,374],{"class":197},"oa-widget",[77,376,377],{"class":201}," settings",[77,379,218],{"class":193},[77,381,382],{"class":221},"'{\n",[77,384,386],{"class":79,"line":385},18,[77,387,388],{"class":221},"              \"token\": \"######-####-####-####-##########\"\n",[77,390,392,395],{"class":79,"line":391},19,[77,393,394],{"class":221},"            }'",[77,396,205],{"class":193},[77,398,400],{"class":79,"line":399},20,[77,401,402],{"class":193},"        Bezig met laden...\n",[77,404,406,408,410],{"class":79,"line":405},21,[77,407,362],{"class":193},[77,409,374],{"class":197},[77,411,205],{"class":193},[77,413,415],{"class":79,"line":414},22,[77,416,417],{"class":260},"    \u003C!-- Embedded OA widget here # end -->\n",[77,419,421],{"class":79,"line":420},23,[77,422,423],{"class":260},"    \u003C!-- OA override CSS here -->\n",[77,425,427,429,431,433,435,438,440,442,444],{"class":79,"line":426},24,[77,428,244],{"class":193},[77,430,269],{"class":197},[77,432,272],{"class":201},[77,434,218],{"class":193},[77,436,437],{"class":221},"\"online-afspraken-eigen-style.css\"",[77,439,280],{"class":201},[77,441,218],{"class":193},[77,443,285],{"class":221},[77,445,288],{"class":193},[77,447,449],{"class":79,"line":448},25,[77,450,451],{"class":260},"    \u003C!-- Embedded OA script here # start -->\n",[77,453,455,457,460,463,465,468,471,473],{"class":79,"line":454},26,[77,456,244],{"class":193},[77,458,459],{"class":197},"script",[77,461,462],{"class":201}," src",[77,464,218],{"class":193},[77,466,467],{"class":221},"\"https:\u002F\u002Foa.autoflex10.nl\u002Fjs\u002Fapp.js\"",[77,469,470],{"class":193},">\u003C\u002F",[77,472,459],{"class":197},[77,474,205],{"class":193},[77,476,478],{"class":79,"line":477},27,[77,479,480],{"class":260},"    \u003C!-- Embedded OA script here # end -->\n",[77,482,484,486,488],{"class":79,"line":483},28,[77,485,300],{"class":193},[77,487,317],{"class":197},[77,489,205],{"class":193},[77,491,493],{"class":79,"line":492},29,[77,494,230],{"emptyLinePlaceholder":229},[77,496,498,500,502],{"class":79,"line":497},30,[77,499,300],{"class":193},[77,501,186],{"class":197},[77,503,205],{"class":193},[15,505,506,507,509,510,513,514,517,518,521,522],{},"Voeg voor eigen styling aan de Online afspraken widget specifieke CSS toe op regel 24.",[119,508],{},"\nLook & feel etc. is onder andere in te stellen door de ",[114,511,512],{},"parameters"," in de ",[114,515,516],{},"settings"," van de ",[114,519,520],{},"widget,"," zie voor de specificatie: ",[25,523,525],{"href":524},"\u002Fuitleg\u002Fonline-afspraken\u002Fonline-afspraken-voor-de-website-bouwer\u002Fsettings-dictionary","Settings Dictionary",[15,527,528,529,531,534,536],{},"Indien je geen extra styling nodig hebt, dan is de volgende code in bovenstaand voorbeeld niet nodig:",[119,530],{},[74,532,533],{},"\u003C!-- OA override CSS here -->",[119,535],{},[74,537,538],{},"\u003Clink href=\"online-afspraken-eigen-style.css\" rel=\"stylesheet\" \u002F>",[163,540,541],{":type":165},[167,542,543],{"v-slot:content":72},[15,544,545,548,550],{},[114,546,547],{},"Embed Code Playground → playground → test de klant token en resultaten",[119,549],{},[25,551,554],{"href":552,"rel":553},"https:\u002F\u002Foa.autoflex10.dev\u002Fplayground\u002Findex.html",[180],"Autoflex - Playground: Online Appointment",[56,556,54],{"id":557},"online-afspraken-weergave",[559,560,561,573],"table",{},[562,563,564],"thead",{},[565,566,567,571],"tr",{},[568,569],"th",{"align":570},"left",[568,572],{"align":570},[574,575,576,589],"tbody",{},[565,577,578,584],{},[579,580,581],"td",{"align":570},[114,582,583],{},"Online afspraken: alle vragen onder elkaar",[579,585,586],{"align":570},[114,587,588],{},"Online afspraken: 3 stappen wizard",[565,590,591,598],{},[579,592,593],{"align":570},[594,595],"img",{"alt":72,"src":596,"width":597},"\u002Ffiles\u002Ff3c30b4e-e533-4899-ad4c-057da72b4dbe.png",1114,[579,599,600],{"align":570},[594,601],{"alt":72,"src":602,"width":603},"\u002Ffiles\u002Fc2a8f85d-cfdd-44e7-937e-ec166c83a3cc.png",1097,[605,606,607],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":72,"searchDepth":86,"depth":104,"links":609},[610,614,615],{"id":58,"depth":86,"text":28,"children":611},[612,613],{"id":65,"depth":92,"text":36},{"id":110,"depth":92,"text":42},{"id":155,"depth":86,"text":48},{"id":557,"depth":86,"text":54},"md",{},4132261877,"\u002Fuitleg\u002Fonline-afspraken\u002Fonline-afspraken-voor-de-website-bouwer",450707799,{"title":5,"description":17},{"loc":619},"uitleg\u002Fonline-afspraken\u002Fonline-afspraken-voor-de-website-bouwer\u002Findex",[625,626,627],"#online-afspraken","#werkplaats","#autoflex-9","2026-08-06T08:30:51.982Z","KnESVevBqD93og50mjAHZ7lKCGE7pav1XwpyPo07sxE"]