STEP 1 : INCLUDE THE JS FILE IN THE HEADER

In your HTML page, include the javascript file in the HEAD section.

<HTML>
<HEAD>
...
<script src="https://tsu-widget.tyredating.com/widget/tc-mo-tyre/v1/dl/bundle.js" type="text/javascript" async="" charset="utf-8">
...
</HEAD>
...

STEP 2 : INCLUDE 2 TAGS IN THE BODY

In your HTML page, include the 2 following tags in the BODY section.

<HTML>
<HEAD>
</HEAD>
<BODY>
...
<!-- Tire selector -->
<td-request id="MY_CUSTOM_REQUEST_ID" data-widget-name="demoWidget" data-url="https://tsu-api.tyredating.com" data-client-token="584dabbc72369deab4cbbacb3d5c74e37f082483e545ff81dfc24a9f05fd6675"></td-request>
...
...
<!-- Results list -->
<td-result-list id="MY_CUSTOM_RESULT_LIST_ID" data-td-request-id="MY_CUSTOM_REQUEST_ID"></td-result-list>
...
...

You have the possibility to insert additionnal attributes to the tags, allowing you to overload the graphical configuration of the widget.

Graphical configuration of the Tyre Selector

Attribut HTML5 Description Value example
tsu-main-bgcolor Background color for semi-automatic configuration #009688
tsu-main-txtcolor Text color for semi-automatic configuration #FFFFFF
tsu-mainframe-bgcolor Background color of the main frame #F9F9F9
tsu-mainframe-txtcolor Text color of the main frame (title and labels) #454545
tsu-border-radius Border radius of the main frame, tabs, selects and search button 0px
tsu-links-color Text color of the links (to display the Help for example) #000000
tsu-title Content of the title to display. If empty, no title will be displayed Find your Tires
tsu-button-bgcolor Background color of the search button #009688
tsu-main-bgcolor Background color of the search button #009688
tsu-button-txtcolor Text color of the search button #FFFFFF
tsu-button-border-color Border color of the search button #009688
tsu-button-border-width Border width of the search button 0px
tsu-button-label Label of the search button Search
tsu-tab-bgcolor Background color of the tabs #EEEEEE
tsu-tab-txtcolor Text color of the tabs #000000
tsu-tab-border-color Border color of the tabs #EEEEEE
tsu-tab-border-width Border width of the tabs 0px
tsu-active-tab-bgcolor Background color of the active tab #009688
tsu-active-tab-txtcolor Text color of the active tab #FFFFFF
tsu-active-tab-border-color Border color of the active tab #009688
tsu-active-tab-border-width Border width of the active tab Opx
tsu-help-title-bgcolor Background color of the title of the help popin #009688
tsu-help-title-txtcolor Text color of the title of the help popin #FFFFFF

Graphical configuration of the Result List :

Attribut HTML5 Description Value example
tsu-main-bgcolor Background color for semi-automatic configuration #009688
tsu-main-txtcolor Text color for semi-automatic configuration #FFFFFF
tsu-tireline-txtcolor Text color of the tire line name #424242
tsu-brand-txtcolor Text color of the brand and size #424242
tsu-description-txtcolor Text color of the product description #A5A5A5
tsu-attributes-txtcolor Text color of the attributes (season, runflat, etc.) #B3B3B3
tsu-ratings-bgcolor Background color of the rating stars #009688
tsu-reviews-txtcolor Text color of the number of ratings #A5A5A5
tsu-stock-txtcolor Text color of the stock information #A5A5A5
tsu-price-txtcolor Text color of the price #424242
tsu-button-border-color Border color of the search button #009688
tsu-button-bgcolor Background color of the Call-To-Action button #009688
tsu-button-txtcolor Text color of the Call-To-Action button #FFFFFF
tsu-button-border-color Border color of the Call-To-Action button #009688
tsu-button-border-width Border width of the Call-To-Action button 0px
tsu-button-label Label of the Call-To-Action button More infos
tsu-checked-checkboxes-bgcolor Background color of the checked checkboxes (in the filters) #009688
tsu-cursor-color Background color of the cursors (in the filters) #009688
tsu-filters-txtcolor Text color of the filters labels #424242
tsu-filters-button-txtcolor Text color of the buttons in the filters #A5A5A5
tsu-pagination-bgcolor Background color of the active page of the results list #009688

STEP 3 : ENJOY 🙂

That’s it, reload your page and start searching tyres !