Adding custom code to Instant Site

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.

There are two places on Instant Site where you can add code: the header section and the body section. If you use the New-Gen Instant Site, you can also replace specific site sections with your content via JavaScript code.

Choosing where to add code

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.

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.

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.

Adding code to the head section of your Instant Site

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

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

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

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

Adding code to the body section of your Instant Site

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.

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

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

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

Replacing New-Gen Instant Site sections with your script

You can replace an existing New-Gen Instant Site section with your content via custom JavaScript code. For example, if you want to add Google Calendar so that customers can book your music lessons. After replacing the section content, you can add it to the navigation menu so that customers can locate it right away.

To replace an Instant Site section with your content:

1. From your Ecwid admin, go to Website (or to Overview → Manage Instant Site).
2. Click on your Instant Site address to open it:
   

   

3. Scroll down to the section that you want to replace, right click on it, then choose Inspect and copy the section ID:
   

   

   Learn more about finding Ecwid selectors →
   You can replace only the sections that have the following IDs:
   tile-text-...
   tile-image-text-...
   tile-call-to-action-...
4. Copy this code:

   <script>
   document.addEventListener("DOMContentLoaded", function(){
   document.getElementById("tile-text-H2KtzB").innerHTML = '
       <div>YOUR CODE HERE</div>';
    });
   </script>
   

5. Replace “tile-text-H2KtzB” with your Instant Site section ID and “YOUR CODE HERE” with your custom code.
6. On the Website (or Overview → Manage Instant Site) page in your Ecwid admin, scroll down to the “Advanced website settings” section and click Add Code under Custom JavaScript code.
7. In the appeared field, enter your code.
8. Save the changes.

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

Related articles

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