# Reviews Modal Trigger

## Overview

Trigger a reviews widget to appear in a modal (pop-up) when the user clicks on an element on your online store.

<figure><img src="https://317471629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKeDY1gVsPqUlb1dtZzTr%2Fuploads%2F6i2By1wHM7WniWYJgYU9%2Fmodal.JPG?alt=media&#x26;token=22fd553e-d40d-48f0-8972-853bcdda8d39" alt=""><figcaption></figcaption></figure>

## Installation

Place the `data-oke-reviews-modal-trigger` data attribute on any HTML element e.g. `<div>` `<button>` `<span>`. When Widget Plus initializes it will find any tags with that data element and add click behavior to them.

## Data Attributes

| Data Attribute                   | Description                                                                                                                                       | Value Type | Supported Values                                                                        |       Required       |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------- | :------------------: |
| `data-oke-reviews-modal-trigger` | This tells Widget Plus to show a modal/pop up when the customer clicks the element.                                                               | `string`   |                                                                                         | :white\_check\_mark: |
| `data-oke-reviews-product-id`    | Used to specify a Shopify Product ID with the word `shopify-` in front of it. The reviews modal will only show reviews for the specified product. | `string`   | Any valid product ID in the format `shopify-` e.g. `shopify-1234567`.                   |                      |
| `data-oke-reviews-group-id`      | Used to specify an Okendo Group ID so that the reviews badge widget will only show aggregate review data for the specified group of products.     | `string`   | Any valid product group ID in a GUID format e.g. `69d2e67d-b980-4333-97b7-30411807a7b1` |                      |

## Examples

### **Giving The Widget A Data Source**

Without specifying a data source for the reviews, the widget will show **all** reviews for your store. You can provide either a Product ID or a Group ID to use that as the data source for the reviews.

#### **Product Widget**

If you are using **liquid** use the following snippet:

```html
<div data-oke-reviews-modal-trigger data-oke-reviews-product-id="shopify-{{ product.id }}"></div>
```

The general format for other frameworks is:

```markup
<div data-oke-reviews-modal-trigger data-oke-reviews-product-id="shopify-<PRODUCT_ID>"></div>
```

#### **Group Widget**

**Grouped Widget**

Learn more about Okendo Groups here:

{% embed url="<https://support.okendo.io/en/articles/3086139-understanding-okendo-groups>" %}

If you are using **liquid or general frameworks** use the following snippet:

```html
<div data-oke-reviews-modal-trigger data-oke-reviews-group-id="<GROUP_ID>"></div>
```

Group ID is found in the Okendo Admin URL for a given group as described in the table above.