How to Embed Widgets in Squarespace & Webflow

1. Why Embed Widgets in Squarespace and Webflow?

Squarespace and Webflow are powerful website builders that let you create visually stunning sites without writing code. But when it comes to extending functionality beyond their built-in features, you need to embed widgets -- small, self-contained applications that add capabilities like live chat, booking calendars, customer reviews, interactive forms, and custom tools directly into your pages.

Unlike platforms with massive plugin ecosystems, Squarespace and Webflow rely heavily on embed codes and third-party integrations. Understanding how to work with embeds unlocks a much wider range of functionality than either platform offers natively. If you are new to the concept, our guide on what embeddable widgets are explains the fundamentals. You can also explore our roundup of the best website widgets for ideas on what to embed.

Common use cases for embedding widgets on Squarespace and Webflow include:

• Customer reviews -- displaying Google Reviews, Yelp, or Trustpilot testimonials on your site (see our guide on embedding Google tools for step-by-step instructions)
• Booking and scheduling -- embedding Calendly, Acuity, or custom appointment forms
• Live chat -- adding chat widgets from Intercom, Drift, or Tidio for real-time support
• Interactive forms -- surveys, quizzes, calculators, and lead-generation forms
• Media embeds -- presentations, videos, maps, and social media feeds
• Custom tools -- pricing calculators, ROI estimators, product configurators, and other bespoke functionality

The techniques covered in this guide work for all of these use cases. We will start with Squarespace, then cover Webflow, and finish with specialized topics like Google Reviews integration and PowerPoint embeds that apply to both platforms.

2. How to Embed Widgets in Squarespace

Squarespace supports custom embed codes through its Code Block and Embed Block features. The Code Block is the most flexible option and supports HTML, iframes, and JavaScript. Here is the step-by-step process for embedding a widget on any Squarespace page.

1. Open the page editor -- navigate to the page where you want the widget to appear and click Edit. Click the + button to add a new content block.
2. Select Code Block -- scroll down to the More section in the block picker and choose Code. This opens a code editor where you can paste raw HTML, CSS, and JavaScript.
3. Paste your embed code -- copy the iframe or script tag from your widget provider and paste it into the code editor. This could be an iframe embed, a JavaScript snippet, or a combination of HTML and CSS.
4. Toggle off "Display Source" -- at the bottom of the code editor, make sure the "Display Source" toggle is turned off. When this is on, Squarespace shows the raw code instead of rendering it.
5. Save and preview -- click outside the code block to close the editor, then save the page. Open the page in a new tab to see the embedded widget in action.

Here is an example of a basic iframe embed code you might paste into a Squarespace Code Block:

Important: Code Blocks are only available on Squarespace Business and Commerce plans. If you are on the Personal plan, you will not see the Code Block option. This is the most common reason widgets fail to appear on Squarespace sites.

Alternative: Embed Block. Squarespace 7.1 also offers a simpler Embed Block that accepts URLs from supported providers (YouTube, Vimeo, SoundCloud, and others). This block is available on all plans but only works with URLs from Squarespace's supported provider list. For custom widgets, you will need the Code Block.

For the official documentation, see the Squarespace guide to adding custom code.

3. How to Add Google Reviews to Squarespace

One of the most frequently asked questions about Squarespace is how to display Google Reviews on your website. The answer is straightforward: Squarespace does not have a native Google Reviews integration. There is no built-in block or setting that pulls reviews from your Google Business Profile.

To display Google Reviews on a Squarespace site, you have two main approaches:

Option 1: Third-party review widgets. Services like Elfsight and EmbedSocial offer pre-built Google Reviews widgets that you can embed using a Code Block. These services connect to the Google Places API, pull your latest reviews, and display them in a customizable widget. They typically offer free tiers with limited features and paid plans for full customization, branding removal, and automatic review updates.

Option 2: Build a custom widget with Embeddy. If you want full control over the design and do not want to depend on a third-party subscription, you can use Embeddy to create a custom Google Reviews display widget. Describe what you want in plain English, and the AI generates the widget code. Here is an example prompt:

Embeddy generates the widget with a live preview. You can iterate on the design, adjust colors and layout, and then copy the embed code to paste into your Squarespace Code Block. The widget works independently of any third-party service and loads directly on your page.

Whichever approach you choose, the embed process is the same: copy the embed code or iframe snippet, open a Code Block on your Squarespace page, paste the code, toggle off "Display Source," and save.

4. How to Embed Widgets in Webflow

Webflow makes embedding custom code straightforward with its built-in Embed element. Unlike Squarespace, Webflow supports custom code embeds on all plans including the free plan, which makes it a more flexible option for developers and designers who need to add third-party functionality.

1. Open the Webflow Designer -- log into your Webflow project and navigate to the page where you want to add the widget.
2. Drag an Embed element to the canvas -- open the Add panel (the plus icon on the left sidebar) and find the Embed element under the Components section. Drag it to the desired position on your page.
3. Paste your HTML, iframe, or JavaScript code -- the Embed element opens a code editor where you can paste any valid HTML. This includes iframe tags, script tags, and inline styles.
4. Click Save & Close -- close the code editor. Webflow renders a preview of the embed directly in the designer canvas, so you can see how it looks before publishing.
5. Publish to see it live -- click Publish to push your changes to your live site. The embed will render exactly as it appears in the designer preview.

Here is an example of a widget embed code for Webflow:

The wrapper div with padding-bottom creates a responsive aspect ratio container that adapts to different screen sizes. This technique prevents the common problem of iframes overflowing their containers on mobile devices.

Webflow also supports custom code in other locations: you can add code to the <head> section for analytics scripts and tracking pixels, and to the before </body> section for chat widgets and other scripts that should load at the end of the page. Access these through Project Settings → Custom Code.

For the official documentation, see the Webflow University guide to custom code embeds.

5. How to Embed PowerPoint on a Website

Whether you are building a portfolio site, a training page, or a sales landing page, embedding a PowerPoint presentation directly on your website lets visitors view slides without downloading files. Both Squarespace and Webflow support iframe embeds for displaying presentations inline.

There are two main methods for embedding a PowerPoint presentation on any website, depending on where your file is hosted.

Method 1: OneDrive / Microsoft 365

Upload your PowerPoint file to OneDrive. Open it in PowerPoint Online, click File → Share → Embed, and copy the generated iframe code. Paste this code into a Squarespace Code Block or a Webflow Embed element.

Method 2: Google Slides

Upload your PowerPoint to Google Drive and open it in Google Slides. Click File → Share → Publish to web → Embed. Copy the generated iframe code and paste it into your website.

Both methods produce an iframe that works on any platform that supports custom HTML embeds -- including Squarespace (Code Block), Webflow (Embed element), WordPress, Notion, and virtually any other website builder.

Responsive tip: To make your embedded presentation responsive, wrap the iframe in a container div with a percentage-based padding-bottom. A 16:9 aspect ratio uses padding-bottom: 56.25% with the iframe set to position: absolute inside the container. This ensures the presentation scales correctly on mobile devices and tablets.

For more context on how embed codes work across platforms, see our guide on what embed code is and how it works.

6. Troubleshooting Common Embed Issues

Even with the correct embed code, things can go wrong. Here are the most common issues you will encounter when embedding widgets in Squarespace and Webflow, along with their causes and solutions.

The mixed content error is one of the most frustrating issues because the widget simply disappears without an obvious error message. Modern browsers block HTTP resources on HTTPS pages silently. Always verify that every URL in your embed code -- including image sources, script sources, and API endpoints -- uses the HTTPS protocol.

Responsive sizing is another common pain point. Many widget providers give you embed codes with fixed pixel dimensions that look fine on desktop but break on mobile. The solution is to wrap the iframe in a responsive container:

If you are still running into issues, our guide on what embed code is covers the technical foundations of how embeds work, which can help you diagnose more complex problems.

7. Build Custom Widgets for Any Platform

Pre-built embed solutions cover common use cases, but what happens when you need something specific? A custom pricing calculator that matches your brand, an interactive product configurator, a team availability widget, or a client intake form with conditional logic -- these are not things you will find in a standard widget library.

Embeddy solves this problem by letting you describe any widget in plain English. The AI generates a fully functional widget -- complete with interactive UI, data handling, and responsive design -- that works on Squarespace, Webflow, WordPress, Notion, Shopify, and over 50 other platforms. The output is a standard embed code that works anywhere custom HTML is supported.

Here is an example of what you might build:

Within seconds, Embeddy generates the widget with a live preview. You can iterate on the design through follow-up prompts, test the interactions, and then copy the embed code to paste into your Squarespace Code Block or Webflow Embed element.

The key advantage over third-party widget services is that you get exactly what you need without compromising on design or functionality. There are no monthly subscription fees for a single-purpose widget, no branding watermarks, and no dependency on a service that might shut down or change its pricing.

To learn more about the build process, read our guide on how to build embeddable widgets without code. For platform-specific instructions on embedding across different website builders, see our guide on embedding widgets on WordPress, Notion, and Shopify. You can also explore all Embeddy features or check pricing plans to see what is available on each tier.

8. Frequently Asked Questions