TireConnect Widgets Deployment Guide

This guide will walk you through the process of deploying TireConnect turnkey widgets to your website. Deploying our widgets is a straightforward process that should be familiar to webmasters and/or website developers. This method of embedding is the current standard and only means supported for this process. We also recommend you read our TireConnect Embedding & Website Best Practices document.


TireConnect provides four (4) different types of turnkey widgets. **Note: widget API key provided can be used for all 4 types of widget and can be used simultaneously with other types as well.**

  1. Standard Search Widget - ( Demo ) - This is our standard search widget. It allows users to search for tires by their vehicle make or alternatively by a specific tire size.

  2. Location Search Widget - ( 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.

  3. Compact Search Widget - ( Vertical Search Widget Demo ) ( Horizontal Search Widget Demo ) - This widget is designed to scale down to a compact size so that it can be easily installed in a sidebar or other confined space on your website. It provides the same search functionality as the Standard Search Widget.

  4. TireConnect Offers - ( Demo )  - TireConnect Offers is a widget that provides a concise real-time catalog of all available tire discounts and rebates.

  5. AutoService Widget - ( Demo ) - AutoService is a widget provides consumers the ability to view and request an appointment time, based on the automotive services made available.


All four 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. If not being used PLEASE remove. 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 Search 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',

   locationId: 'SUBSTITUTE_LOCATION_ID_HERE',

   locale: 'SUBSTITUTE_LOCALE_STRING_HERE '
});
</script>




Be careful when you paste your own API key into the highlighted spot not to delete either of the quotes. They are important and the embed function will not work properly without both of them. 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 (standard search widget)

api_key:
Insert the api_key we emailed to you here.
container:
This value must match the name of the DIV directly above the <script> tag. If you change the name of the DIV, you must update this value to match. Your best option is to simply copy and paste this value into your webpage.
locationId:
(optional parameter)
This parameter enables you to optionally pre-select a location, if you are a multi location business. 
Location ID can be emailed to you if you would like to use this functionality. 
locale:
(optional parameter)

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 Search Widget ( Demo )

The locator search widget is typically used by clients with multiple dealer locations. The Locator Search Widget is often placed on their homepage. Using this widget, consumers can find your closest or most appropriate location for themselves before conducting a tire search.



<script src="https://app.tireconnect.ca/js/widget.js"></script>
<div id="tireconnect"></div>
<script>
TCWidget.initLocator({
apikey: 'SUBSTITUTE_YOUR_API_KEY_HERE',
container: 'tireconnect',


    locationId: 'SUBSTITUTE_LOCATION_ID_HERE',             locale: 'SUBSTITUTE_LOCALE_STRING_HERE '
});
</script>



Parameters (locator search widget)

api_key:
Insert the api_key we emailed to you here.
container:
This value must match the id of the DIV directly above the <script> tag. If you change the name of the DIV, you must update this value to match. Your best option is to simply copy and paste this value into your webpage.
locationId:
(optional parameter)

This parameter enables you to optionally pre-select a location, if you are a multi location business. 
Location ID can be emailed to you if you would like to use this functionality. 
locale:
(optional parameter)
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


Compact Search Widget ( Vertical Search Widget Demo ) ( Horizontal Search Widget Demo )


<script src="https://app.tireconnect.ca/js/widget.js"></script>
<div id="tireconnect" style="width:300px;"></div>
<script>
TCWidget.initForm({
apikey: 'SUBSTITUTE_YOUR_API_KEY_HERE',


    layout: 'vertical',
locationDetect: 'auto',


    locationId: 'SUBSTITUTE_LOCATION_ID_HERE',
view: 'compact',
container: 'tireconnect',

    redirectUrl: 'http://pageAddressOfDefaultWidgetOnYourWebsite.com',

    locale: 'SUBSTITUTE_LOCALE_STRING_HERE '
});
</script>



Parameters (compact search widget)

api_key:
Insert the api_key we emailed to you here
layout:
vertical (default) for the standard widget or horizontal for the slim horizontal widget
locationDetect:
(optional parameter)
auto - When set to 'auto', this parameter causes the compact widget to display the location selector as a text input field. This is the default value when the parameter is not passed.

manual - Causes the compact widget to display a select menu of all locations associated with your client account.
locationId:
(optional parameter)

This parameter enables you to optionally pre-select a location, if you are a multi location business. 
Location ID can be emailed to you if you would like to use this functionality. 

Note: This parameter is only applicable if the locationDetect is set to manual. 
view:
(optional parameter)
full - Adds 3 extra search fields to the compact widget on the Tire Size tab (default if not set directly)

compact - Extra fields are not added. Note: This parameter will be ignored if the layout parameter is set to horizontal.

See "view" parameter example images below.
container:
This value must match the id of the DIV directly above the <script> tag. If you change the name of the DIV, you must update this value to match. Your best option is to simply copy and paste this value into your webpage.
redirectUrl:
(optional parameter)
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 N OT 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:
(optional parameter)
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




Vertical Layout


locationDetect parameter example images...


“locationDetect” parameter is set to “manual”. Widget displays a
pop-up menu with all of your locations.


“locationDetect” parameter is set to “auto”. Widget displays a text box for user to enter city or zip/postal code.



view parameter example images...



“view” parameter set to “full”. 3 extra search fields are displayed to the user

“view” parameter set to “compact”. A simpler interface without the extra search fields.


Horizontal Layout



TireConnect Offers ( 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 their purchase of these featured tires.


Visit our administrator manual offers section to learn how to create offers through 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',

    locale: 'SUBSTITUTE_LOCALE_STRING_HERE '


});
</script>



Parameters (offers widget)

api_key:
Insert the api_key we emailed to you here.
container:
This value must match the id of the DIV directly above the <script> tag. If you change the name of the DIV, you must update this value to match. Your best option is to simply copy and paste this value into your webpage.
locale:
(optional parameter)
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




AutoService Widget ( Demo )

AutoService is a widget provides consumers the ability to view and request an appointment time, based on the automotive services made available.



<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 (offers widget)

api_key:
Insert the api_key we emailed to you here.
container:
This value must match the id of the DIV directly above the <script> tag. If you change the name of the DIV, you must update this value to match. Your best option is to simply copy and paste this value into your webpage.