Yotpo Reviews Extension

The Yotpo Reviews Extension lets you display Yotpo product reviews inside any Digioh campaign: pop-ups, banners, inlines, sidebars, and results pages.

The extension can pull reviews in two ways: by reading the Yotpo widget already rendered on the page (DOM mode), or by fetching reviews directly from the Yotpo API using your App Key and a product ID. Both modes support the same two display layouts: ratings and detailed reviews.

Common use cases include:

• Highlighting product ratings in banners or sidebars
• Showing reviews inside inline campaigns
• Reinforcing social proof near calls-to-action

How it works

There are two things to configure: where the extension gets the review data from (source), and how it displays that data (mode).

Where reviews come from (source)

Source	How it works	When to use
Page (default)	Reads Yotpo reviews already loaded and showing on the current page	Product pages where the Yotpo widget is already showing
API	Pulls reviews directly from Yotpo using your App Key and a product ID	Any page: exit intents, pop-ups, results pages, and pages where the Yotpo widget is not loaded

Which option should I use?

Use Page mode when:

• You are on a product page where Yotpo reviews are already showing.
• You don’t have your Yotpo App Key available.

Use API mode when:

• You want to show reviews on a page where the Yotpo widget is not loaded, such as an exit intent, category page, or landing page.
• You are building a campaign that shows reviews for multiple products at once.

How reviews are displayed (mode)

Both display options work with either source:

Mode	What is shown
ratings	Average star rating and total review count. Best for compact placements such as banners, sidebars, and hero sections.
detailed-reviews	Individual reviews (reviewer name, stars, title, content, and date). Up to 5 reviews. Best for inline campaigns, quizzes, and landing-style content sections

Limitations and notes

• Maximum of 5 detailed reviews: the yotpo-review-count key accepts values from 1 to 5.
• Review order: in page mode, the order is determined by how Yotpo is configured on the site. In API mode, reviews are returned in the order Yotpo provides them.
• Page mode retry behavior: on slow pages, the Yotpo widget may not have finished loading when the extension first checks for it. Use yotpo-max-retries and yotpo-retry-interval to give it more time.

How to set up the Yotpo Reviews Extension

Step 1: Install the extension

This extension enables the Yotpo Reviews inside your Digioh account.

1. In Digioh, hover over your profile icon in the top right
2. Select Extensions
3. Go to Campaign User Interface
4. Install Yotpo Reviews
5. Click Publish to your Site

Step 2: Enable campaign metadata

The extension is controlled through campaign metadata, so this must be enabled before adding any keys.

1. Open the campaign editor.
2. Navigate to Settings > Campaign Settings
3. Scroll down to the Campaign Metadata section and toggle it on
4. Add the metadata keys for your setup using the tables below.

Required

Key	Value	Description
enable-yotpo-reviews	true	Enables the extension on this campaign
yotpo-mode	ratings or detailed-reviews	Controls what review data is displayed

Required for API mode only

Key	Value	Description
yotpo-source	api	Switches from Page mode to API mode. Leave this out to use Page mode (the default).
yotpo-app-key	Your Yotpo App Key	Public app key from your Yotpo account, used for all products.

Optional

Key	Default	Description
yotpo-review-count	1	Number of detailed reviews to show (1–5). Ignored in ratings mode.
yotpo-max-retries	5	Page mode only. Number of poll attempts before giving up.
yotpo-retry-interval	300	Page mode only. Milliseconds between poll attempts.
yotpo-container-class	yotpo-reviews-container	CSS class name of the container div inside each HTML block. Override only if your campaign uses a custom class name.
yotpo-api-timeout	8000	API mode only. Milliseconds before an unresponsive Yotpo request is aborted. Increase on slow networks; decrease if you want faster failure.

Step 3: Add the HTML review container

Now tell the extension where inside the campaign to display the reviews by adding a container div.

1. In the Design Editor, go to the HTML tab.
2. Click + HTML Block.
3. Paste the following HTML:
   <div class=”yotpo-reviews-container”></div>
4. Save the campaign.

Note: You can add the container div multiple times within the same campaign or on different pages of the same campaign. The class name must match the value set in the yotpo-container-class metadata key (the default is yotpo-reviews-container).

API mode only: set a product ID per HTML block

If you are using API mode, you also need to tell each HTML block which product to load reviews for. This is done by adding element-level metadata directly on the HTML block, separate from the campaign-level metadata you set in Step 2.

Key	Example value	Description
yotpo-product-id	549	The product ID to fetch reviews for on this specific HTML block.

The extension makes a separate request to Yotpo for each block that has this key set, and displays that product’s reviews inside the container div in that block.

You can supply the product ID in three ways:

• Hardcoded integer: 549
• Custom field merge tag: [CUSTOM_1] or [CUSTOM_2]. Use this when the product ID was captured earlier in the campaign via a Button Data Action or JS snippet, and you want it filled in automatically.
• PRQ results page merge tag: [PRQ:ID:1], [PRQ:ID:2], etc. These are automatically replaced with the recommended product’s ID on a PRQ results page.

Note: For a results page showing multiple products, add one HTML block per product and set a different yotpo-product-id on each one. Blocks without this key set are skipped.

Step 4: Style the reviews (optional)

If you want to customize how the reviews look (colors, spacing, fonts, etc.), add a <style> block inside an HTML element in your campaign. This lets you match the reviews to your site’s design.

How to Add CSS in an HTML Block

1. In the Campaign Editor, go to the HTML tab
2. Click + HTML Block (or use the same block as your container div).
3. Paste your CSS inside a <style> tag, like this:
   

   <style>
     /* Ratings mode */
     .digioh-yotpo-ratings { font-family: sans-serif; font-size: 14px; }
     .yotpo-score { font-size: 18px; font-weight: bold; }
     .yotpo-review-count { color: #666; margin-top: 2px; }
   
     /* Detailed reviews mode */
     .digioh-yotpo-detailed-reviews { font-family: sans-serif; font-size: 14px; }
     .yotpo-review-card { border-top: 1px solid #eee; padding-top: 8px; }
     .yotpo-name { font-weight: bold; }
     .yotpo-title { font-style: italic; margin: 4px 0; }
     .yotpo-content { color: #333; }
     .yotpo-reviewed { font-size: 12px; color: #999; margin-top: 4px; }
   
     /* Stars */
     .yotpo-stars { display: flex; gap: 4px; align-items: center; }
     .yotpo-star { fill: #FFB400; width: 20px; height: 20px; }
   </style>
   <div class="yotpo-reviews-container"></div>

4. Save the HTML block

Tip: The <style> tag can live in the same HTML block as your container div or in a separate HTML block. Either approach works.

CSS added in an HTML block applies only to that campaign. It does not affect Yotpo reviews displayed elsewhere on your site.

Available CSS classes

Class	What it targets
.digioh-yotpo-ratings	Container around the star rating and review count
.digioh-yotpo-detailed-reviews	Container around the full list of review cards
.yotpo-stars	Star icon container
.yotpo-star	Each individual star icon
.yotpo-score	Average rating score (ratings mode)
.yotpo-review-count	Review count text (ratings mode)
.yotpo-review-card	Individual review card
.yotpo-name	Reviewer name
.yotpo-title	Review title
.yotpo-content	Review body text
.yotpo-reviewed	Review date

Finding your App Key and product ID

Your Yotpo App Key and product IDs are visible in your browser’s network activity when you load a product page. Here is how to find them:

1. Open a product page on your site that already displays Yotpo reviews.
2. Open your browser’s DevTools and go to the Network tab.
3. Filter by yotpo. Look for a request that starts with:
   https://api.yotpo.com/v1/widget/{APP_KEY}/products/{PRODUCT_ID}/re
4. The App Key is the long alphanumeric string after /widget/.
5. The product ID is the value after /products/.

Tip: Copy the App Key directly from the network request URL rather than typing it manually. A single character error will prevent reviews from loading.

Example setups

DOM mode: ratings (default)

Campaign metadata:

enable-yotpo-reviews → true
yotpo-mode → ratings

HTML block content:

<div class="yotpo-reviews-container"></div>

The waits for the Yotpo widget to load on the page and displays the average rating and review count.

API mode: ratings (single product)

Campaign metadata:

enable-yotpo-reviews → true
yotpo-mode → ratings
yotpo-source → api
yotpo-app-key → YOUR_APP_KEY

HTML block element metadata:

yotpo-product-id → 549

HTML block content:

<div class="yotpo-reviews-container"></div>

API mode: multiple products

Campaign metadata:

enable-yotpo-reviews → true
yotpo-mode → ratings
yotpo-source → api
yotpo-app-key → YOUR_APP_KEY

HTML Block 1 element metadata:

yotpo-product-id → 549

HTML Block 2 element metadata:

yotpo-product-id → 726

HTML Block 3 element metadata:

yotpo-product-id → 534

Each block fires its own independent API request and renders its own product’s reviews.

API mode: detailed reviews

Campaign metadata:

enable-yotpo-reviews → true
yotpo-mode → detailed-reviews
yotpo-source → api
yotpo-app-key → YOUR_APP_KEY
yotpo-review-count → 3

HTML block element metadata:

yotpo-product-id → 549

HTML block content:

<div class="yotpo-reviews-container"></div>

Troubleshooting

Page mode: reviews not showing

• First, check that Yotpo reviews are showing on the page when no Digioh campaign is active. If they’re not there, the extension won’t be able to read them.
• On slower pages, the Yotpo widget may still be loading when the extension looks for it. Try increasing yotpo-max-retries or yotpo-retry-interval to give it more time.
• Open the extension notification panel in Digioh to see if any errors were logged.

API mode: reviews not showing

• Make sure yotpo-source is set to api in your campaign metadata.
• Double-check your yotpo-app-key. Copy it directly from a network request on your site rather than typing it by hand. Even one wrong character will break the connection.
• Make sure yotpo-product-id is set in the element settings of the HTML block itself, not in the campaign-level metadata.
• Make sure the product actually has published reviews in Yotpo.
• Check the extension notification panel in Digioh. Any errors (such as a failed request or missing field) are listed there, along with which product and HTML block caused the issue.

Container not found

• Make sure the HTML block includes <div class="yotpo-reviews-container"></div>. Without this, the extension has nowhere to display the reviews.
• Check that Campaign Metadata is turned on in Campaign Settings. The extension won’t run without it.
• In API mode, make sure yotpo-product-id is set in the element settings of that specific HTML block. Blocks without it are skipped.

Multiple blocks: only some are showing reviews

Each block works independently, so one can fail while others succeed. Open the extension notification panel in Digioh. Errors are listed per block (for example, #html1, #html2), making it easy to spot which one has the issue.