Enriched Review Widgets UI

Display an enriched review widget for each supplier. The below markup is a quick guide on how you can use our pre-built review widgets

There are 2 kinds of pre-built widgets that you can utilise on your marketplace. Note: you do not have to use these widgets, they are here for convenience.

Dynamic List

Type 1 - Dynamic List

Here is an example of the Dynamic List widget. This widget is interactive and a great way to show the online snapshot of reviews for a vendor.

Local Reviews

• Used for Google/Facebook/Self hosted reviews for a location or business.

Widget includes review score breakdown and top list of latest reviews

Add the following snippet to your website and this widget will render on your website.

• Don't forget to replace {{VENDOR_ID}} with the id created in Create Vendor

<div id="webflow-reviews" 
   data-vendor-id="{{VENDOR_ID}}" 
   style="height: 100%; width=100% !important;"></div>
<link defer rel="stylesheet" href="https://app.cloutly.com/webflow/webflow-reviews.css?version=2">
<script defer src="https://app.cloutly.com/webflow/webflow-reviews.js?version=2"></script>

Product Reviews

• Self-hosted reviews for a product.

Add the following snippet to your website and this widget will render on your website.

• Don't forget to replace {{VENDOR_ID}} with the id created in Create Vendor

• Don't forget to replace {{SOURCE_PRODUCT_ID}} with the id use in Send Review Invitation

<div id="webflow-reviews" 
   data-vendor-id="{{VENDOR_ID}}" 
   data-source-product-id="{{SOURCE_PRODUCT_ID}}" 
   style="height: 100%; width=100% !important;"></div>
<link defer rel="stylesheet" href="https://app.cloutly.com/webflow/webflow-reviews.css?version=2">
<script defer src="https://app.cloutly.com/webflow/webflow-reviews.js?version=2"></script>

Carousel

Type 2 - Carousel

Here is an example of the Carousel widget

Google, Facebook, Tripadvisor, any review site you want

Setup

Add the following snippet to your website and this widget will render on your website.

• Don't forget to replace {{VENDOR_ID}} with the id created in Create Vendor

<iframe 
style="border: none; margin: 0px; padding: 0px; width: 100%; min-width: 300px; display: block; user-select: none; min-height: 250px; z-index: 9999999;" 
src="https://app.cloutly.com/widget-cloutly/business/{{VENDOR_ID}}"
></iframe>

Background

If you have any other requirements for your site, contact us and we can discuss options.