TireConnect Widgets Deployment Guide
- Oleksandr Samarin
- Artem Samoilyk
- Roman Melnychuk
- George Silagadze
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 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.
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.
Locator 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.
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 Locator Search Widget with mode: “auto” param installed.
Compact 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.
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.
Wheels & Packages Widget - ( Demo ) - This is our standard wheels search widget. It allows users to search for wheels by their vehicle. This widget combines standard search widget and location search widget dependent from embed parameters.
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 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 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
apikey: | 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: | 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 |
locationLock: | Allow to hide standard TC location selector in the top of widget on search page. Accepted values: true, false This param working only with locationID param in embed code. |
servicesWidgetUrl: | This optional parameter tells the Search Widget where to re-direct the consumer to in order to display automotive services widget. Used for Automotive Services Widget and Standard Search Widget relation. |
Standard Search Widget that allow to change location ID without initializing it
( Demo )
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.
<script src="https://app.tireconnect.ca/js/widget.js"></script>
<div id="tireconnect"></div>
<script>
function changeLocation(locationId) {
searchWidget.changeLocation(locationId);
}
TCWidget.init({
apikey: 'SUBSTITUTE_YOUR_API_KEY_HERE',
container: 'tireconnect',
locationLock: true,
}).then(function(widget) {
searchWidget = widget;
});
</script>Parameters
apikey: | 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: | 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 |
locationLock: | Allow to hide standard TC location selector in the top of widget on search page. Accepted values: true, false This param working only with locationID param in embed code. |
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. |
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'
});
</script>Parameters
apikey: | 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: | 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 |
centerCoords: | Initial center coordinates when map opens. Example: [34.0522342, -118.2436849] |
locationList: | true - location list will be present always false - will hide location list when widget loads first time in case there is no centerCords in embed code and address passed in link. Location list will appear after customer enter his address. |
mode | manual - locator 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.
|
Compact Search Widget
( Demo )
Parameters
apikey: | 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. |
layout: | In case you’re not using this parameter compact search widget will be automatically adjusted according to page or div size and layout will be changed. EG In case parent div will be more that 768px - widget will use horizontal layout. In case less that 768px - vertical. |
locationDetect: | 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: | This parameter enables you to optionally pre-select a location, if you are a multi location business. Note: This parameter is only applicable if the locationDetect is set to manual. |
locationLock: | Allow to hide standard TC location selector in the top of widget on search page. Accepted values: true, false This param working only with locationID param in embed code. |
view: | 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. |
redirectUrl: | 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. Please also note, there is a default value set based on account settings. Examples: en_US, en_CA, fr_CA |
locationAutoSelect: | In case Compact Search Widget redirect to page with Locator we could set up if nearest location will be selected automatically or not. true - nearest location will be selected automatically. (Default value) false - nearest location won't be selected manually and user should select it manually |
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 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.
Parameters
apikey: | 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: | 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 tells the Offer Widget where to re-direct 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 )
Parameters
apikey: | 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: | 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: | The option controls how the location selection will be 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 - Enhanced locations selector with map and search functionality, allows user to find their closest or most appropriate location. lock - Location selector is not displayed to the customer in this case. 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 - location list will be present always false - will hide location list when widget loads first time in case there is no centerCords 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 - locator widget will work as usual (default value) auto - User would be asked to enter their zip code or address, the locator would selected the closest location and displayed the appropriate widget.
|
Wheels & Packages Widget
( Demo )
Parameters
apikey: | 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: | 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 allow you to enable location search widget type instead of standard type when embedding wheels search widget. true - location search widget will be enabled false - standard search widget will be enabled. Note: In case parameter is missing it’s set to false by default so standard search widget will be enabled. |
package: | This parameter allow you to hide "Need tires?" option from summary page true - You will see "Need tires?" in case there is at least one active tire supplier. false - option "Need tires?" will be hidden. Note: In case parameter is missing it’s set to true. |