Add External Content and Widgets With Embedded Code to Square Online
Note: Embed external content and widgets by upgrading your Square Online site.
With Square Online, you can enhance your website with a nearly unlimited variety of additional features. Add multiple embed code sections to display a Google calendar, create custom contact forms, add reservation services, accept event registrations 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 Meta Pixel). Learn more about adding custom tracking code to your website for details on how to use header code.
Obtain Embeddable Code
Many services automatically generate embeddable code using what’s known as an iframe to display a widget 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.
Try searching online for what you need using keywords like 'embed newsletter sign-up form' or 'audio player embed code'. The best way to know if a piece of code is embeddable is to ask the code provider, search their support centre or test it out after publishing your site.
Add Embeddable Code to Your Site
To add embeddable code to your website:
From your Square Dashboard, open the page you want to add embeddable code to.
Select +Add > Section and choose the Embed code section.
In the editing panel, select Embed code and paste your code into the text box.
Publish your site to see the changes live.
Ways to Use Embeddable Code
If you’re looking for some inspiration, here are some suggestions on how to use the embed code section:
Show customers your calendar of events with an embedded Google Calendar.
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: Typeform, JotForm, or Honeybook.
If you need your customers to make reservations in advance, give them even more options by adding a reservation widget from OpenTable.
To sell tickets for an event, try adding an EventBrite widget to allow customers to purchase tickets online.
These are just a few of the countless 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.
Troubleshooting
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 the site again. If removing the section resolves the problem, then you should check with the code provider to confirm that you're using it correctly.
Note: We can provide basic troubleshooting steps as outlined above, but we're unable to assist with the code itself.
Disclaimer: Since the Square Online site editor is a 'what-you-see-is-what-you-get' type of software and no custom-coding is necessary to create a website with Square, we're unable to assist with custom code of any kind. This means that we can guide you on where custom code can be used throughout the Square Online platform, but we're unable to assist with the code itself.
With this in mind, using any code associated with your website must be done with the knowledge and understanding of how the code could affect your website and its function. All custom code you associate with your site is optional and not necessary to make it work or appear online.
Should you need assistance with custom code associated with your site at any time, we recommend consulting a coding expert.