{"type":"doc","content":[{"type":"mediaSingle","attrs":{"layout":"center","width":350,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":350,"id":"ad2820f0-2636-4a59-95d9-a22048b4d0a3","collection":"contentId-90996781","type":"file","height":257}}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"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 ","type":"text"},{"text":"TireConnect Embedding & Website Best Practices","type":"text","marks":[{"type":"link","attrs":{"href":"https://eaxisinc.atlassian.net/wiki/spaces/TP/pages/2599518210"}}]},{"text":" document.","type":"text"}]},{"type":"paragraph","content":[{"text":"TireConnect provides different types of turnkey widgets.","type":"text"}]},{"type":"paragraph","content":[{"text":"*Note: ","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":"widget API key provided can be used for all types of widget and can be used simultaneously with other types as well.","type":"text","marks":[{"type":"em"}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Standard Search Widget","type":"text","marks":[{"type":"strong"}]},{"text":" - ( ","type":"text"},{"text":"Demo","type":"text","marks":[{"type":"link","attrs":{"href":"https://tutorials.tireconnect.ca/demo/embed/standard_demo.html"}}]},{"text":" ) - This is our standard search widget. It allows users to search for tires by their vehicle make or alternatively by a specific tire size.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Locator Search Widget ","type":"text","marks":[{"type":"strong"}]},{"text":"- ( ","type":"text"},{"text":"Demo","type":"text","marks":[{"type":"link","attrs":{"href":"https://tutorials.tireconnect.ca/demo/embed/location_demo.html"}}]},{"text":" ) - 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.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Mobile Installer Widget","type":"text","marks":[{"type":"strong"}]},{"text":" ( ","type":"text"},{"text":"Demo","type":"text","marks":[{"type":"link","attrs":{"href":"https://tutorials.tireconnect.ca/demo/embed/mobile_demo.html"}}]},{"text":" ) - 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 ","type":"text"},{"text":"Locator Search Widget","type":"text","marks":[{"type":"link","attrs":{"href":"https://eaxisinc.atlassian.net/wiki/spaces/TP/pages/90996781/TireConnect+Widgets+v3+Deployment+Guide#%5BinlineExtension%5DLocator-Search-Widget-(-Demo-)"}}]},{"text":" with ","type":"text"},{"text":"mode","type":"text","marks":[{"type":"strong"}]},{"text":": “","type":"text"},{"text":"auto","type":"text","marks":[{"type":"strong"}]},{"text":"” param installed.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Compact Search Widget ","type":"text","marks":[{"type":"strong"}]},{"text":"- ( ","type":"text"},{"text":"Demo","type":"text","marks":[{"type":"link","attrs":{"href":"https://tutorials.tireconnect.ca/demo/embed/compact_demo.html"}}]},{"text":" ) - 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.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Offers Widget","type":"text","marks":[{"type":"strong"}]},{"text":" - ( ","type":"text"},{"text":"Demo ","type":"text","marks":[{"type":"link","attrs":{"href":"https://tutorials.tireconnect.ca/demo/embed/offers_demo.html"}}]},{"text":") - TireConnect Offers is a widget that provides a concise real-time catalog of all available tire discounts and rebates.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Automotive Services Widget ","type":"text","marks":[{"type":"strong"}]},{"text":"- ( ","type":"text"},{"text":"Demo","type":"text","marks":[{"type":"link","attrs":{"href":"https://tutorials.tireconnect.ca/demo/embed/services_demo.html"}}]},{"text":" ) - This is our widget that will help you to provide Automotive Services for customers.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Wheels & Packages Widget","type":"text","marks":[{"type":"strong"}]},{"text":" - ( ","type":"text"},{"text":"Demo","type":"text","marks":[{"type":"link","attrs":{"href":"https://tutorials.tireconnect.ca/demo/embed/wheels_demo.html"}}]},{"text":" ) - 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.","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Parameters Legend","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"table","attrs":{"layout":"full-width","width":1800.0,"localId":"a3ff06bf-5596-4b00-a53c-888f37f8e7f2"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[154.0]},"content":[{"type":"paragraph","content":[{"text":"MANDATORY","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}},{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[1190.0]},"content":[{"type":"paragraph","content":[{"text":"Parameters highlighted in red are mandatory. If you copy and paste the examples below, then you must change the mandatory parameters accordingly.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[154.0]},"content":[{"type":"paragraph","content":[{"text":"OPTIONAL","type":"text","marks":[{"type":"textColor","attrs":{"color":"#36b37e"}},{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[1190.0]},"content":[{"type":"paragraph","content":[{"text":"Parameters highlighted in green are optional. Please refer to the specific instructions for each one, and use these parameters only when necessary.","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"text":"Table of Contents","type":"text","marks":[{"type":"strong"}]}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"minLevel":{"value":"1"},"maxLevel":{"value":"6"},"outline":{"value":"false"},"type":{"value":"list"},"separator":{"value":"brackets"},"printable":{"value":"true"}},"macroMetadata":{"macroId":{"value":"55ec9b23-2e9e-4229-a464-4dd82dae65e7"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"177caac3-ab93-44fc-88a0-f1bd4a6538c7"}},{"type":"heading","attrs":{"level":1},"content":[{"text":"Standard Search Widget ","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"( ","type":"text"},{"text":"Demo","type":"text","marks":[{"type":"link","attrs":{"href":"https://tutorials.tireconnect.ca/demo/embed/standard_demo.html"}}]},{"text":" )","type":"text"}]},{"type":"codeBlock","content":[{"text":"\n

\n","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"text":"Parameters","type":"text","marks":[{"type":"strong"}]}]},{"type":"table","attrs":{"layout":"full-width","width":1800.0,"localId":"6f5a44af-f7c3-4985-abf2-cad04f8ae96d"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[216.0]},"content":[{"type":"paragraph","content":[{"text":"apikey:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}},{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[1128.0]},"content":[{"type":"paragraph","content":[{"text":"Insert the api_key we emailed to you here.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[216.0]},"content":[{"type":"paragraph","content":[{"text":"container:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}},{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[1128.0]},"content":[{"type":"paragraph","content":[{"text":"This value must match the name of the DIV directly above the \n

\n","type":"text"}]},{"type":"paragraph","content":[{"text":"Parameters","type":"text","marks":[{"type":"strong"}]}]},{"type":"table","attrs":{"layout":"full-width","width":1800.0,"localId":"036f8c83-78a5-4dde-854a-8b1c68d17811"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[175.0]},"content":[{"type":"paragraph","content":[{"text":"apikey:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}},{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[1169.0]},"content":[{"type":"paragraph","content":[{"text":"Insert the api_key we emailed to you here.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[175.0]},"content":[{"type":"paragraph","content":[{"text":"container:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}},{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[1169.0]},"content":[{"type":"paragraph","content":[{"text":"This value must match the name of the DIV directly above the \n

\n","type":"text"}]},{"type":"paragraph","content":[{"text":"Parameters","type":"text","marks":[{"type":"strong"}]}]},{"type":"table","attrs":{"layout":"full-width","width":1800.0,"localId":"adf875f9-3be0-49ee-bb9f-a42048f611df"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[168.0]},"content":[{"type":"paragraph","content":[{"text":"apikey:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}},{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[1176.0]},"content":[{"type":"paragraph","content":[{"text":"Insert the api_key we emailed to you here.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[168.0]},"content":[{"type":"paragraph","content":[{"text":"container:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}},{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[1176.0]},"content":[{"type":"paragraph","content":[{"text":"This value must match the id of the DIV directly above the \n

\n","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Parameters","type":"text","marks":[{"type":"strong"}]}]},{"type":"table","attrs":{"layout":"full-width","width":1800.0,"localId":"bb144799-879a-46c3-8c93-82b9d59c4edf"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[153.0]},"content":[{"type":"paragraph","content":[{"text":"apikey:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}},{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[1191.0]},"content":[{"type":"paragraph","content":[{"text":"Insert the api_key we emailed to you here","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[153.0]},"content":[{"type":"paragraph","content":[{"text":"container:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}},{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[1191.0]},"content":[{"type":"paragraph","content":[{"text":"This value must match the id of the DIV directly above the \n

\n","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Parameters","type":"text","marks":[{"type":"strong"}]}]},{"type":"table","attrs":{"layout":"full-width","width":1800.0,"localId":"acbb08ee-74f7-4e56-a5e1-ac3c1f7e79b1"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[230.0]},"content":[{"type":"paragraph","content":[{"text":"apikey:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}},{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[1114.0]},"content":[{"type":"paragraph","content":[{"text":"Insert the api_key we emailed to you here.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[230.0]},"content":[{"type":"paragraph","content":[{"text":"container:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}},{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[1114.0]},"content":[{"type":"paragraph","content":[{"text":"This value must match the id of the DIV directly above the \n

\n","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Parameters","type":"text","marks":[{"type":"strong"}]}]},{"type":"table","attrs":{"layout":"full-width","width":1800.0,"localId":"d3bddfc3-b6c2-48c9-b47c-1e7763c47651"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[203.0]},"content":[{"type":"paragraph","content":[{"text":"apikey:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}},{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[1141.0]},"content":[{"type":"paragraph","content":[{"text":"Insert the api_key we emailed to you here.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[203.0]},"content":[{"type":"paragraph","content":[{"text":"container:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}},{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[1141.0]},"content":[{"type":"paragraph","content":[{"text":"This value must match the id of the DIV directly above the \n

\n","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Parameters","type":"text","marks":[{"type":"strong"}]}]},{"type":"table","attrs":{"layout":"default","width":1800.0,"localId":"b4765c8c-a2ed-43d9-8e1a-c3b34b1eb6dc"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[83.0]},"content":[{"type":"paragraph","content":[{"text":"apikey:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}},{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[677.0]},"content":[{"type":"paragraph","content":[{"text":"Insert the api_key we emailed to you here.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[83.0]},"content":[{"type":"paragraph","content":[{"text":"container:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#bf2600"}},{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[677.0]},"content":[{"type":"paragraph","content":[{"text":"This value must match the id of the DIV directly above the

Browser not supported