How to Embed a Widget on Square Online

Prerequisites

Before you start, have the following ready:

• Your Embeddy embed code. Log in at https://embeddy.ai/dashboard, open your widget, and copy the iframe embed code:

<iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="500"
  frameborder="0"
></iframe>

• Square Online account. You need access to the Square Online site editor. The Embed Code section is available on the Free plan. Code Injection (Method 2) requires a Plus plan or higher.

Method 1: Embed Code Section

Easiest — no code knowledge needed

Square Online includes a built-in Embed Code section type that you can add to any page. This renders external HTML including iframes, making it the simplest way to add an Embeddy widget.

1. 1

   Open the site editor

   Log in to your Square Dashboard, go to Square Online, then click "Edit Site" to open the website editor.

2. 2

   Navigate to the target page

   Use the page navigator in the editor to go to the page where you want the widget (e.g., Home, a custom page, or a landing page).

3. 3

   Add an Embed Code section

   Click "Add Section" (the + icon between sections). Browse or search for "Embed Code" and select it. A new section will appear on your page.

4. 4

   Paste your embed code

   Click on the embed section to open its settings. Paste your Embeddy iframe embed code into the "Code" field.

<div style="max-width: 800px; margin: 2rem auto; padding: 0 1rem;">
  <iframe
    src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
    width="100%"
    height="500"
    frameborder="0"
    style="border: none; border-radius: 8px;"
    loading="lazy"
    title="Interactive Widget"
  ></iframe>
</div>

5. 5

   Publish

   Click "Publish" in the top-right corner. Visit your live site to confirm the widget appears.

Method 2: Code Injection (Site-Wide)

Plus plan — adds code to all pages

For widgets that should appear on every page (e.g., a floating helper widget), Square Online's Code Injection feature lets you add HTML/JS to the header or footer of every page on your site.

1. 1

   Open Code Injection settings

   In your Square Dashboard, go to Square Online > Website > Settings, then select "Tracking and Code Injection" (or "Code Injection" under Advanced).

2. 2

   Add your script to the footer

   In the Footer Code section, paste a script that creates your Embeddy iframe and appends it to the page:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var container = document.querySelector("main, .content, body");
    if (container) {
      var wrapper = document.createElement("div");
      wrapper.style.maxWidth = "800px";
      wrapper.style.margin = "2rem auto";
      wrapper.style.padding = "0 1rem";
      wrapper.innerHTML = '<iframe src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID" width="100%" height="500" frameborder="0" style="border:none;border-radius:8px;" loading="lazy" title="Interactive Widget"></iframe>';
      container.appendChild(wrapper);
    }
  });
</script>

3. 3

   Save

   Click "Save". The code will be injected on all pages of your Square Online site.

Troubleshooting

Frequently Asked Questions