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>
There are two Visual Components that you can use:
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!
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