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. To embed a web component, see Embed an OAuth Web Component.

Blocks are embedded on your site using iframes. Why iframes?

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.

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 directly to the block without additional development.

1. Use the Block Builder to create a block and get its embed code.
2. Add the embed code on your page where you want the block to display.
3. Set the height and width of the iframe.
4. 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.
5. 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.
6. 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 style="width: 100dvw; height: 100dvh;overflow:hidden;border-radius:0">
    <iframe title="Impact" style="border: none; width: 100%; height: 100%;"
    style="border: none; width: 100%; height: 100%"
    src="https://blocks.bunchball.com/embeds/impact/ea9dd0a4-4f41-xxxx-0000-xxx8eec87c89?token=eyJraWQiOihI2dDeeCYNv4fqws3gNXmSA-Kg"></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/2eeba795-7435-4f99-0000-4b8c3b9e3?token=cdf0a422ABC123">
    </iframe>
</div>
        

See also

Blocks

Styling blocks

OAuth Client