# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cloutly.com/reviews-sdk-for-marketplace-websites/cloutly-embed/enriched-review-widgets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.