Versions Compared

Key

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

...

  1. In the dashboard, navigate to either Posts or Pages.

  2. Click Add New or select an existing post/page to edit.

    image-20250116-132843.pngImage Added


    image-20250116-132903.pngImage Added

Switch to Text Mode:

  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 Added
  2. This will display the raw HTML code for the page.

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.

...

  1. Click the Preview Changes button in the top-right corner to see how the widget will appear.

    Animation.gifImage Added
  2. If you're satisfied, click the Update button to save your changes.

    image-20250116-134629.pngImage Added

Review the Embedded Widget:

...

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

    image-20250116-134734.pngImage Added
  2. Click the + (Plus) button in the top-right corner.

    image-20250116-134812.pngImage Added

Add a Custom HTML Block:

  1. In the search bar, type Custom HTML and select it.

  2. A new block labeled "Custom HTML" will appear.

...

  1. To adjust the position, click the Drag button and move the widget to the desired location.

    Animation3.gifImage Added

Insert Your HTML Code:

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

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

View the Embedded Widget:
Use the page link to review the embedded widget in action.

SHOPIFY

1. Embed the Widget in the Website's HTML Code

Access the Theme Code:

  1. Log in to your Shopify Admin at http://shopify.com .

  2. Navigate to Online Store > Themes > Actions > Edit Code.

    image-20250116-130209.pngImage Added

Modify the Theme File:

  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 before the closing <head> tag to include it in the header.

    • Paste the widget code before the closing <body> tag to include it at the bottom of the page.

Save and Preview:

  1. Click the Save button to apply your changes.

  2. Use the Preview Store button to check how the widget appears on your site.

    image-20250116-130252.pngImage Added

2. Embed the Widget in the Home, Product, or Collection Page

Access the Theme Customizer:

  1. Navigate to Online Store > Themes > Customize.

    image-20250116-130328.pngImage Added

Select the Page Type:

  1. From the Customizer menu, choose the page type you want to edit:

    • Home Page

    • Product Pages

    • Collection Pages

      image-20250116-130420.pngImage Added

Add a Custom Section:

  1. Locate the area where you want the widget to appear (e.g., Header, Template, or Footer).

  2. Click Add Section and select Custom Liquid.

Embed the Widget Code:

  1. Paste the widget code into the Liquid Code field.

  2. Click Save to apply the changes.

    image-20250116-130818.pngImage Added

GODADDY

1. Access Your GoDaddy Account

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

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

2. Edit Your Website

Choose the Page and Section:

  1. Click Edit Website in the GoDaddy Website Builder.

    image-20250116-125332.pngImage Added
  2. Navigate to the page where you want to embed the widget.

  3. Click Add Section in the area where you’d like the widget to appear.

    image-20250116-125438.pngImage Added

3. Embed the Widget Code

Insert HTML Code:

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

    image-20250116-125611.pngImage Added
  2. Paste the widget's embed code into the Custom Code field.

    image-20250116-125646.pngImage Added

Preview and Publish:

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

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