The widget displays the set name, number of reviews, aggregate score and the names of up to three reviewers. You can get one of four results. Above average score, average score, below average score and no score. No score comes in a few variants, depending on what you feed the widget.
<script async defer src="https://brickinsights.com/widgets/js"></script>
HTML. Include this part where you want to show the widget. Use data attributes to set options, like set ID:
<div class="biwidget--set" data-setid="6941-1"></div>
Combined. If you only want to show one widget on your page, you can do it like this:
<div class="biwidget--set" data-setid="6941-1"></div> <script async defer src="https://brickinsights.com/widgets/js"></script>
Let's look at a few examples. They all show the combined snippet, but you can separate the two parts as described above.
data-setid="" tells Brick Insights what set to get. Change as needed. Examples:
data-colorscheme="" gives you the option to change colorscheme, so you can ensure the widget is visible on light and dark backgrounds. Possible values:
dark. Defaults to light. The background is always transparent - it mainly changes the color of the text.
data-mode="" tells Brick Insights what to include in the widget. There are only to possible values:
minimal. Normal includes everything, and minimal only includes the rating circle.
The widget does its best to fit its context. It usually works pretty well, but you probably shouldn't make it any smaller than 300px wide. The dashed border isn't included in the output - it's only here as a demonstration.