Add External Content and Widgets With Embedded Code in Square Online Store
The Embed Code section allows you to enhance your website with a nearly unlimited variety of additional features. With just a few clicks you can create custom contact forms, add event registration or reservation services, display a Google calendar, and more.
Note that this article describes how to embed code that will display on your website 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). Check out our article on adding code to your website header for details on how to use header code.
How does it work? It’s very simple:
- Obtain embeddable code from a third-party provider and copy it to your clipboard or a plain text file. If you need ideas, check out the suggestions at the end of this article for some of the many possible applications.
- Add an embed code section to any standard page on your website.
- Paste the third-party code into the embed code section and customize the appearance to your liking.
- Publish your website to make the new section available to your visitors.
To get started, go to the site editor, select a page to add the code to, then click Add section on the left. Click on the embed code section in the list, then click the Add button on the upper right to add it to the page. There are a couple of different layouts available for embed code. Which one should you choose? It depends on what you’re adding and how much space it requires. The layout with the text above provides a wider space for the embedded items, while the layout with the text on the right has a narrower area. You can change this later, so just click on the one that looks best to you if you’re not sure which one to pick.
Click Embed Code on the left to add your third-party code and customize the section appearance.
The following options are available in the settings. Clicking an item on the left will expand its options and highlight the corresponding area on the page to the right.
Layout - Choose a different layout style for the section.
Title - Change the font preset, 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 preset, size, and color for the description text below the title. Again, 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.
Section style - Change the section alignment (left or center) and set a background color or image.
Here’s an example 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, meaning all you need to do is copy the code from the provider and paste it into the embed code section.
Looking for inspiration? Here are some suggestions on how to use the embed code section:
Are you selling tickets for an event? Add an EventBrite widget to allow people to purchase tickets online.
Show your customers how to get to your place of 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”.
Important: 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 try publishing again. If removing the section resolves the problem, then you should check with the code provider to confirm you are using it correctly.
We cannot provide in-depth troubleshooting for problems arising from the use of third-party embed code due to the broad range of uses and potential issues.