Visual Components

When your application page loads, the Visual Component UI library will scan the document for:

  • The elements that have a StubHub-specific CSS class name (such as "stubhub-ui-component") and load the Visual Component that matches the class name.
  • The properties for an element, which determines how the visual component is rendered.

This figure illustrates the syntax of specifying class names and properties in an HTML tag to render the desired Visual Component:

<div class="stubhub-ui-component" data-token="YOUR_ACCESS_TOKEN" data-type="logo"></div>

Available Components

There are two Visual Components that you can use:

  • Number of Events - Displays the number of events for an performer in a given location. Learn more.
  • Event Listing - Displays a list of events for a performer in a given location. Learn more.

Getting Started

1. Obtain Application Token from StubHub

Follow the instructions in the Getting Started page to get an app token.

After you have obtained the token, the next step is to verify that the application code for a Visual Component renders the widget on an application page.

2. Verify the application code for the Visual Component

To verify that your web application can display a Visual Component from StubHub, you'll insert a StubHub logo widget that is a link to StubHub.com. Here's the required code to include in your web application page's head and body tags:

<link rel="stylesheet" href="https://cache1.stubhubstatic.com/cms/content-content/stubhub-widget/0.6.4/css/stubhub-ui-ticket-out.css"></link>
<script src="https://cache1.stubhubstatic.com/cms/content-content/stubhub-widget/0.6.4/js/stubhub-ui-min.js"></script>

Insert the following html code in your page (include your own application token):

<div class="stubhub-ui-component" data-token="YOUR_ACCESS_TOKEN" data-type="logo"</div>

Alternatively, use Component Builder to define a component, and use the Get Code button to copy the code snippets to add to your page. Don't forget to add your App token to the component .

3. Test your application page

Open up your application page in a browser. If it displays the StubHub logo widget, then the page has the correct code. Congratulations, you've successfully completed the Getting Started tutorial!

From this point on, you can use the Visual Component Builder to automatically generate the required code snippets for the CSS, JavaScript, and HTML <div> tag to the component. After you configure your component in the Builder, just click Get Code (which displays the code snippets). Then copy the snippets and paste them into your page.

NOTE: Remember also to add your StubHub application token (.data-token="YOUR_ACCESS_TOKEN") to the HTML <div> tag.

About Custom Templates for Visual Components

Visual Components uses a simple templating engine to develop custom templates. The templating engine uses <% and %> tags to handle the logic (which is encapsulated in the JavaScript code) and render the values (using a single = symbol).