Trophy Case Web Component

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

The trophy case showcases the badges/trophies earned by the user. The top section shows the most recently earned badge. The bottom section shows all badges earned by the user. From the main view, you can drill-down into a detail view showing the mission's description, the last time the badge was earned and how many times the badge was earned (for repeatable missions).

Configure a Web Component

1. Open Nitro Studio > Integrate > Web Components.
2. Click New > Trophy Case.
3. Enter the web component settings.
   Parameters are used when working directly with a web component embed tag (HTML) or editing the config.json file for Bunchball Go.
   

Studio Field	Description	Parameters
		Web Component Embed HTML	Bunchball Go config.json	Valid Values	Required (web component)	Required (iframe)
Display Settings
Name	The web component name. web component - set the component tag as bunchball-trophy. iframe - must match exactly with the name of the web component created in Nitro Studio.	name	name		No	Yes
Width	The web component's width.	width	width		No	Yes
Height	The web component's height.	height	height		No	Yes
Custom Styles	The link to your custom stylesheet(s). Accepts a comma delimited list of URLs.
Embed Type	Specifies the type of embed code to generate. web component - Recommended. Web components improve performance due to faster loading. Height and width settings are not required as the web component will fill space on the page like any other HTML element. iframe - The source code is a div tag and the rendered web component will be inside an iframe.	data-embed-type	embed-type	iframe	No	Yes
Web Component Settings
User ID	The ID of the user to get badges for.	data-user-id	user-id		Yes	Yes
Title	The title to display in the web component's header. Default is Trophy Case.	data-title	title		No	No
Subtitle	The subtitle to display below the web component header.	data-subtitle	subtitle		No	No
Empty Data Message	The message that displays when no badges have been earned. Defaults to "Any trophies you earn will appear here."	data-empty-message	empty-message		No	No
Latest Badge Only	If true, only shows the last badge the user earned.	data-latest-only	latest-only	true, false	No	No
Language	Add a language code to preview the web component in a Nitro supported default language. Default languages are: en, de, hi, zh, it, es, and fr.				No	No
Custom Language Reference	Add a language code and then add a custom translation key to the browser console to preview the web component in a non-default language.				No	No
	The height of the trophy container below the last earned badge. Setting the height enables the scroll bar for that section. Default is 300.	data-trophy-container-height	trophy-container-height		No	No
	The number of badges that will be retrieved per infinite scrolling page. Defaults to 10.	data-page-size	page-size		No	No

4. Click Save & Finish and reopen the web component.
5. Click Get Web Component Embed Code. Copy the code to the clipboard or a file.
6. Include the code to generate an OAuth token in your app.
7. Insert the embed code into the page/div where you want to display the web component in your app or web page, and update the variable for the OAuth token.

Sample Embed Code

See Embed an OAuth web component for more information and the Web Components view for the most up-to-date embed code. The following is an example embed for a Trophy Case web component.

<bunchball-trophy style="display:block; width:400px;"
  data-user-id="AutoTest"
  data-token="abcdefg1234567"
  data-empty-message='Any trophies you earn will appear here.'
  data-latest-only='false'
  data-title='Trophy Case'
  data-custom-css=''>
</bunchball-trophy>

<div name="TrophyCase"
  class="nitro-widget"
  width="400"
  height="400"
  data-user-id="AutoTest"
  data-name='TrophyCase'
  data-embed-type='iframe'
  data-empty-message='Any trophies you earn will appear here.'
  data-height='400'
  data-latest-only='false'
  data-title='Trophy Case'
  data-width='400'
  data-custom-css='[""]'>
</div>

See also

Web components

Styling web components