Versions Compared

Version Old Version 12 New Version Current
Changes made by

Oleksandr Samarin

Kostiantyn Borysenko

Saved on

Key

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

...

  1. Once you're in the editor, locate the preview field and switch to Text Mode (or Code Editor in some versions of WordPress).

    image-20250116-132944.pngImage Removed

    This will display the raw HTML code for the page.

    image-20250116-132944.pngImage Added

Embed the Widget:

  1. Decide where the widget should be placed on the page. For example, below the header element.

  2. In the code, find the closing tag for the header element (</header>).

  3. Paste the widget's HTML code below the closing header tag.

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

...

  1. From the dashboard, navigate to Appearance > Widgets.

    image-20250116-134734.png

  2. Click the + (Plus) button in the top-right corner.

    image-20250116-134812.png

...

  1. Paste the widget's HTML code into the Write HTML… field.

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

  2. Click the Preview button to see how the widget will appear.

...

  1. Once satisfied with the preview, click the Update button to save the changes.

  2. A "Widget saved" notification will appear in the bottom-left corner of the page.

    Animation1.gif

...

Shopify

Embed the Widget in the Website's HTML Code

...

  1. In the code editor, open the theme.liquid file located under the Layout section.

  2. Decide where you want the widget to appear:

    Paste the widget code inside the <body> element.
    For example, you
    Code 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>

    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:

...

  1. Visit godaddy.com and log in to your account.

  2. Open the website you want to edit using the GoDaddy Website Builder.

  3. After successfully logging in you will be directed to the Dashboard.

    image-20250210-101322.pngImage Added

2. Edit Your Website

Choose the Page and Section:

  1. Click Edit Website in the GoDaddy Website BuilderWhile on Dashboard, click Edit Website.

    image-20250116-125332.png

  2. Navigate to the page where you want to embed the widget.

  3. Click On the edit page, click Add Section in the area where you’d like the widget to appear.

    image-20250116-125438.png

3. Embed the Widget Code

Insert HTML Code:

  1. From the available section options, select Select Files & Web > HTML > Add from the available section options.

    image-20250116-125611.png

  2. Paste the widget's embed code into the Custom Code field.

    image-20250116-125646.png


    Code 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 Publish:

  1. Click Preview to check the widget's placement and appearance on the page.

    image-20250210-110437.pngImage Added

  2. If satisfied, click Publish to make the widget live on your website.

    image-20250210-110936.pngImage Added