Option 1: Square’s button in a Custom HTML block
- Open your booking channels. Square Dashboard > Appointments > Online Booking > Channels.
- Choose how to add it. Under “Add your booking flow to an existing site,” click Get Started, then Create button, Get embed code or Get URL.
- Copy the code or link. Pick the location, customize the button if you made one, and copy.
Square’s embed opens the booking flow “in another tab or window,” so the booking itself happens on Square’s page, not yours. That is fine for a simple site. If you want booking to stay on your page in your design, use the Foyer widget below.
Paste it into WordPress
- Edit the page in the block editor. Click the block inserter or type
/html, and add Custom HTML. - Paste Square’s code. Then click Update.
- Check the live page. If the button is missing, see troubleshooting below.
Option 2: the Foyer widget on WordPress
The Foyer widget books into Square Appointments from your own page, as a popup with a floating Book button or inline inside a page, with deposits, member prices, packages and promo codes. Your install code comes from the Foyer dashboard with your ID filled in:
<script src="https://app.foyerkit.com/widget.js" data-merchant="your-id" async></script>Floating Book button on every page
- Install WPCode. Plugins > Add New > search “WPCode – Insert Headers and Footers” > Install > Activate. It is free, with over 3 million installs.
- Open Code Snippets > Header & Footer. Paste the Foyer code into Footer.
- Save and clear your cache. Purge any caching or optimization plugin, then load the live site.
Comfortable with themes? Add the script through your child theme’s wp_enqueue_scripts instead. For inline booking on one page, use a Custom HTML block with inline mode.
WordPress.org vs WordPress.com
| WordPress.org (self-hosted) | WordPress.com | |
|---|---|---|
| Custom HTML block with scripts | Admins and editors | Paid plan, hosting features on |
| Header and footer plugin | Any | Personal plan and up |
| Free plan | No plan needed | Scripts not allowed |
WordPress.com: “You can use JavaScript on sites with a plugin-enabled plan and activated hosting features.” Activating hosting features changes your default address to wpcomstaging.com (your own domain still works). On WordPress.org multisite, only Super Admins can save scripts.
Sources, checked October 9, 2026: WordPress: Custom HTML block, WordPress: roles and capabilities, WordPress.com: adding code, WordPress.com: code, Square: client-facing booking tools.
If the booking button disappears
- Saved by the wrong role. WordPress strips
<script>and<iframe>from users without theunfiltered_htmlcapability, such as contributors. Save it as an administrator. - Caching or script optimization. Plugins that combine or delay scripts can break widgets. Exclude
widget.jsand purge the cache. - Booking plugins fighting each other. If you used a WordPress booking plugin before, turn it off so clients don’t book in two calendars.