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 Center. 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
To add embeddable code to your website, please follow the general guidelines below:
Obtain embeddable code from a third-party provider, and copy it to your clipboard or a plain text file.
Paste the third-party code into the embed code section, and customize the section's appearance to your liking.
Publish your website to make the changes go live.
Customize the Embed Code Section
Use the settings in the Square Online site editor menu to add your third-party code, and customize the section appearance.
The following options are available under Content:
Title - Change the font, size, and color 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 color 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 Customize:
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 color or image.
Examples of Using Embeddable Code
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:
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.