Embed a Block

The following steps describe a generic overview of embedding a block. Not all blocks produce the same embed code. Embed code used in sandbox must be changed for production. The environment and block ID will be different for sandbox and production environments.

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.

Nitro blocks use iframes to embed an HTML document on a web page with a link to our content in the "src" attribute. This HTML document renders completely separate from the parent page, basically serving as a window to the iframe page.

Because Nitro iframes are fully encapsulated from the parent page, CSS rules and JavaScript logic of the parent page cannot alter the functionality of the Nitro embed and the Nitro embed cannot alter the CSS rules and JavaScript logic of the parent page.

• JavaScript run inside the iframe's document will never be able to access the parent page and vice-versa. Only the postMessage API allows sending messages back and forth through the browser.

• Content from the iframe cannot display outside the iframe's boundaries, which are controlled by the parent page.

• The layout and styling in the iframe will not be altered by the parent page's CSS and the iframe document's CSS will not alter the parent page.

• Navigation happens within the iframe. Iframes cannot access the "window.parent" object (e.g., to navigate the parent page) unless the parent and the iframe document are on the same domain. Iframes can open new tabs, but this can be restricted by setting "sandbox" permissions on the iframe element.

Iframes provide greater security when embedding content as the iframe does not give read/write control of the entire page to Nitro.

Impact blocks are designed to be embedded on your site at a fixed height. This ensures that the block looks and performs correctly at all screen sizes.

1. Use the Block Builder to create a block.
2. From the block's detail view, click copy embed code ().
3. In the Step 1: Embed code section, copy the embed code.
4. 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 Impact blocks. If you change these values, the block will not resize correctly for different viewports.

5. Impact blocks only, add inline styles for the iframe.
   1. Open the block's embed code.
   2. In the Step 2: Style the iframe section, copy the styles.
   3. Add the 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.

6. 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.
7. 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.
8. Make sure the block type and ID match the name and ID of the block you created in Nitro Studio.

src="https://blocks.bunchball.com/embeds/recognitions/2eeba795-7435-4f99-0000-4b8c3d6457a3?token=8e2b705164cc40000dd9bc736363ce12c5b"

URL Parameters

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

Blocks

Styling blocks

OAuth Client