Embed SayWall on Webflow

Add a SayWall testimonial widget to your Webflow site using the Embed element or site-wide custom code.

Overview

There are two ways to embed a SayWall widget in Webflow:

Method	Best for
Embed element	Placing a widget at a specific location on one page
Site-wide custom code	Loading the script globally with widgets placed using Embed elements

Both require a Webflow paid plan (custom code is not available on the free plan).

Get Your Embed Code

Before you start, copy your widget's embed code from SayWall:

Open your widget

In the SayWall dashboard, go to Widgets and click your widget.

Open the Embed tab

Click the Embed tab inside the widget editor.

Copy the snippet

Copy the two-line embed code:

<script src="https://saywall.io/embed.min.js" async></script>
<div data-saywall-widget="YOUR_WIDGET_ID"></div>

Method 1 — Embed Element (Recommended for single page)

The Webflow Embed element lets you place custom HTML at a specific spot on any page.

Open your page in the Designer

Open Webflow Designer and navigate to the page where you want the widget.

Add an Embed element

In the Add elements panel (the + icon), find Embed under Components and drag it onto your page where you want the widget to appear.

Paste the embed code

Double-click the Embed element to open the code editor. Paste the full two-line snippet:

<script src="https://saywall.io/embed.min.js" async></script>
<div data-saywall-widget="YOUR_WIDGET_ID"></div>

Click Save & Close.

Style the container (optional)

The Embed element acts as a block container. You can set its width, padding, or margin in the Webflow style panel to control the widget's placement on the page.

Publish your site

Click Publish and then open the live page. Your testimonial widget will appear in place.

In the Webflow Designer preview, Embed elements show a placeholder rather than the live widget. Publish to a staging or production URL to see the widget render.

Method 2 — Site-wide Custom Code (Recommended for multiple widgets)

If you have widgets on multiple pages, load the script once globally using Webflow's Custom Code settings.

Open Site Settings

In your Webflow project, go to Project Settings → Custom Code.

Add the script to Footer Code

In the Footer Code field, paste the script tag:

<script src="https://saywall.io/embed.min.js" async></script>

Click Save Changes.

Place the widget div on each page

On each page where you want a widget, add an Embed element (as in Method 1) with only the <div>:

<div data-saywall-widget="YOUR_WIDGET_ID"></div>

Since the script is loaded globally, you don't need to repeat it on every page.

Publish

Publish your site. Each page with a widget <div> will display the corresponding widget.

Multiple Widgets on One Page

You can place multiple SayWall widgets on a single Webflow page. Use a separate Embed element for each widget <div>, all referencing different widget IDs:

<!-- Widget 1 -->
<div data-saywall-widget="WIDGET_ID_ONE"></div>
 
<!-- Widget 2 -->
<div data-saywall-widget="WIDGET_ID_TWO"></div>

The embed.min.js script only needs to be included once — it will initialise all widgets on the page automatically.

Using CMS Collections

If you're building product pages or team pages with Webflow CMS and want to show project-specific testimonials on each page, you can use Webflow's Embed element inside a CMS collection template.

Place the Embed element in your CMS template and bind the widget ID to a CMS field:

In your CMS collection, add a plain text field called SayWall Widget ID
In the template page, add an Embed element
Use this pattern in the Embed code:

<div data-saywall-widget="%%WIDGET_ID_FIELD%%"></div>

Then in each CMS item, enter the corresponding SayWall widget ID.

This approach lets each product, service, or team page show its own set of testimonials without creating separate Webflow pages.

Troubleshooting

The widget isn't showing after publishing

Confirm embed.min.js is loading — open your browser's Network tab and look for the script with a 200 response
Check that the widget ID in data-saywall-widget is correct
Make sure the widget has at least one approved testimonial in SayWall

The Embed element shows "Something went wrong" in the Designer

This is a Webflow preview limitation — it cannot render external scripts inside the Designer. Your widget will render correctly on the published site.

My Webflow free plan doesn't let me add custom code

Custom code (including Embed elements and Custom Code settings) requires a Webflow paid plan. Upgrade your Webflow site plan to use SayWall embeds.

The widget appears but is cut off or has no height

SayWall widgets size themselves to their content automatically. If the widget appears cut off, check that the Embed element's parent container doesn't have a fixed height or overflow: hidden. Set the container to height: auto in the Webflow style panel.