Brick Insights widgets

You can embed a set rating with our javascript widgets. This page documents how to use the widget and the results.

Here's what you'll get

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.

The code

The code consists of two parts - the javascript that triggers the embed, and the HTML where the embed will be included. The javascript only needs to be included once per page, while the div needs to be included where you want the widget to display.

Javascript. Include this part once on your site - preferably just before your closing body tag:

<script async defer src="https://brickinsights.com/index.php/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/index.php/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.

Nothing will break if you accidentally include the javascript multiple times, but your site will make requests it doesn't have to. Each request means worse performance for your site and additional load on mine, so it's good practice to minimize them.

Options

Required: Set ID

data-setid="" tells Brick Insights what set to get. Change as needed. Examples: 76109-1, YODA-1, 4521221-1.

Optional: Colorscheme

data-colorscheme="" gives you the option to change colorscheme, so you can ensure the widget is visible on light and dark backgrounds. Possible values: light, dark. Defaults to light. The background is always transparent - it mainly changes the color of the text.

Sizes

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.