Impact Block

Impact is a gamification dashboard that can be embedded within a customer hosted website and styled to match your brand standards. The Impact block showcases missions, leaderboards, and other program and user activity. It uses our AI driven mission recommendation engine to display missions to the user based on featured, importance, in progress, and other statuses.

Nitro Impact

Placement is pre-configured and cannot be changed. You can configure some settings within the block and add visual elements to a mission, point category, level, and theme.

  1. Open Nitro Studio > Integrate > Blocks.

  2. Click New > Impact.

  3. Use the header bar to edit the block's name. The name does not need to be unique.

The Experimental drawer contains settings for experimental features that are still in active development. We do not recommend enabling any features in this drawer.

  1. Use the Settings > Header drawer to show award account informationClosed.

    Field

    Description

    Display award account

    Select to show the user's current balance for the point category tied to your award account and a redeem button to access the Global Rewards Marketplace.

    Display unenrolled message

    Select to show a message when the user is not enrolled in the award account. When not selected, award account information will be hidden for unenrolled users.

    Display OTS Claim button

    If your program includes On The Spot cards, select to display a Claim button where users can redeem their cards.

  1. Use the Settings > Featured drawer to set a default image and messageClosed to show in the Featured section when no featured missions are available to the user.

    Field

    Description

    Title

    The title to display in the Featured section when the user has no featured missions available.

    Description

    The description to display in the Featured section when the user has no featured missions available.

    Background Image

    The image to display in the Featured section when the user has no featured missions available. You can upload an image or link to an image on a server that Nitro can access.

  1. Use the Settings > Leaderboard drawer to add leaderboardsClosed to the block. Leaderboards are optional. The leaderboard section is hidden until you add a leaderboard to the block.

    Field

    Description

    Return Count

    The number of leaders to return. The return count applies to all leaderboards.

    Leaderboards

    Add one or more leaderboard layouts to the block. When multiple leaderboards are added, a dropdown list displays in the block so users can toggle between leaderboards.

    1. Click Add Leaderboard.
    2. Select a leaderboard layout.
    3. Click Add.
    4. Repeat steps 1-3 to add all leaderboard layouts.
    5. If necessary, drag and drop the leaderboard tiles into the order you want them to appear in the dropdown list.
  1. Use the Languages drawer to localize or customize the textClosed in the block.

    Field

    Description

    Download

    Downloads a language file containing the block's text keys and values.

    • If no language file has been uploaded to Nitro, a file containing the default keys will be downloaded.
    • If a language file has already been uploaded to Nitro, that file will be downloaded.

    localization.json

    The language file used to customize the text in English or localize into a supported language. Download and edit the file, then upload the new file and save. You can preview the changes in another language by selecting a locale in the list.
  1. Click Save (Save Button).

If you're editing an existing block, changes are pushed to any site where the block is embedded and also reflected in the preview.

Embed a Block

After you've configured your block, you can embed it on your site. Once embedded, any updates made to the block in Nitro Studio will automatically be pushed to the site with no additional code changes required.

  1. From the Block Builder list view or block detail view, copy the embed code (Copy Embed Code Button).
  2. Include the code to generate an OAuth token in your app.
  3. Insert the embed code where you want to display the block in your app or web page, and update the variable for the OAuth token.

Sample Embed Code

See Embed a Block for more information and the Block Builder for the most up-to-date embed code. The following is an example embed for an Impact block.

Copy 
<div style="width: 100vw; height: 100vh">
    <iframe title="Impact"
    style="border: none; width: 100%; height: 100%"
        src="https://blocks.bunchball.com/embeds/impact/1bfe991b-a230-3dd4e6450e5f?token=f700605e997154b29af8d7491e8"></iframe>
</div>      

See also

Blocks

Styling blocks