Custom code allows you to verify eCom (E-Series) Instant Site ownership and add a wide variety of new elements and content like chat or contact form widgets to your 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. You can also add dedicated sections with custom code to individual Instant Site pages.
Choosing where to add code
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.
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 header section of your Instant Site
If you need to verify site or domain ownership (e.g., when selling or advertising on Facebook via eCom), you can insert code into your Instant Site header section. You can add multiple codes to the header section.
To add a custom code to the Instant Site header section:
-
In your eCom admin, scroll down to the SEO settings section and click Add Code under Header meta tags and site verification.
- In the field, enter your code.
- 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
Ii you need to implement any custom script, you can insert code into the Instant Site body section. For example, you may want to add a chat window or a contact form widget to your website. You can add as many codes to the body section as needed. Note that the content will appear at the bottom of the <body> section of the site, likely at the very end of your site.
To add a custom code to the Instant Site body section:
-
In your eCom admin, scroll down to the Advanced website settings section and click Add Code under Custom JavaScript code.
- In the field, enter your code (4000 characters max).
- Save the changes.
Refresh the Instant Site page in your browser to see the changes.
Adding custom code sections to individual site pages
You can add a dedicated site section with custom code (HTML, CSS, or JavaScript) to any Instant Site page. 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.
To add a site section with custom code:
- In your eCom admin, from the Page: Homepage dropdown in the left upper corner (if you've added multiple pages to your site), choose the page where you want to add your code.
- Click Add Section, then scroll down to Advanced Solutions.
-
In the Embed & Custom Code block, click Add Custom Code Section.
- Paste your code into the field.
- Click Back and drag and drop the section in the sections list to change its positioning on the site page.
- Once you are done editing your website, click the Publish button in the top right corner of the editor.
After publishing, your custom code is added to the Instant Site section on a page. Refresh the page in your browser to see the changes.