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.

Universal Search 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.
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 Universal 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

1 Universal Search Widget
2 Universal Search Widget that allow to change location ID without initializing it
3 Compact Search Widget
4 Offers Widget
5 Automotive Services Widget

Universal 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'
});
</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: (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. Demo
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 Demo
locator: (optional parameter)	This parameter allows you to enable the location search widget type when embedding universal search 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. Demo
location_lock: (optional parameter)	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. Demo
services_widget_url: (optional parameter)	This optional parameter tells the Universal Search Widget where to re-direct the consumer to in order to display automotive services widget. Used for Automotive Services Widget and Universal Search Widget relation. Demo
allowed_products: (optional parameter)	This optional parameter tells the Universal Search 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. Demo
fitment: (optional parameter)	This optional parameter defines which fitment options the Universal Search 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. Demo

Universal Search 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: (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: (optional parameter)	This parameter allows you to enable the location search widget type when embedding universal search 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: (optional parameter)	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: (optional parameter)	This optional parameter tells the Universal Search Widget where to re-direct the consumer to in order to display automotive services widget. Used for Automotive Services Widget and Universal Search Widget relation.
allowed_products: (optional parameter)	This optional parameter tells the Universal Search 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: (optional parameter)	This optional parameter defines which fitment options the Universal Search 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: TCWidget.init() returns a promise. Each promise has method `then` method `then` receive function parameter this function receive only one parameter. This parameter is own 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.initForm({
    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: (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 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. Demo
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. Note: A default value is set based on your account settings. Examples: en_US, en_CA, fr_CA Demo
location_lock & location_id (optional parameters)	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. Demo

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: (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 Demo
redirectUrl: (optional parameter)	This optional parameter specifies the URL to which the Offer Widget redirects the consumer to in order to display their search results. Demo

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: (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 Demo
locationSelector: (optional parameter)	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. Demo lock - the location selector is not displayed to the customer. The locationId parameter is required for proper location selection Demo
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. Demo
redirectUrl: (optional parameter)	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. Demo
locationList: (optional parameter)	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. Demo
mode (optional parameter)	manual – the locator 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. Name of the selected location won’t be displayed. If users clicks Change location, we would go though the same process again. Demo

TireConnect Widgets (universal) Deployment Guide

Universal Search Widget

Universal Search Widget that allow to change location ID without initializing it

Compact Search Widget

Offers Widget

Automotive Services Widget