> For the complete documentation index, see [llms.txt](https://docs.cloutly.com/reviews-sdk-for-marketplace-websites/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cloutly.com/reviews-sdk-for-marketplace-websites/cloutly-embed/enriched-review-widgets.md).

# Embed App in Iframe

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

## Full app embed

```html
<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.

<figure><img src="/files/eL2bpGBGVKijg26FERvE" alt=""><figcaption><p>Widget includes review score breakdown and top list of latest reviews</p></figcaption></figure>

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

* Replace `{{BUSINESS_ID}}` with your business identifier.

```html
<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.

<figure><img src="/files/o8tJto2Dyeyk5kFqpL4F" alt=""><figcaption></figcaption></figure>

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**

```html
<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

<figure><img src="/files/ekEB4XhcMknSdZiglBat" alt=""><figcaption><p>Google, Facebook, Tripadvisor, any review site you want</p></figcaption></figure>

#### Setup

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

* Replace `{{BUSINESS_ID}}` with your business identifier.

```html
<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.