[{"data":1,"prerenderedAt":607},["ShallowReactive",2],{"help-\u002Fhelp\u002Fadd-embed-code":3,"help-related-\u002Fhelp\u002Fadd-embed-code":587},{"id":4,"title":5,"body":6,"category":159,"description":576,"extension":577,"meta":578,"navigation":579,"order":580,"path":581,"product":582,"seo":583,"stem":584,"updated":585,"__hash__":586},"help\u002Fhelp\u002Fadd-embed-code.md","Add embed code, or write your own",{"type":7,"value":8,"toc":559},"minimark",[9,18,27,30,35,38,103,106,110,139,142,146,149,199,203,295,298,330,366,373,383,388,399,433,437,440,444,454,458,484,488,498,507,513,521,532,542,546,549],[10,11,12,13,17],"p",{},"Many online services give you a few lines of code to put their tool on your website: a donation form, a reviews widget, a quote calculator, a waitlist, a booking tool we don't connect to yet. The ",[14,15,16],"strong",{},"Embed code"," section is where you paste that code.",[10,19,20,21,26],{},"If there's no service for what you want, like a calculator for your own prices or a quiz about your products, you can write the code yourself, or describe it and have AI write it. See ",[22,23,25],"a",{"href":24},"#write-your-own-code","Write your own code",".",[10,28,29],{},"The code runs in its own box on your page. Its buttons, forms and scripts work, but it can't change the rest of your site, read your visitors' details or send them to another page. Links inside it open in a new tab.",[31,32,34],"h2",{"id":33},"before-you-start-is-there-a-section-for-it-already","Before you start: is there a section for it already?",[10,36,37],{},"These sections are faster, use your colors, and work in Spanish and your other languages, so use them when they fit:",[39,40,41,53,63,73,83,92],"ul",{},[42,43,44,45,48,49,26],"li",{},"YouTube or Vimeo: ",[14,46,47],{},"Video",". See ",[22,50,52],{"href":51},"\u002Fhelp\u002Fadd-a-video","Add a video",[42,54,55,56,48,59,26],{},"Facebook or Instagram posts: ",[14,57,58],{},"Social posts",[22,60,62],{"href":61},"\u002Fhelp\u002Fadd-social-posts","Show Facebook and Instagram posts",[42,64,65,66,48,69,26],{},"Spotify, Apple Podcasts or SoundCloud: ",[14,67,68],{},"Podcast or audio",[22,70,72],{"href":71},"\u002Fhelp\u002Fadd-audio","Add a podcast or audio",[42,74,75,76,48,79,26],{},"Calendly, Cal.com, Square Appointments or Acuity: ",[14,77,78],{},"Booking",[22,80,82],{"href":81},"\u002Fhelp\u002Fconnect-booking","Connect a booking calendar",[42,84,85,86,48,89,26],{},"Mailchimp, Kit or Constant Contact signup forms: ",[14,87,88],{},"Newsletter signup",[22,90,88],{"href":91},"\u002Fhelp\u002Fnewsletter-signup",[42,93,94,95,98,99,102],{},"A Google map of your business: ",[14,96,97],{},"Hours & location",", with ",[14,100,101],{},"Show map"," on.",[10,104,105],{},"If you paste code for one of these, the publish check suggests the better section.",[31,107,109],{"id":108},"find-the-code","Find the code",[10,111,112,113,116,117,116,120,116,123,126,127,130,131,135,136,26],{},"Every service puts it in a slightly different place. Look for ",[14,114,115],{},"Embed",", ",[14,118,119],{},"Share",[14,121,122],{},"Website widget",[14,124,125],{},"Install"," or ",[14,128,129],{},"Add to your site"," in the service's settings. Copy all of it, from the first ",[132,133,134],"code",{},"\u003C"," to the last ",[132,137,138],{},">",[10,140,141],{},"Some services give you only a link, like a form's share link. Paste that instead: we show that page in the box.",[31,143,145],{"id":144},"add-the-section","Add the section",[10,147,148],{},"You can add it from either place:",[39,150,151,175],{},[42,152,153,156,157,160,161,163,164,167,168,171,172,26],{},[14,154,155],{},"From Integrations:"," click ",[14,158,159],{},"Integrations"," in the sidebar. On the ",[14,162,16],{}," card, click ",[14,165,166],{},"Add to a page",". Choose the page under ",[14,169,170],{},"Which page?"," and click ",[14,173,174],{},"Add and edit",[42,176,177,180,181,184,185,188,189,192,193,196,197,26],{},[14,178,179],{},"From a page:"," open ",[14,182,183],{},"Pages"," and choose a page. On the ",[14,186,187],{},"Content"," tab, click ",[14,190,191],{},"Add a section"," at the bottom (or ",[14,194,195],{},"Add section below"," inside another section), then pick ",[14,198,16],{},[31,200,202],{"id":201},"fill-in-the-fields","Fill in the fields",[204,205,206,216,225,230,236,259,282],"ol",{},[42,207,208,211,212,215],{},[14,209,210],{},"Heading"," and ",[14,213,214],{},"Intro",": optional, like \"Give to the food drive\" and a sentence about it.",[42,217,218,221,222,26],{},[14,219,220],{},"What goes in it",": leave it on ",[14,223,224],{},"From a service",[42,226,227,229],{},[14,228,16],{},": paste the code or link you copied.",[42,231,232,235],{},[14,233,234],{},"What it is",": a few words, like \"Donation form.\" Screen readers say it to visitors who can't see the screen, and it's on the button when the code loads on a press.",[42,237,238,241,242],{},[14,239,240],{},"When it loads",":\n",[39,243,244,253],{},[42,245,246,249,250,252],{},[14,247,248],{},"When visitors press it"," (the usual choice) shows a button with ",[14,251,234],{}," on it. The service loads only when someone presses it, so your page stays fast and the service can't track everyone else.",[42,254,255,258],{},[14,256,257],{},"With the page"," shows it right away. Use this for things people should see without pressing, like a form or a calculator.",[42,260,261,264,265,268,269,116,272,116,275,126,278,281],{},[14,262,263],{},"Height",": ",[14,266,267],{},"Fit what's inside"," makes the box as tall as what's in it. If it's cut off or shows a scroll bar, pick ",[14,270,271],{},"Short",[14,273,274],{},"Medium",[14,276,277],{},"Tall",[14,279,280],{},"Very tall"," instead.",[42,283,284,264,287,290,291,294],{},[14,285,286],{},"Width",[14,288,289],{},"Like a column of text"," suits forms and small widgets. ",[14,292,293],{},"Full width"," suits calendars and wide tables.",[31,296,25],{"id":297},"write-your-own-code",[10,299,300,301,303,304,307,308,311,312,315,316,319,320,323,324,327,328,26],{},"Set ",[14,302,220],{}," to ",[14,305,306],{},"My own code",", and three boxes appear: ",[14,309,310],{},"HTML"," (what's in the box), ",[14,313,314],{},"CSS"," (how it looks) and ",[14,317,318],{},"JavaScript"," (what it does). They color your code as you type. ",[14,321,322],{},"Tab"," indents; to move on to the next box with the keyboard, press ",[14,325,326],{},"Esc",", then ",[14,329,322],{},[10,331,332,333,116,336,116,339,116,342,116,345,116,348,116,351,211,354,357,358,361,362,365],{},"Your CSS only affects the box. To match your site, use your theme's colors and fonts: ",[132,334,335],{},"var(--c-primary)",[132,337,338],{},"var(--c-text)",[132,340,341],{},"var(--c-muted)",[132,343,344],{},"var(--c-line)",[132,346,347],{},"var(--c-surface)",[132,349,350],{},"var(--f-heading)",[132,352,353],{},"var(--f-body)",[132,355,356],{},"var(--radius)"," follow your theme, even when you change it. Your JavaScript can read ",[132,359,360],{},"document.documentElement.lang",", which is ",[132,363,364],{},"es"," on your Spanish pages, so it can show the right words.",[10,367,368,369,26],{},"Your own code is for the account's owners and developers. Editors see a note in place of the boxes, and can't publish a change to the code. See ",[22,370,372],{"href":371},"\u002Fhelp\u002Fteam-and-access#who-can-do-what","Your team and who has access",[10,374,375,376,379,380,26],{},"Problems in code you write (or have AI write) aren't covered by free support. If you'd like a person to build or fix it, ask in ",[14,377,378],{},"AI changes","; see ",[22,381,378],{"href":382},"\u002Fhelp\u002Fai-changes",[384,385,387],"h3",{"id":386},"have-ai-write-it","Have AI write it",[10,389,390,391,394,395,398],{},"Above the code boxes, describe what you want, like \"A calculator for how many bags of mulch a bed needs, from its length, width and depth,\" and click ",[14,392,393],{},"Write it",". When there's code already, the button says ",[14,396,397],{},"Change it",": describe the change, like \"Add a 4-inch depth,\" and AI changes your code and keeps the rest.",[39,400,401,408,411,418,430],{},[42,402,403,404,407],{},"It takes up to a minute. The boxes fill in and the preview updates. Click ",[14,405,406],{},"Undo"," to go back to the code you had.",[42,409,410],{},"AI uses your theme's colors, works at phone size, and writes the words in each of your site's languages.",[42,412,413,414,417],{},"It never makes up prices, hours or other facts. Put them in your description. Where one is missing, it leaves a placeholder in square brackets, like ",[132,415,416],{},"[price per bag]",", and the publish check reminds you to fill it in.",[42,419,420,421,424,425,429],{},"Each write costs ",[14,422,423],{},"$0.25"," from your credits. If the writing doesn't finish, you aren't charged. See ",[22,426,428],{"href":427},"\u002Fhelp\u002Fplans-and-billing","Plans and billing"," for adding credits.",[42,431,432],{},"AI can get things wrong. Try it in the preview, at phone size too, before you publish.",[31,434,436],{"id":435},"check-it-in-the-preview","Check it in the preview",[10,438,439],{},"The preview on the right always shows the code working, even when it's set to load on a press, so you can try it as you paste. Click a field in it, press its buttons, and check it at phone size with the phone button at the top of the preview.",[31,441,443],{"id":442},"publish","Publish",[10,445,446,447,449,450,453],{},"Click ",[14,448,443],{}," at the top right, and your changes go live in about a minute. Then click ",[14,451,452],{},"View live site"," and try it there too.",[31,455,457],{"id":456},"good-to-know","Good to know",[39,459,460,466,472,478],{},[42,461,462,465],{},[14,463,464],{},"Words inside the box aren't translated."," Your Spanish page shows the code as you pasted it. Many services have a language setting of their own; some give you separate code for each language.",[42,467,468,471],{},[14,469,470],{},"Search engines don't count words inside the box as part of your page."," Put anything people should find on Google in a regular section.",[42,473,474,477],{},[14,475,476],{},"We can't check what's inside."," Publish checks can't see broken links or accessibility problems in someone else's code, so choose services that take accessibility seriously.",[42,479,480,483],{},[14,481,482],{},"Your site's fonts don't load inside the box."," The code uses your colors if it asks for them, but its text may look a little different.",[31,485,487],{"id":486},"troubleshooting","Troubleshooting",[10,489,490,493,494,497],{},[14,491,492],{},"Publish is blocked because the web address \"doesn't start with https:\u002F\u002F.\""," Browsers won't show an insecure page inside a secure site. Copy the ",[132,495,496],{},"https:\u002F\u002F"," address, or use the service's embed code.",[10,499,500,503,504,506],{},[14,501,502],{},"A warning says the code \"loads something from an http:\u002F\u002F address.\""," Browsers block that part on secure sites like yours. Ask the service for code that uses ",[132,505,496],{}," everywhere.",[10,508,509,512],{},[14,510,511],{},"The box is empty or says it can't be shown."," Some services don't allow their pages inside other websites. Check the service's settings for allowed websites (add your web address there), or use a button that links to it instead.",[10,514,515,518,519,26],{},[14,516,517],{},"It's cut off, or there's a scroll bar."," Pick a taller ",[14,520,263],{},[10,522,523,526,527,529,530,26],{},[14,524,525],{},"The code needs to change the rest of my page"," (a chat bubble in the corner, a tracking code in the page's head). The box can't do that, on purpose. Ask for it in ",[14,528,378],{},", and if AI can't do it, a person can do it for a fixed price; see ",[22,531,378],{"href":382},[10,533,534,537,538,541],{},[14,535,536],{},"Publish shows a warning about \"a placeholder in square brackets.\""," Your code still has something like ",[132,539,540],{},"[price]"," that AI couldn't know. Replace it with the real thing, or take it out.",[31,543,545],{"id":544},"what-it-costs","What it costs",[10,547,548],{},"The Embed code section, and writing your own code, are included in your plan. Having AI write code costs $0.25 a write from your credits. The service you're embedding may charge for its own tool.",[10,550,551,552,116,555,26],{},"Related: ",[22,553,191],{"href":554},"\u002Fhelp\u002Fsections",[22,556,558],{"href":557},"\u002Fhelp\u002Fpublish-checks","Publish checks",{"title":560,"searchDepth":561,"depth":561,"links":562},"",2,[563,564,565,566,567,571,572,573,574,575],{"id":33,"depth":561,"text":34},{"id":108,"depth":561,"text":109},{"id":144,"depth":561,"text":145},{"id":201,"depth":561,"text":202},{"id":297,"depth":561,"text":25,"children":568},[569],{"id":386,"depth":570,"text":387},3,{"id":435,"depth":561,"text":436},{"id":442,"depth":561,"text":443},{"id":456,"depth":561,"text":457},{"id":486,"depth":561,"text":487},{"id":544,"depth":561,"text":545},"Put a form, widget or button from another service on your page by pasting its embed code, or write your own HTML, CSS and JavaScript, with AI if you like.","md",{},true,107,"\u002Fhelp\u002Fadd-embed-code","sites",{"title":5,"description":576},"help\u002Fadd-embed-code",null,"p3T8z6_SfJO7jAFzrAzpxkcaMsf08irylkKFBF4gNI8",[588,589,590,591,592,595,598,601,604],{"path":51,"title":52},{"path":71,"title":72},{"path":61,"title":62},{"path":81,"title":82},{"path":593,"title":594},"\u002Fhelp\u002Fonline-store","Sell products with the online store",{"path":596,"title":597},"\u002Fhelp\u002Fstore-orders","Store orders",{"path":599,"title":600},"\u002Fhelp\u002Fmade-to-order","Made to order and files to download",{"path":602,"title":603},"\u002Fhelp\u002Fonline-ordering","Add online ordering buttons",{"path":605,"title":606},"\u002Fhelp\u002Fsite-services","Visitor stats and site services",1793740287077]