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 !