Embed App in Iframe

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

Use the full Cloutly app inside your app with an iframe.

Full app embed

<iframe
  style="border: none; width: 100%; min-height: 700px;"
  src="https://app.cloutly.com/embed?token={{SIGNED_JWT}}"
></iframe>

The JWT is generated by your backend and includes:

• externalUserEmail

• externalBusinessId

• businessDisplayName

• firstName

• lastName

• role

• smsLimits

• iat

• exp

Optional pre-built widgets

There are 2 kinds of pre-built widgets you can use for lightweight display.

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 a snapshot of reviews for a business.

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.

• Replace {{BUSINESS_ID}} with your business identifier.

<div id="webflow-reviews" 
   data-business-id="{{BUSINESS_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.

• Replace {{BUSINESS_ID}} with your business identifier.

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

<div id="webflow-reviews" 
   data-business-id="{{BUSINESS_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.

• Replace {{BUSINESS_ID}} with your business identifier.

<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/{{BUSINESS_ID}}"
></iframe>

Background

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