Recognitions Block

Note: For the APIs used to create this block, see Create a Custom Web Component or Block.

Use the Recognitions block to celebrate successes, reward performance, and show appreciation for great work. This block displays an interface where participants can recognize one another and view the recognitions they've sent and received. Depending on your recognition setup, you can allow everyone to give recognition, everyone to receive recognition, or designate who can give and who can receive.

Name and Image Preferences

In large programs, you may want to use the additionalName preference to add a preferred name or other identifier to differentiate between users with the same or similar names. The additional name will display in the recipients search field and other areas within the block.

If a user does not have an image set, you can show the user's level or initials in the Recognitions block. See Site Preferences for details.

Configure a Block

  1. Configure recognition for your program.
  2. Open Nitro Studio > Integrate > Blocks.
  3. Click New > Recognitions.
  4. Use the header bar to edit the block's name. The name does not need to be unique.
  5. Use the General drawer to set the block's height and width.
  6. Use the Settings drawer to define the dataClosed that displays in the block.

    Field

    Description

    Exchanges

    The exchange(s) to show in the block.

    • All exchanges - Shows all recognition exchanges the user is eligible for.
    • Select exchange - Shows only the selected exchange.

    Return Count

    The number of items to display in the list view.

    Date Range

    The date range to show recognitions for. Shows all recognitions given and received in the last: 20 days, 60 days, 3 months, 6 months, or 1 year.
  1. Use the Text drawer to change the title, subtitle, and tab namesClosed in the block.

    Field

    Description

    Title

    The title to display as the header of the block. Defaults to Recognitions.

    Subtitle

    The subtitle to display below the title.

    Received tab

    The name of the tab that displays the recognitions the user has received. Defaults to Received.

    Sent tab

    The name of the tab that displays the recognitions the user has given. Defaults to Sent.

    Sent recognitions - empty state

    The message that displays on the tab when the user has not given any recognitions. Defaults to You have not sent any recognitions.

    Received recognitions - empty state

    The message that displays on the tab when the user has not received any recognitions. Defaults to You have not received any recognitions.

    Reset

    Resets the fields in the Text drawer to their default values. Changes will not take effect until you save the block.
  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 plus any changes made in the Text drawer 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.

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 a Recognitions block.

Copy 
<div style="width: 485px; height: 650px">
  <iframe title="Recognitions"    
    style="border: none; width: 100%; height: 100%" 
    src="src="https://blocks.bunchball.com/embeds/recognitions/2eeba795-7435-0000-0000-4b8c3d6457a3?token=5815f6d788665edbde18e">
    </iframe>
</div>

See also

Blocks

Styling blocks