x
Alumni
Embed the Appointments Booking Widget on your Website
Embed the Appointments Booking Widget on your Website

You can embed a Square Appointments booking widget or button on your existing website, making it easy for your clients to find your availability and book an appointment.

 

We know the embed process can be confusing, so we put together a how-to guide for some common website builders - Squarespace, Wix, Weebly, and Wordpress. Keep in mind that our community admins and support team can’t help troubleshoot non-Square products, since we’re not the experts! If you’re having any trouble with your website management system, you’ll have to reach out to them directly, or ask fellow sellers here in the community.

 

Let’s get to it!


The first thing you’ll need is the code for your Square Appointments widget, available from the Square dashboard. 

 

To get your embed code from your Square dashboard:

  1. Visit the Online Booking tab of your Appointments dashboard > click Website Embed.
  2. Copy the block of code provided.
  3. In your website builder, you’ll paste this block of code and then preview and publish.

Dashboard embed code.jpeg

To embed the widget on your Squarespace website:

  1. From your Squarespace Pages menu, select or create the page where you’d like to embed your booking widget. 
  2. Click on the area of the page where you’d like the widget embedded and click Add Block.Squarespace0.jpeg
  3. Select the Code < / > icon. Squarespace1.jpeg
  4. Remove default code from text box and paste the code provided in your Appointments dashboard > click ApplySquarespace2.jpeg
  5. Click Save. Once you exit editing mode and refresh the page, the embedded widget will display.

Read more about Using the Code Block on the Squarespace.

 

To embed the widget on your Wix website:

  1. From your Wix site editor, select or create the page where you’d like the widget embedded.
  2. Click Add > click More > click Embed a siteWix1.jpeg
  3. Place and size embed box as you’d like to to appear using their visual editor by clicking, dragging, and expanding.
  4. Enter website address > Click code Wix2.jpeg
  5. Paste full embed code from Square Appointments dashboard
  6. Click “update” > publish site Wix3.jpeg

Read more about adding HTML code with Wix.

 

To embed the widget on your Weebly website:

  1. From your Weebly site editor, click and drag the embed code button from the toolbar into the desired section of your page. Weebly1.jpeg
  2. Resize margins as needed.
  3. Click within margin to set custom HTML > click Edit Custom HTMLWeebly2.jpeg
  4. Paste embed code > click outside of embed box to set changes.
  5. Click “Publish”. Weebly3.jpeg

Note: embed code won’t take up the entire page as previewed. Consider resizing it accordingly after publishing and refreshing the page.

 

Read more about creating widgets and embedding code with Weebly.

 

To embed the widget on your WordPress website:

  1. Select/create page where you’d like to embed your booking widget.
  2. Click the HTML tab in the page editor > paste code provided in your Appointments dashboard.Wordpress1.jpeg
  3. Click Preview or Publish.

Read more about HTML with Wordpress.


We hope this makes embedding your appointments widget a little easier. Feel free to comment here to let us know how it’s going!