Embed a Block
Embed code used in sandbox must be changed for production. The environment and block ID will be different for sandbox and production environments.
The following steps describe a generic overview of embedding a block. Not all blocks produce the same embed code.
Blocks are embedded on your site using iframes. Why iframes?
Once a block is embedded on your site, any changes made to the block in the Block Builder will automatically update the embedded block. The block's ID creates the connection between Nitro Studio and the embed code and sends changes without additional development.
- Use the Block Builder to create a block.
- From the block's detail view, copy the embed code ().
- Add the embed code on your page where you want the block to display. Do not change the div class name, height, or width within the embed code of Impactblocks. If you change these values, the block will not resize correctly for different viewports.
- Impact blocks only: Add the following inline styles to your external stylesheet, head, or within the page of the site where the block is embedded. Do not change any values as these styles control how the iframe container responds to viewport size.
<style>
.--bb-nitro-container {
height:850px;
}
@media (max-width: 1300px) {
.--bb-nitro-container {height:773px}
}
@media (max-width: 774px) {
.--bb-nitro-container {height:675px}
}
</style>
- Get a valid 2-legged (global scope) OAuth token. A single global scope token can be used to create any number of gamification tokens. The global scope token should never be exposed publicly.
- Request a 3-legged gamification token from the /gamification-token API endpoint using the global scope token in step 4 as the authorization bearer token in the request header.
- Make sure the block type and ID match the name and ID of the block you created in Nitro Studio.
Example URL |
---|
Copy
|
URL Parameters
Parameter |
Description |
Value |
---|---|---|
environment |
The environment where the block was created and is pulling data from. |
|
embeds |
The Nitro repository that stores the blocks. |
embeds |
type |
The name of the block type. |
Block types include: recognitions and impact |
block ID |
An ID unique to the block. |
The ID is generated by Nitro. Example: af513949-af37-427b-a596-caa49817E1e0 |
token |
The access token received from a token request. |
Set to populate the variable for the gamification token. Replace the parameter with a variable containing the 3-legged OAuth token at runtime. |
language |
A language code if your program is localized. |
Set to populate the variable with a language code representing the user's locale. Replace the parameter with the user's language code at runtime. |
Example Embed Code
Impact Block
<div class="--bb-nitro-container">
<iframe title="Impact"
allow="clipboard-write"
style="border: none; width: 100%; height: 100%"
src="https://blocks.bunchball.com/embeds/impact/[blockId]?token=[gamification token]"></iframe>
</div>
Recognitions Block
<div style="width: 485px; height: 650px">
<iframe title="Recognitions"
style="border: none; width: 100%; height: 100%"
src="https://blocks.bunchball.com/embeds/recognitions/[blockId]?token=[gamification token]"></iframe>
</div>
See also