The Opinous Display Kit is our drop-in solution for displaying reviews on your own website. It's designed to be fast, SEO optimised and require minimal developer time to install.
Display Kit is designed to render visible review content onto your website. If you would prefer not to show review content on your page you can try our other solutions:
All widget types will generate rating aggregates and reviews with valid schema.org markup so that your Opinous reviews can be correctly indexed by Google.
The summary widget works best in sidebars and footers where space is limited. It displays the average score and total number of reviews. When clicked on, a modal where all public reviews can be read will open up.
The expanded widget works best in main content areas where you want to showcase your reviews. Like with the summary widget it displays the average score and total number of reviews, but also displays some of the latest good reviews. When the Show more reviews button is clicked, a modal where all public reviews can be read will open up.
To get started using Display Kit you will need to firstly get the Display Kit snippet from the location settings page you want to display.
You can find the latest snippet of the Location you are working on in the "Developers" section of the "Location Settings" page inside the Management Dashboard.
The snippet should look something like the code below where
<LOCATION_ID> is replaced with the API Identifier of the location you are working on:
Insert this snippet at the end of your
<head> tag to make the Display Kit library available on the page.
Now that we have Display Kit loaded on the page, you can use it to render one (or more) of our widgets to your website.
To render a widget you can use the
DisplayKit.renderWidget() method. This method takes 3 arguments:
selector- a DOM selector for the container where the widget will be rendered
type- The type of widget to render, either
settings(optional) - a dictionary of configuration options for the type of widget
In a simple HTML page this might look something like this:
At this point your site will now be rendering Opinous reviews using Display Kit. You might chose to stop at this point if you are happy with the result but many sites require a little extra work in order to make Display Kit work well with complex responsive designs.
Display Kit will dynamically adapt to the size of the container that it is contained within. This means that making Display Kit fit into a responsive design is as simple as applying your existing responsive CSS classes to the container.
For example if you were using the Bootstrap 4 Grid you might apply the following classes to make the Display Kit container responsive:
<div class="container"> <div class="row"> <div class="col-4 col-md-12"> <span>Amazing site content!</span> </div> <div id="opinous-review-container" class="col-4 col-md-12"></div> <div class="col-4 col-md-12"> <span>Even more amazing content!</span> </div> </div> </div>