Formgong

Add the review widget on Webflow

Last updated

On Webflow, the widget goes into a Code Embed element. On a Collection page, Webflow can fill in data-product for each item.

Webflow allows the Code Embed element on a Core, Growth, Agency or Freelancer Workspace, or on a site with an active Site plan.

Add the widget

  1. In Formgong, open Reviews, pick your site, open the Widget tab, go to step Add to site and press Copy. No review site yet? Get started first.
  2. In the Webflow Designer, open the Add panel and add a Code Embed element to the canvas where the reviews should appear.
  3. Paste the code and click Save & Close.
  4. Publish the site and open the page. In the Designer the script shows as a placeholder; the reviews appear on the published site.

One product's reviews on a Collection page

  1. Put the Code Embed on the Collection page: the template page that every item of a CMS or Ecommerce collection uses.
  2. Select it and click Edit code in the settings panel.
  3. Place the cursor between the quotes of data-product="", click the purple dot on that line and choose the Slug field.
  4. Click Save & Close and publish.

Webflow puts each item's slug in place of the field when the page loads, so each item shows its own reviews. If you import reviews, use the same slugs in the file's product column.

Common problems

The Designer shows a placeholder instead of reviews

Webflow shows a script as a placeholder in the Designer. Preview or publish the site and check there.

Code Embed is missing from the Add panel

It needs one of the Workspace or Site plans above.

Every item shows the same reviews

data-product is not bound. Bind it to the Slug field as above. Webflow does not update embed fields when a visitor switches product variants, so all variants of a product share its reviews.

Only the “Write a review” link shows

The widget shows reviews only after you approve them. Open the site's Reviews tab and approve the ones under Waiting. On a product page, the product also needs approved reviews of its own.

Sources: Webflow: Custom code embed, Webflow: Use dynamic data in custom code embeds.

Questions: support@formgong.com.