Building Blocks displays trends, readouts, competition rankings, and character gauges in a format that can be embedded in an external website.
👍This article will help you:
Learn about the different types of Building Blocks
Understand how to embed a Building Block on your website
To access Building Blocks, go to Apps on the left side menu, then Building Blocks.
Building Blocks are responsive to the width of your webpage or screen, so they’ll look great on all devices, including smartphones and tablets.
📘Cards versus Building Blocks
Cards can be embedded in a webpage, just like Building Blocks. For use cases in which the more advanced features of cards are required, create a Trends card, Readout card, or Competition Rankings card. For less advanced use cases, or for when interactivity is required, use Building Blocks.
Building Blocks glossary
Choose from five interactive block types:
Competition Leaderboard
Display the top-performers in a resource use reduction competition.
Competition Rankings
Display participants' performance in a resource use reduction competition, from best to worst.
Trends
Display resource use trends for a building. Users can select a period, and compare to a previous period, using the menu above the graph.
Numerical Gauge
Display an animated odometer of resource use over a specific period.
Character Gauge
Express resource use through the emotional state of a character. Characters change to show different emotions based on current consumption compared to typical use. This "empathetic" visualization fosters a personal connection with the data.
There are four characters to choose from: Polar Bear, Emoji, Squirrel, and Fish.
Add a new Building Block
Go to Apps > Building Blocks, then select the type you wish to create from the menu.
Use the form to configure the Building Block. Select a building and point, or a competition. Then, determine how to display it. Several options are available for customizing the appearance, including background color.
Link to or embed a Building Block
On the main Building Blocks menu, select the Saved Blocks tab. Find your Building Block in the table. Select the dropdown menu on that row, then select 'Get embed code'.
Atrius generates embed code for an "iFrame", or inline frame. To display the Building Block, place this code directly in your webpage HTML. The code will look similar to:
HTML
<iframe src="https://www.buildingos.com/blocks/320/" allowtransparency="true" scrolling ="no" frameBorder=0 width="700" height="700"></iframe>
To adjust the size of the Building Block, based on the space available in your webpage, edit the width and height (in pixels) of the iFrame as specified in the embed code.
📘A note about iFrames and responsiveness
iFrames are sized using absolute pixel dimensions. iFrames will not decrease in size when a user's browser window shrinks. If your website is optimized for mobile devices, you may consider using a responsive iFrame.
🚧Ask your webmaster for help
If you are unable to work with the embed code, contact your webmaster. Share the code with them, or invite them to use Atrius.
Best practices
Increase engagement: Embed Building Blocks in websites that are frequently used by building occupants, such as web portals/intranets and sustainability webpages.
Educate occupants: Embed a Building Block into your digital signage. Use Building Blocks in lesson plans and integrate them into school curricula focused on energy and the environment.
Improve access and transparency: Engage your community of students, staff, customers, and building managers: send a link to a Building Block, or devise a QR code that links to a Building Block.
