System updates

We’re experiencing issues that may affect your Square services. We’ll continue to update our status page with more information.

Home>Site Design and Content

Add External Content and Widgets With Embedded Code in Square Online

Note: We cannot provide in-depth troubleshooting for problems arising from the use of third-party HTML/CSS embed code in our Support Centre. For assistance with the code itself, please consult a code expert.

The embed code section in the Square Online site editor allows you to enhance your website with a nearly unlimited variety of additional features. You can create custom contact forms, add event registration or reservation services, display a Google calendar and much more.

Note: This article describes how to embed code that will display on your website's pages (e.g. an event calendar or reservation widget) as opposed to other types of code that are not intended to be visible, and need to be inserted into the header of your website (e.g. Google Analytics or Facebook pixel). Learn more about adding code to your website header for details on how to use header code.

Add Embeddable Code

ep-embed-code-section-add-new

To add embeddable code to your website, please follow the general guidelines below:

  1. Obtain embeddable code from a third-party provider, and copy it to your clipboard or a plain text file.

  2. Add an embed code section to any standard page on your website in the Square Online site editor. Learn more about adding sections to Square Online.

  3. Paste the third-party code into the embed code section, and customise the section's appearance to your liking.

  4. Publish your website to make the changes go live.

ep-embed-code-section-added-new

Customise the Embed Code Section

Use the settings in the Square Online site editor menu to add your third-party code, and customise the section appearance.

The following options are available under Content:

  • Title – Change the font, size and colour for the title text. You can also use the toggle switch to turn off the title so it doesn’t appear in the section.

  • Description – Change the font, size and colour for the description text below the title. You can toggle this off if you don’t need it.

  • Embed code – Paste your third-party code here to add it to the section on your page.

The following options are available under Customise:

  • Layout – There are a couple of different layouts available for embed code, depending on how much space you need for what you're embedding.

  • Section style – Change the section alignment, and set a background colour or image.

Examples of Using Embeddable Code

ep-embed-code-iframe

Here’s an example of using the embed code section to add a Google calendar to the page. Google automatically generates embeddable code using what’s known as an iframe to display the calendar via a direct link. This is a very common way to embed third-party code on a website, but most other methods will work in much the same way. This means that all you need to do is copy the code from the provider and paste it into the embed code section.

If you're looking for some inspiration, here are some suggestions on how to use the embed code section:

  • If you need more advanced features than the ones available in the built-in contact form, try creating and embedding a custom form from one of these providers: JotForm, Honeybook or Typeform.

  • If you need your customers to make reservations in advance, give them even more options by adding a reservation widget from one of these providers:
    Tock or OpenTable.

  • To sell tickets for an event, try adding an EventBrite widget to allow customers to purchase tickets online.

  • Show your customers how to get to your business with an embedded Google map.

These are just a few of the myriad uses for this powerful, flexible feature. Many web services offer a way to embed their tools with code, so there’s a good chance you can find something to meet almost any need. Try searching the internet for what you want, using phrases like ‘embed a newsletter signup form’, or ‘audio player embed code’.

Note: Pasting invalid or incomplete code can cause problems with your website. If you can’t see the rendered code or something else seems wrong, double check that the embed code field includes the full, complete code. Try publishing your website to see if the code you added is working as expected. You may see unexpected results if, for example, you didn’t paste the entire code, or accidentally inserted extra characters. If you’re still not sure, you can always delete the embed code section from the page and publish the site again. If removing the section resolves the problem, then you should check with the code provider to confirm you are using it correctly.