How to add Klaviyo Reviews widgets to your mobile app using Tapcart

Estimated 3 minute read

|

Updated Aug 6, 2025, 12:00 AM EST

Table of contents

You will learn

Learn how to add Klaviyo Reviews widgets to a mobile app built with Tapcart. These widgets can be added to your Tapcart app using custom blocks:

  • Star rating widget Product pages only; show a product’s overall star rating
  • Product reviews widget Product pages only; show a summary and list of all reviews for a product, plus buttons to ask a question or leave a review
  • Featured reviews carousel widget Any page; show a selection of featured reviews across several products

Tapcart is only available for stores built with Shopify.

Before you begin

This process is only available to companies who:

  • Have already built a mobile app with Tapcart
  • Use a Tapcart Enterprise plan
  • Have an active Klaviyo Reviews plan

If you haven’t set up Klaviyo Reviews yet, head to our article on getting started with Klaviyo Reviews.

If you’re adding the featured reviews carousel, select the published reviews you want to feature in Klaviyo before previewing the carousel.

Add Klaviyo Reviews widgets using a custom block in Tapcart

Follow these steps to add a reviews widget in Tapcart. Create a separate custom block for each widget you want to add.

  1. Open the Tapcart editor.
  2. In App Studio, switch from Design Blocks to Custom Blocks.

launch blocks editor

launch blocks editor

  1. Click Launch Blocks Editor to create a new custom block.
  2. Name the widget something clear, like Klaviyo Star Rating custom block.
  3. In the JS tab of the block editor, add the following code snippet. Replace PUBLIC_API_KEY with your 6-character Klaviyo site ID.

textCopy

var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js?module=reviews';
document.head.appendChild(script);
  1. In the HTML tab of the block editor, paste the snippet for the widget you’d like to add (e.g., the star rating widget). Find the code snippets below:
  2. Star rating widget code
  3. Product reviews widget code
  4. Featured reviews carousel widget code

Tapcart HTML tab

Tapcart HTML tab

  1. Click Save.
  2. Click Close to exit the editor.
  3. From the App Studio dropdown, select Product detail.

product detail page

product detail page

This step is required for the star rating and product reviews widgets. You can place the featured review widget on any app page.

  1. Drag the saved custom block you just created into your template.

The editor may not load the widget directly; instead, you’ll see the block name as plain text. This is expected.

  1. Click Preview your app and navigate to the page where you added the widget. Check that the widget appears correctly.
  2. When you’re ready for customers to see the widgets, publish your changes in Tapcart.

The Ask a question and Write a review buttons will not work in preview mode. Once you publish the changes to your app, clicking these buttons in the app will open a new browser tab.

Code snippets

Star rating widget

textCopy

<div class="klaviyo-star-rating-widget" data-id="{{product.id}}" data-product-title="{{product.title}}" data-product-type="{{product.type}}"></div>

Product reviews widget

textCopy

<div id="klaviyo-reviews-all" data-id="{{product.id}}"></div>

textCopy

<div id="klaviyo-featured-reviews-carousel"></div>

Preview app widgets

The star rating and product reviews widgets need a real product ID to display the correct reviews. To preview these widgets, set a product ID in the Variable Preview Values field in the Tapcart editor. The featured reviews carousel does not need a product ID.

  1. In the Tapcart App Studio, select Custom to view your custom widgets.
  2. Click the three dots icon next to one of your review widget blocks and click Launch Editor.
  3. Click Settings.

The settings button

The settings button

  1. Scroll or search through the JSON to find the id variable within the product object. Note that there are other id variables within other objects; you only need to edit the product ID shown here.

The product ID variable within the code

The product ID variable within the code

  1. Replace the sample product ID with the ID for a product in your store that has at least 1 review. To find a product ID, navigate to Content > Products in Klaviyo, then copy an item ID.

An item ID in Klaviyo

An item ID in Klaviyo

  1. Click Save.
  2. Repeat these steps for each star rating or product reviews custom block you added.
  3. If the previews don't appear correctly right away, refresh the editor.

Style app widgets

Changes to a widget’s settings in the Klaviyo widget editor apply to both your website and your app after you click Publish changes. To apply style changes to just your app, add custom CSS to the CSS tab of the custom block editor in Tapcart. Learn how to use custom CSS to style Klaviyo Reviews widgets.

Additional resources

Learn how to configure key flows in Klaviyo to start acquiring customer reviews. - How to moderate reviews in Klaviyo

Learn how to moderate product and store reviews in Klaviyo. Moderating allows you to publish all valid reviews while rejecting inappropriate or irrelevant reviews (e.g., reviews with offensive content). - Klaviyo Reviews data reference

Learn about the additional data available in Klaviyo when you start using reviews. This data falls into two broad categories: delivery metrics (Shopify only) and reviews metrics (available for WooCommerce and Shopify).

Was this article helpful?

YesNo

Use this form only for article feedback. Learn how to contact support.

Explore more from Klaviyo

Community

Connect with peers, partners, and Klaviyo experts to find inspiration, share insights, and get answers to all of your questions.

Visit Community

Partners

Hire a Klaviyo-certified expert to help you with a specific task, or for ongoing marketing management.

Hire a partner

Support

Access support through your account.

Email support (free trial and paid accounts) Available 24/7

Chat/virtual assistance Availability varies by location and plan type

Log in