Home>Content

Add External Content and Widgets With Embedded Code in Square Online

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:

  1. 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.
  2. Add an embed code section to any standard page on your website.
  3. Paste the third-party code into the embed code section and customize the appearance to your liking.
  4. Publish your website to make the new section available to your visitors.

ep-embed-code-section-add-new

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.

851ee01b291835bd466fbed4df2104ef

Use the settings on the left to add your third-party code and customize the section appearance.

The following options are available under Content:

Title - Change the font preset, 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 preset, size and colour 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.

The following options are available under Customize:

Layout - 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.
Section style - Change the section alignment (left or centre) and set a background colour or image.

5201f587eecfe9288464cc0fd316b003

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:

Do 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

Do you allow 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

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.