Versions Compared

Old Version 54

changes.mady.by.user Oleksandr Samarin

Saved on

compared with

New Version Current

changes.mady.by.user Roman Melnychuk

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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.

...

Parameters (standard search widget)

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:
(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

locationLock:
(optional parameter)

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.

Demo

servicesWidgetUrl:
(optional parameter)

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.

Demo

...

Code Block
<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>

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:
(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

locationLock:
(optional parameter)

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:

  1. TCWidget.init() returns a promise.

  2. Each promise has method `then`

  3. method `then` receive function parameter

  4. this function recaive only one parameter. This parameter is owr widget instance.

For better understanding please see example.

...

Parameters (locator search widget)

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:
(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

centerCoords:
(optional parameter)

Initial center coordinates when map opens.

Example: [34.0522342, -118.2436849]

Demo

locationList:
(optional parameter)

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.

Demo

mode
(optional parameter)

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.

  • Name of the selected location won’t be displayed.

  • If users clicks Change location, we would go through the same process again.

...

Anchor
Parameters_Compact
Parameters_Compact
Parameters (compact search widget)

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.
But you can set compact search widget to use one on views manually using such parameters:
vertical for the standard widget or horizontal for the slim horizontal widget

Demo

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.

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. 

Note: This parameter is only applicable if the locationDetect is set to manual. 

Demo

locationLock:
(optional parameter)

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.

Demo

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.

Demo

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

Please also note, there is a default value set based on account settings. Examples: en_US, en_CA, fr_CA

Demo

locationAutoSelect:
(optional parameter)

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

Demo

...

Parameters (offers widget)

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:
(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 tells the Offer Widget where to re-direct the consumer to in order to display their search results.

Demo

...

Parameters (Automotive Services Widget)

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:
(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)

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.

Demo

lock - Location selector is not displayed to the customer in this case. 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 - 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.

Demo

mode
(optional parameter)

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.

  • Name of the selected location won’t be displayed.

  • If users clicks Change location, we would go though the same process again.

Demo

...

Parameters (Standard Wheels Search Widget)

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:
(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 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.

Demo

package:
(optional parameter)

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.

Demo

...