Sitebuilder handles many aspects of website development automatically, including generating the necessary HTML, CSS, and JavaScript code. However, by utilizing custom code sections, you can integrate additional features, tracking tools, third-party services, or customizations that may not be directly supported by the Sitebuilder's default features.
The ability to add custom code in specific sections of a website, such as inside <head> tag, after <body> tag, or before </body> tag, provides you with more flexibility and control over your website's functionality and appearance.
Most third-party tools will let you know which tag to add their code to. If they don't specify that, you'd want to try the <head> tag first.
With Sitebuilder, you have four places where you can add custom code to your site:
- In the Website settings for the whole website
- In the Page settings for a single page
- In the Custom block using the HTML widget
- Via HTML Embed block.
Adding site-wide custom code
Site-wide custom code refers to custom HTML, CSS, or JavaScript code that is applied to your entire website rather than specific pages or sections. It allows you to add functionality or design elements across all pages of your site.
To add site-wide custom code to your site, follow these steps:
- When in Sitebuilder, click the Main menu button in the top left corner and then click Settings on the Sidebar.
- In the Website settings menu find the Custom code tab.
- Copy the HTML code, and paste it (or write it right in the field) into an appropriate field:
- Inside <head> tag: Code added in this field is injected into the <head> tag on every page of your site.
- After <body> tag: Code added in this field is injected after the opening <body> tag on every page of your site
- Before </body> tag: Code added in this field is injected before the closing </body> tag on every page of your site.
- Click Submit to save the changes.
The results will not be visible at this stage, you need to Publish for your code to be executed. If you want to check how the code works before publishing, use the Preview button on the Topbar.
Adding per-page custom code
- On the Topbar, click Pages to open the Page manager.
- In the Page manager, choose the page you want to add custom code to and click its Settings icon.
- In the Page Settings menu, click the Custom code tab and insert the HTML code valid for this page only into the relevant field.
- Click Submit and Publish. Your custom code will be added to your page.
Note: If you want to add content using custom code to a specific location on your website page, you can use an Html embed block or an HTML widget in the Custom block.