{"article":{"id":8359349900828,"url":"https://ecwidhelp.zendesk.com/api/v2/help_center/en-us/articles/8359349900828.json","html_url":"https://support.ecwid.com/hc/en-us/articles/8359349900828-Adding-custom-code-to-Instant-Site","author_id":389192317019,"comments_disabled":true,"draft":false,"promoted":false,"position":1,"vote_sum":-3,"vote_count":13,"section_id":12345592066588,"created_at":"2023-04-06T18:06:34Z","updated_at":"2025-10-04T11:31:14Z","name":"Adding custom code to Instant Site","title":"Adding custom code to Instant Site","source_locale":"en-us","locale":"en-us","outdated":false,"outdated_locales":[],"edited_at":"2025-09-15T09:55:08Z","user_segment_id":null,"permission_group_id":289649,"content_tag_ids":[],"label_names":["use_for_answer_bot"],"body":"

Custom code allows you to verify Instant Site ownership and add a wide variety of new elements and content like chat or contact form widgets to your Ecwid website. You can also integrate third-party services (e.g., booking) with Instant Site this way.

\n

There are two places on Instant Site where you can add code: the header section and the body section. Also, you can add dedicated sections with custom code to individual Instant Site pages.

\n
\n
Plan availability: Venture, Business, Unlimited.\n
\n
Upgrade
\n
\n

\nChoosing where to add code

\n

Adding code to the Instant Site header or body allows you to apply code to all the site pages. Pasting code into an Instant Site section enables you to add custom code to a particular site page where this section belongs.

\n

When choosing between Instant Site’s header and body as a place to add your custom code, consider the code itself and your use case.

\n

Generally, implementing JavaScript to the site body is recommended as it’s better in terms of page speed. However, there are cases (e.g., domain ownership verification) when your code must be added to the header section.

\n

Make sure you read the instructions for the third-party code/widget that you want to add to your Instant Site for tips on where it’s best to add this particular piece of code.

\n

\nAdding code to the head section of your Instant Site

\n

Inserting code into Instant Site header is your option if you need to verify site or domain ownership (e.g., when selling or advertising on Facebook). You can add multiple codes to the header section.

\n

To add a custom code to the Instant Site head section:

\n
    \n
  1. From your Ecwid admin, go to Website (or to Overview → Manage Instant Site).
    2. \n
  2. Scroll down to the “SEO settings” section and click Add Code under Header meta tags and site verification:
    \"Adding_custom_code_to_Instant_Site__2_.png\"\n
    3. \n
  3. In the appeared field, enter your code.
    4. \n
  4. Save the changes.
    5. \n
\n

Refresh the Instant Site page in your browser to see the changes.

\n

\nAdding code to the body section of your Instant Site

\n

Inserting code into the Instant Site body is your option if you need to implement any custom script. For example, you want to have a Zendesk chat window or a contact form widget on your website. You can add as many codes to the body section as you need. Please note that the content will appear at the bottom of the <body> section of the site, so most likely at the very end of your site.

\n

To add a custom code to the Instant Site body section:

\n
    \n
  1. From your Ecwid admin, go to Website (or to Overview → Manage Instant Site).
    2. \n
  2. Scroll down to the “Advanced website settings” section and click Add Code under Custom JavaScript code:
    \"Adding_custom_code_to_Instant_Site__1_.png\"
    \n
    3. \n
  3. In the appeared field, enter your code (no longer than 4000 symbols).
    4. \n
  4. Save the changes.
    5. \n
\n

Refresh the Instant Site page in your browser to see the changes.

\n

\nAdding custom code sections to individual site pages

\n

You can add a dedicated site section with custom code (HTML, CSS, or JavaScript) to any Instant Site page you want. For example, if you need a Google Calendar widget on your homepage so that customers can book your music lessons, or you want to show a 3D view of your brick-and-mortar store to shoppers on the Contacts page.

\n
Adding sections with custom code is not supported on the legacy version of Instant Site.
\n

To add a site section with custom code:

\n
    \n
  1. From your Ecwid admin, go to Website → Edit Site.
    2. \n
  2. (if you've added multiple pages to your site) From the Page: Homepage dropdown in the left upper corner, choose the page where you want to add your code.
    3. \n
  3. Click Add Section, then scroll down to Advanced Solutions.
    4. \n
  4. In the Embed & Custom Code block, click Add Custom Code Section:
    \"Embedding\n
    5. \n
  5. Paste your code into the field.
    6. \n
  6. Click Back and drag and drop the section in the sections list to change its positioning on the site page.
    7. \n
  7. Once you are done editing your website, click the Publish button in the top right corner of the editor.
    8. \n
\n

That's it! You've added your custom code to an Instant Site section on a page. Refresh the page in your browser to see the changes.

\n

Related articles

\n

Instant Site Favicon
Verifying Instant Site ownership with Google Search Console
Pinterest Tag
Facebook Pixel

","user_segment_ids":[]}}