TireConnect Widgets Deployment Guide
This guide walks you through deploying TireConnect turnkey widgets on your website. The embedding process is straightforward and should be intuitive for webmasters or developers. This is the current standard and only supported method for embedding widgets. We also recommend you read our TireConnect Embedding & Website Best Practices document.
TireConnect provides different types of turnkey widgets.
*Note: widget API key provided can be used for all types of widget and can be used simultaneously with other types as well.
Tire & Wheel Widget - ( Demo ) - This is our new improved search widget. It allows users to search for both tires and wheels. This widget combines standard search widget and location search widget dependent from embed parameters.
Tire & Wheel Widget with Locator - ( Demo ) - This widget is ideal if you have multiple locations and want a quick and simple way for customers visiting your website to find their preferred location.
Mobile Installer Widget ( Demo ) - This widget works like Location Search Widget, but all user needs to do it’s to enter location and widget will automatically pick up the nearest location. Please refer to Tire & Wheel Widget with Locator and mode: “auto” param.
Compact Search Widget - ( Demo ) - This widget is designed to scale down for easy installation in a sidebar or other compact area on your website. It provides the same search functionality as the Tire&Wheel Search Widget.
Offers Widget - ( Demo) - TireConnect Offers is a widget that provides a concise, real-time catalog of all available tire discounts and rebates.
Automotive Services Widget - ( Demo ) - This is our widget that will help you to provide Automotive Services for customers.
All types of turnkey widgets follow the same basic method of embedding with only minor variations between each. You can copy and paste the examples below directly into your webpage and then make a few minor edits to the source code to personalize your embedded turnkey widget to your needs.
Parameters Legend
Each widget type requires a certain number of parameters to be set in the embed code. The colour legend below shows the different types of parameters you will encounter for each widget type.
MANDATORY | Parameters highlighted in red are mandatory. If you copy and paste the examples below, then you must change the mandatory parameters accordingly. |
|---|---|
OPTIONAL | Parameters highlighted in green are optional. In most cases you can leave the parameter alone when you copy and paste the code samples. Read the specific directions for each below. |
If you copy the instructions below, all you will need to do in each case will be to substitute the API key we emailed to you after your TireConnect training was complete.
Table of Contents
Standard widget embed approach
This section describes the standard way to embed the widget to ensure correct behavior, optimal performance, and compatibility with future updates.
Tire & Wheel Widget
( Demo )
<script src="https://app.tireconnect.ca/js/widget.js"></script>
<div id="tireconnect"></div>
<script>
TCWidget.init({
apikey: 'SUBSTITUTE_YOUR_API_KEY_HERE',
container: 'tireconnect'
});
</script>Be careful not to delete either of the quotation marks when pasting your API key, they are essential for the embed function to work properly. There is no need to change the container value of ‘tireconnect’, however if you do change it, be sure to also change it in the DIV a few lines above. Again, keep the quotes.
Parameters
apikey: | Insert the api_key we emailed to you here. |
|---|---|
container: | Must match the id of the <div> above the <script> tag. If you rename the <div>, update this value accordingly. Copy and paste is recommended to avoid errors. |
location_id: | This parameter enables you to optionally pre-select a location, if you are a multi location business. |
locale: | This parameter enables you to optionally select a locale for this widget. Please note the locale has to be available for this account. Please also note, there is a default value set based on account settings. Examples: en_US, en_CA, fr_CA |
locator: | This parameter allows you to enable the location search widget type when embedding Tire & Wheel Widget. true - location search widget will be enabled false - standard search widget will be enabled. Note: If the parameter is missing, it is set to false by default, so the standard search widget will be enabled. |
location_lock: | Allow to hide standard TC location selector in the top of widget on search page. Accepted values: true, false This parameter works only with the location_id parameter in the embed code. |
services_widget_url: | This optional parameter tells the Tire & Wheel Widget where to re-direct the consumer to in order to display automotive services widget. Used for Automotive Services Widget and Tire & Wheel Widget relation. |
allowed_products: | This optional parameter tells the Tire & Wheel Widget which products to display on the search page, so you can redefine settings that selected in Widget settings. Accepted values: tire, wheel, package. It should be an array with the required values, e.g., [‘tire’, ‘wheel’]. The order of values in the array affects the order in which tabs are displayed. |
fitment: | This optional parameter defines which fitment options the Tire & Wheel Widget displays on the search page and use for searching tires or wheels. It allows you to override the settings configured in the Widget Settings. Accepted values: oe, extended, extreme. Each option includes the previous ones, for example, if you set it to extended, customers will be able to select either oe or extended. |
Tire & Wheel Widget with Locator
( Demo )
<script src="https://app.tireconnect.ca/js/widget.js"></script>
<div id="tireconnect"></div>
<script>
TCWidget.init({
apikey: 'SUBSTITUTE_YOUR_API_KEY_HERE',
container: 'tireconnect',
locator: true
});
</script>Be careful not to delete either of the quotation marks when pasting your API key, they are essential for the embed function to work properly. There is no need to change the container value of ‘tireconnect’, however if you do change it, be sure to also change it in the DIV a few lines above. Again, keep the quotes.
Parameters
apikey: | Insert the api_key we emailed to you here. |
|---|---|
container: | Must match the id of the <div> above the <script> tag. If you rename the <div>, update this value accordingly. Copy and paste is recommended to avoid errors. |
locator: | true - location search widget will be enabled |
locator_props: | This object allows to configure the locator in advanced mode by passing additional options: |
center_сoords: | Initial center coordinates when map opens. Example: [34.0522342, -118.2436849] |
location_list: | true - location list will be present always false - will hide location list when widget loads first time in case there is no center_cords in embed code and address passed in link. Location list will appear after customer enter his address. |
mode | manual - location widget will work as usual (default value, if you don’t want to use it just ignore this param) auto (Demo) - User would be asked to enter their zip code or address, the locator would selected the closest location and displayed the appropriate widget.
|
location_id: | This parameter enables you to optionally pre-select a location, if you are a multi location business. |
locale: | This parameter enables you to optionally select a locale for this widget. Please note the locale has to be available for this account. Please also note, there is a default value set based on account settings. Examples: en_US, en_CA, fr_CA |
services_widget_url: | This optional parameter tells the Tire & Wheel Widget where to re-direct the consumer to in order to display automotive services widget. Used for Automotive Services Widget and Tire & Wheel Widget relation. |
allowed_products: | This optional parameter tells the Tire & Wheel Widget which products to display on the search page, so you can redefine settings that selected in Widget settings. Accepted values: tire, wheel, package. It should be an array with the required values, e.g., [‘tire’, ‘wheel’]. The order of values in the array affects the order in which tabs are displayed. |
fitment: | This optional parameter defines which fitment options the Tire & Wheel Widget displays on the search page and use for searching tires or wheels. It allows you to override the settings configured in the Widget Settings. Accepted values: oe, extended, extreme. Each option includes the previous ones, for example, if you set it to extended, customers will be able to select either oe or extended. |
Tire & Wheel Widget that allow to change location ID without initializing it
( Demo )
<script src="https://app.tireconnect.ca/js/widget.js"></script>
<div id="tireconnect"></div>
<script>
function changelocation() {
if (Widget) {
Widget.changeLocation('location_id to change to');
}
}
TCWidget.init({
apikey: 'SUBSTITUTE_YOUR_API_KEY_HERE',
container: 'tireconnect',
location_id: 'location_id widget init with',
location_lock: true,
}).then(function(widget) {
Widget = widget;
});
</script>Be careful not to delete either of the quotation marks when pasting your API key, they are essential for the embed function to work properly. There is no need to change the container value of ‘tireconnect’, however if you do change it, be sure to also change it in the DIV a few lines above. Again, keep the quotes.
Parameters
apikey: | Insert the api_key we emailed to you here. |
|---|---|
container: | Must match the id of the <div> above the <script> tag. If you rename the <div>, update this value accordingly. Copy and paste is recommended to avoid errors. |
location_id: | This parameter enables you to optionally pre-select a location, if you are a multi location business. |
locale: | This parameter enables you to optionally select a locale for this widget. Please note the locale has to be available for this account. Please also note, there is a default value set based on account settings. Examples: en_US, en_CA, fr_CA |
locator: | This parameter allows you to enable the location search widget type when embedding Tire & Wheel Widget. true - location search widget will be enabled false - standard search widget will be enabled. Note: If the parameter is missing, it is set to false by default, so the standard search widget will be enabled. |
location_lock: | Allow to hide standard TC location selector in the top of widget on search page. Accepted values: true, false This parameter works only with the location_id parameter in the embed code. |
services_widget_url: | This optional parameter tells the Tire & Wheel Widget where to re-direct the consumer to in order to display automotive services widget. Used for Automotive Services Widget and Tire & Wheel Widget relation. |
allowed_products: | This optional parameter tells the Tire & Wheel Widget which products to display on the search page, so you can redefine settings that selected in Widget settings. Accepted values: tire, wheel, package. It should be an array with the required values, e.g., [‘tire’, ‘wheel’]. The order of values in the array affects the order in which tabs are displayed. |
fitment: | This optional parameter defines which fitment options the Tire & Wheel Widget displays on the search page and use for searching tires or wheels. It allows you to override the settings configured in the Widget Settings. Accepted values: oe, extended, extreme. Each option includes the previous ones, for example, if you set it to extended, customers will be able to select either oe or extended. |
changelocation | Method of widget instance, that allow you to change location externally. It receive only location id. How to get access to widget instance:
For better understanding please see example. |
Compact Search Widget
( Demo )
<script src="https://app.tireconnect.ca/js/widget.js"></script>
<div id="tireconnect" style="width:300px;"></div>
<script>
TCWidget.initSearch({
apikey: 'SUBSTITUTE_YOUR_API_KEY_HERE',
container: 'tireconnect'
});
</script>
Parameters
apikey: | Insert the api_key we emailed to you here |
|---|---|
container: | Must match the id of the <div> above the <script> tag. If you rename the <div>, update this value accordingly. Copy and paste is recommended to avoid errors. |
redirect_url: | This optional parameter tells the Compact Search Widget where to re-direct the consumer to in order to display their search results. The compact widget only initiates searches. It does NOT display search results itself, but rather redirects the consumer to an instance of the Standard Search Widget that must be installed on the client's website. |
locale: | This parameter enables you to optionally select a locale for this widget. Please note the locale has to be available for this account. Note: A default value is set based on your account settings. Examples: en_US, en_CA, fr_CA |
location_lock & location_id | Allows hiding the standard TC location selector at the top of the widget on search page. Accepted values: true, false location_lock parameter works only with the location_id parameter in the embed code. |
Offers Widget
( Demo )
TireConnect Offers is a widget provides a concise real-time catalog of all available tire discounts and rebates. TireConnect Offers is directly connected to the main TireConnect widget, where customers can complete purchases of the featured tires.
Visit the Offers section of our administrator manual to learn how to create offers in the TireConnect platform, and select which offers are to be displayed in the Standalone TireConnect Offers Widget.
<script src="https://app.tireconnect.ca/js/widget.js"></script>
<div id="tireconnect"></div>
<script>
TCWidget.initOffers({
apikey: 'SUBSTITUTE_YOUR_API_KEY_HERE',
container: 'tireconnect'
});
</script>
Parameters
apikey: | Insert the api_key we emailed to you here. |
|---|---|
container: | Must match the id of the <div> above the <script> tag. If you rename the <div>, update this value accordingly—copy and paste is recommended to avoid errors. |
locale: | This parameter enables you to optionally select a locale for this widget. Please note the locale has to be available for this account. Please also note, there is a default value set based on account settings. Examples: en_US, en_CA, fr_CA |
redirectUrl: | This optional parameter specifies the URL to which the Offer Widget redirects the consumer to in order to display their search results. |
NOTE: In TireConnect Offers widget we're using Compact Search Widget so you can use all Parameters for installing TireConnect Offers.
Automotive Services Widget
( Demo )
<script src="https://app.tireconnect.ca/js/widget.js"></script>
<div id="tireconnect"></div>
<script>
TCWidget.initServices({
apikey: 'SUBSTITUTE_YOUR_API_KEY_HERE',
container: 'tireconnect'
});
</script>
Parameters
apikey: | Insert the api_key we emailed to you here. |
|---|---|
container: | Must match the id of the <div> above the <script> tag. If you rename the <div>, update this value accordingly. Copy and paste is recommended to avoid errors. |
locale: | This parameter enables you to optionally select a locale for this widget. Please note the locale has to be available for this account. Please also note, there is a default value set based on account settings. Examples: en_US, en_CA, fr_CA |
locationSelector: | This option controls how the location selection is displayed to the user. auto (default) - When set to 'auto', it detects automatically, which type of selector to choose, based on the location count of the specified account. dropdown - Simple dropdown with all locations associated with your client account will be shown to the user. locator – an enhanced location selector with map and search functionality that allows users to find their closest or most appropriate location. lock - the location selector is not displayed to the customer. The locationId parameter is required for proper location selection |
locationId: | This parameter enables you to optionally pre-select a location, if you are a multi location business. |
redirectUrl: | This optional parameter tells the Automotive Services Widget where to re-direct the consumer to in order to display Standard Search widget. Used for Automotive Services Widget and Standard Search Widget relation. |
locationList: | true – the location list will always be shown. false - hides the location list on initial load if no centerCords are provided in embed code and address passed in link. Location list will appear after customer enter his address. *Note: work only with locationSelector: locator or with auto or without this param when there is 3+ locations. |
mode | manual – the location widget works normally (default value) auto - the user is asked to enter their zip code or address. The locator selects the nearest location and displayed the appropriate widget.
|
Alternative widget embedding (init in a modal window)
The widget can be embedded into your project in three different ways, offering different levels of flexibility and control. Each approach initialises the widget in a modal window.
Using all the methods listed below you can initialise all TireConnect widgets
Widget type
tire-wheel | Tire & Wheel Widget |
search | Compact Search Widget |
offers | Offers Widget |
services | Automotive Services Widget |
Parameters
data-apikey: | Insert the api_key we emailed to you here. |
src: | Widget script |
data-opener-selector: | Selector to find element on the page. Click on such elements will open widget in a modal window. Please note that this parameter required only for Method 2: Automatic Selector (No-Code) |
data-modal-title | This optional parameter allows you to change default title in a header of modal window |
data-modal-width | This optional parameter allows you to change modal window width. By default it will be calc(100% - 20px) |
data-modal-max-width | This optional parameter allows you to change maximum modal window width. By default it will be 1200px |
Method 1: Global Instance (Standard)
( Demo )
Best for cases where you need to open multiple widget types (e.g., Services, Offers, Search) on a single page using a global object.
Include the script with your API credentials:
<script
src="https://app.tireconnect.ca/js/widget.js"
data-apikey='SUBSTITUTE_YOUR_API_KEY_HERE'
//optional parameters
data-modal-title="Find Tires & Wheels"
data-modal-width="calc(100% - 20px)"
data-modal-max-width="1200px"
>
</script>Trigger the modal using the global
TCWidgetobject with the appropriateopenModalvalue in your button’s onclick event.
<button type="button" onclick="TCWidget.openModal('tire_wheel')">Open Tire & Wheel Widget</button>
<button type="button" onclick="TCWidget.openModal('services')">Open Automotive Services Widget</button>
<button type="button" onclick="TCWidget.openModal('offers')">Open Offers Widget</button>
<button type="button" onclick="TCWidget.openModal('search')">Open Compact Search Widget</button>
Method 2: Automatic Selector (No-Code)
( Demo )
Best for simple integrations where you want to bind the widget to specific elements without writing custom JavaScript.
Configure the loader with an element selector and a specific widget type:
<script
src="https://app.tireconnect.ca/js/widget.js"
data-apikey='SUBSTITUTE_YOUR_API_KEY_HERE'
data-opener-selector=".btn-open-widget"
data-widget="offers"
//optional parameters
data-modal-title="Find Tires & Wheels"
data-modal-width="calc(100% - 20px)"
data-modal-max-width="1200px"
>
</script>