Add embed code, or write your own

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 Embed code section is where you paste that code.

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 Write your own code.

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.

Before you start: is there a section for it already?

These sections are faster, use your colors, and work in Spanish and your other languages, so use them when they fit:

YouTube or Vimeo: Video. See Add a video.
Facebook or Instagram posts: Social posts. See Show Facebook and Instagram posts.
Spotify, Apple Podcasts or SoundCloud: Podcast or audio. See Add a podcast or audio.
Calendly, Cal.com, Square Appointments or Acuity: Booking. See Connect a booking calendar.
Mailchimp, Kit or Constant Contact signup forms: Newsletter signup. See Newsletter signup.
A Google map of your business: Hours & location, with Show map on.

If you paste code for one of these, the publish check suggests the better section.

Find the code

Every service puts it in a slightly different place. Look for Embed, Share, Website widget, Install or Add to your site in the service's settings. Copy all of it, from the first < to the last >.

Some services give you only a link, like a form's share link. Paste that instead: we show that page in the box.

Add the section

You can add it from either place:

From Integrations: click Integrations in the sidebar. On the Embed code card, click Add to a page. Choose the page under Which page? and click Add and edit.
From a page: open Pages and choose a page. On the Content tab, click Add a section at the bottom (or Add section below inside another section), then pick Embed code.

Fill in the fields

Heading and Intro: optional, like "Give to the food drive" and a sentence about it.
What goes in it: leave it on From a service.
Embed code: paste the code or link you copied.
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.
When it loads:
- When visitors press it (the usual choice) shows a button with What it is on it. The service loads only when someone presses it, so your page stays fast and the service can't track everyone else.
- With the page shows it right away. Use this for things people should see without pressing, like a form or a calculator.
Height: 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 Short, Medium, Tall or Very tall instead.
Width: Like a column of text suits forms and small widgets. Full width suits calendars and wide tables.

Write your own code

Set What goes in it to My own code, and three boxes appear: HTML (what's in the box), CSS (how it looks) and JavaScript (what it does). They color your code as you type. Tab indents; to move on to the next box with the keyboard, press Esc, then Tab.

Your CSS only affects the box. To match your site, use your theme's colors and fonts: var(--c-primary), var(--c-text), var(--c-muted), var(--c-line), var(--c-surface), var(--f-heading), var(--f-body) and var(--radius) follow your theme, even when you change it. Your JavaScript can read document.documentElement.lang, which is es on your Spanish pages, so it can show the right words.

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 Your team and who has access.

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 AI changes; see AI changes.

Have AI write it

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 Write it. When there's code already, the button says Change it: describe the change, like "Add a 4-inch depth," and AI changes your code and keeps the rest.

It takes up to a minute. The boxes fill in and the preview updates. Click Undo to go back to the code you had.
AI uses your theme's colors, works at phone size, and writes the words in each of your site's languages.
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 [price per bag], and the publish check reminds you to fill it in.
Each write costs $0.25 from your credits. If the writing doesn't finish, you aren't charged. See Plans and billing for adding credits.
AI can get things wrong. Try it in the preview, at phone size too, before you publish.

Check it in the preview

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.

Publish

Click Publish at the top right, and your changes go live in about a minute. Then click View live site and try it there too.

Good to know

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.
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.
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.
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.

Troubleshooting

Publish is blocked because the web address "doesn't start with https://." Browsers won't show an insecure page inside a secure site. Copy the https:// address, or use the service's embed code.

A warning says the code "loads something from an http:// address." Browsers block that part on secure sites like yours. Ask the service for code that uses https:// everywhere.

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.

It's cut off, or there's a scroll bar. Pick a taller Height.

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 AI changes, and if AI can't do it, a person can do it for a fixed price; see AI changes.

Publish shows a warning about "a placeholder in square brackets." Your code still has something like [price] that AI couldn't know. Replace it with the real thing, or take it out.

What it costs

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.

Related: Add a section, Publish checks.

Still stuck?