| Table of Contents | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
WordPress
...
General
This guide will walk you through embedding the TireConnect widget on popular website builders. Details about the various widget types and their embedding options can be found in the TireConnect Widgets Deployment Guide. For tips on choosing the right widget to deliver the best customer experience and maximize your sales, check out our TireConnect Embedding & Website Best Practices guide.
Please note that each widget requires an apikey, which will be provided along with the embedding instructions.
If you need any assistance, don’t hesitate to reach out to us:
Online form: https://www.tireconnect.ca/contact-us/
Phone: 1 888 792-7072 ext. 101
Email: support@tireconnect.ca
WordPress
Setup Basics
Access Your WordPress Admin Dashboard
...
You can embed HTML in various sections of your WordPress site, including:
Posts
Pages
Widgets
...
Embed HTML in a Post or Page
Create or Modify a Post/Page:
In the dashboard, navigate to either Posts or Pages.
Click Add New or select an existing post/page to edit.
Switch to Text Mode:
Once you're in the editor, locate the preview field and switch to Text Mode (or Code Editor in some versions of WordPress).
This will display the raw HTML code for the page.
...
Decide where the widget should be placed on the page. For example, below the header element.
In the code, find the closing tag for the header element (
</header>).Paste the widget's HTML code below the closing header tag.
For example:Code Block <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>
Preview and Apply Changes:
Click the Preview Changes button in the top-right corner to see how the widget will appear.
If you're satisfied, click the Update button to save your changes.
...
Return to the Edit page.
Delete or modify the widget's code in Text Mode.
Click Update to apply the changes.
...
Embed HTML within a Widget
Access the Widgets Section:
...
Paste the widget's HTML code into the Write HTML… field.
For example:Code Block <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>
Click the Preview button to see how the widget will appear.
...
View the Embedded Widget:
Use the page link to review the embedded widget in action.
Shopify
...
Embed the Widget in the Website's HTML Code
Access the Theme Code:
Log in to your Shopify Admin at http://shopify.com .
Navigate to Online Store > Themes > Actions > Edit Code.
...
In the code editor, open the theme.liquid file located under the Layout section.
Decide where you want the widget to appear:
Paste the widget code inside the <body> element.
For example, you :Code Block <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>You can place the widget code near the closing </body> tag to include it in a consistent location consistently across your site.
Save and Preview:
Click the Save button to apply your changes.
Use the Preview Store button to check how the widget appears on your site.
...
Embed the Widget in the Home, Product, or Collection Page
Access the Theme Customizer:
...
Paste the widget code into the Liquid Code field.
Click Save to apply the changes.
GoDaddy
1. Access Your GoDaddy Account
...