OTS (On The Spot) Web Component

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

Displays an interface to your users where they can enter a claim code to redeem an On The Spot Card. When a user claims a card, an action is logged to Nitro and the award amount is applied to the user's Global Rewards Marketplace account for immediate use.

Configure a Web Component

1. Open Nitro Studio > Integrate > Web Components.
2. Click New > OTS.
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)
Name	The web component name. web component - set the component tag as bunchball-ots. 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
User ID	The ID of the user to apply the award to.	data-user-id	user-id		Yes	Yes
Title	The title to display in the web component's header. Default is On The Spot Card Redemption.	data-title	title		No	No
Subtitle	The subtitle to display below the web component header.	data-subtitle	subtitle		No	No
Welcome Message	The text to display above the redemption field.	data-welcome-message	welcome-message		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

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 an OTS web component.

<bunchball-ots style="display:block; width:400px;"
  data-token="abcdefg1234567"
  data-user-id="AutoTest"
  data-subtitle='Enter your 16 digit code.'
  data-title='On-The-Spot Card Redemption'
  data-welcome-message='Great job earning an On-The-Spot Rewards Card!'
</bunchball-ots>

<div name="OTS"
  class="nitro-widget"
  width="400"
  height="200"
  data-name='OTS'
  data-user-id="AutoTest"
  data-embed-type='iframe'
  data-height='200'
  data-subtitle='Enter your 16 digit code.'
  data-title='On-The-Spot Card Redemption'
  data-welcome-message='Great job earning an On-The-Spot Rewards Card!'
  data-width='400'>
</div>

See also

Web components

Styling web components