All Collections
Reviews App
Setup & Installation
Monto Reviews App: All the Options and Layouts Explained
Monto Reviews App: All the Options and Layouts Explained

And how to use the Embed Code Generator

Updated over a week ago

Monto Reviews gives you a lots of different options and layouts to work with so you can customize our widgets to fit your needs.

In order to simplify this process, we created the embed code generator so that you know exactly what you're going to see when you insert that embed code on your site.

Step 1: Insert the Monto Global Script

If you haven't already, this is necessary in order for any reviews to show up on your site. You'll find it under the reviews setup tab.

Step 2: Generate a Review Embed Code

From the Monto App

Beneath the global script on the reviews setup tab, you'll find the embed code generator.

Simply select your preferred layout and options and the generator will create the code for you to insert on your Webflow product pages. No more manual code edits required!

Pro Tip: Click the "Show Preview" button below the code generator after making your selections to see how the embed will look!

From Monto's Designer Extension

Open the Monto extension in the Webflow designer by clicking on the app icon in the lefthand sidebar and select the "Monto" app.

Select "Reviews" from the list of Monto apps.

You will then see the Monto Reviews embed generator panel

Select the type of review you want to embed on your site, customize your embed options, and then generate the code.

Copy the code and paste into a "Embed" block in your Webflow designer.

Available Embed Layouts:

Typically you would use both the star rating layout and either the horizontal or masonry layouts on your product page. The text slider and image slider are designed primarily for featuring reviews such as on your home page (though of course feel free to use them wherever you like!).

1) Star Rating Only

  • This displays the star rating for an item.

  • Pro tip: You can change make all elements of this widget display in-line (on a single line) by adding this CSS

  • Recommended Locations:

    • Product page: Underneath item title

    • Shop Grid page: Underneath item title

2) Horizontal

  • The default widget review layout which displays all reviews as full width in a list. You can allow people to write reviews (or not as you prefer).

  • Recommended locations:

    • Product page, further down the page below main descriptions

    • General testimonials page for your shop or service

3) Masonry

  • A review widget which displays all customer reviews as cards in several columns. You can allow people to write reviews (or not).

  • Recommended locations:

    • Product page, further down the page instead of the Horizontal view (especially for reviews with lots of images)

    • Home page to display featured reviews in a visually compelling way

    • Interior page for social featuring specifical types of social proof

4) Text Slider

  • A review widget which displays all (or only "featured") customer reviews as slides in a carousel that transitions automatically from one to the next. You can allow people to write reviews.

  • Recommended locations:

    • Home page

    • Checkout pages for social proof (lots of split tests show this lifts conversion)

    • Interior or product page to display all reviews in a more compact way

5) Image Slider

  • A review widget which displays all (or only "featured") customer submitted images as slides in a carousel. You can allow people to write reviews if you wish.

  • Recommended locations:

    • Home page to show off community engagement and live customer usage of your products

    • Product pages for a visually focused reviews display when you need a more compact than the Masonry layout

    • Product category pages to display grouped reviews across an entire collection (especially if individual products may not have enough image-type reviews to justify embedding this type on the individual product pages)

Choose Which Items Get Reviewed and Displayed

  • Default: The current page's product or CMS item

    • Monto will auto-detect the slug of the current page. This is the standard setup for most sites and is primarily intended for a product or CMS page

    • Using this selection on a non product / CMS page will result in the widget displaying reviews for all your products

  • An entire collection

    • Display all reviews of an entire collection such as "products" or "authors". Submitted reviews will still be for individual items.

    • This is useful if you have multiple CMS collections that each have reviews but you only want to display a single type in a place.

      • EXAMPLE: You run a book publisher with different genres of authors represented. You want to display all of the "Biography" author reviews on the category page showing all books from that genre and then you want to do the same for all the "Romance" authors on the Romance collection page.

  • Display all reviews

    • Display all reviews for all items on your site.

    • Submitted reviews will still be for individual items.

  • My entire store or service

    • Allow users to review your site itself.

    • This is ideal for stores or services with no products or CMS items, such as a general consulting service.

    • This will allow people to submit reviews that are completely unattached to any Webflow product or CMS item. They are for your site/service itself.

  • Multiple items

    • Display reviews for only specific items you choose.

    • Enter multiple individual slugs separated by a comma such as: red-cup, blue-cup, green-cup.

    • Note: When choosing slugs to list, do not include the root domain or the collection name such as "/product/" - just the end item slug.

Additional Options for Your Embed Widgets

We've pre-selected several default options for each review layout to make it easy, but customize them as is best for your site!

  • Show the "Write Review" Button and Rating Summary Header

    • This will allow new reviews to be submitted by users

    • This should be turned on for product/CMS pages if you want users to be able to submit a review. If you want a more streamlined look for your homepage review display, then turn this setting off.

  • Show the Star Rating Number

    • Display the numeric score value (e.g. 4.0) next to the stars

  • Display ONLY Featured Reviews in Sliders

    • Image and text sliders are most often used for the home page and other prominent layouts so you may want to only display your best reviews – kind of like a testimonial slider.

    • You can mark individual reviews as "Featured" on the Reviews > Browse page:

  • Remove Google Reviews schema

    • This is useful for when you have multiple reviews of products or CMS items on a single product page (such as a "similar items" section at the bottom of a specific product)

    • Google can sometimes get confused on which item is the primary one on the page and might display the wrong reviews in search results (or not display any reviews at all).

Step 3: Insert the Code on Your Site

Drag the "Embed" code block in Webflow to wherever you want to display the Monto review widget on your page.

A common place for the star widget is right below the product title. It will look like this when inserted:

A common place for the horizontal review widgets is further down the product page and/or on the homepage page if you want to display all your reviews.

The sky is the limit though! Reviews are helpful for social proof and showing potential customers that you have a valuable service... so embed away. And let us know if you need any assistance!

Did this answer your question?