Introduction
While Sitejet Builder is designed for visual editing and drag-and-drop simplicity, it also supports advanced customization through custom HTML, CSS, and JavaScript. This allows experienced users to extend the functionality, integrate third-party tools, or fine-tune design elements beyond the standard builder controls.
This guide shows you how to safely add and manage custom code in Sitejet Builder using the built-in code editing options.
Why Use Custom Code?
-
Integrate third-party tools (e.g., live chat, analytics, tracking pixels)
-
Add custom-designed elements not included in the builder
-
Apply precise CSS styles for unique design tweaks
-
Insert JavaScript for interactive behaviors or widgets
-
Embed forms, widgets, or external iframes
Where to Add Custom Code in Sitejet
There are 3 main locations where you can insert custom code in Sitejet:
1. Add Custom Code to a Specific Section or Block
Best for: Small HTML snippets, custom buttons, widgets, or embeds (like YouTube, Calendly, etc.)
Steps:
-
Drag and drop the “Custom HTML” block onto your page
-
Click inside the block to open the editor
-
Paste your HTML code (you can include inline CSS or JS here)
-
Click Save and preview the output on the page
Example:
2. Add Site-Wide Custom Code (Header/Footer Scripts)
Best for: Analytics scripts (Google Analytics, Facebook Pixel), reCAPTCHA, or any JS that should load on all pages.
Steps:
-
In the Sitejet Builder, click the Settings (gear icon)
-
Navigate to the Code Injection or Custom Code tab
-
You’ll typically see:
-
Head – for meta tags, CSS, Google Fonts
-
Body (start or end) – for JS scripts or trackers
-
-
Paste your code in the appropriate section
-
Save and publish your changes
Example for Google Analytics (Head):
3. Add Custom CSS
Best for: Overriding theme styles or adding custom design rules
Steps:
-
Go to Settings > Styles or Custom Code > CSS
-
Paste your CSS code (you can scope it to specific classes or IDs)
Example:
-
Click Save and preview the changes live.
Tips for Safe Customization
-
Use unique class names to avoid conflicts with theme elements
-
Always test scripts in preview mode before publishing
-
Avoid blocking scripts (e.g.,
alert()or infinite loops) -
Use browser DevTools to inspect elements and test styles live
Common Use Cases
| Use Case | Type | Placement |
|---|---|---|
| Google Analytics, Meta Pixel | JavaScript | Header/Body |
| Live Chat (e.g., Tawk.to, Intercom) | JavaScript | Body |
| Custom Buttons, Forms | HTML/CSS | Page Blocks |
| Custom Fonts | CSS/Link Tags | Head |
| SEO Meta Tags | HTML | Head |
| Responsive layout tweaks | CSS Media Queries |
Global CSS |
Conclusion
Sitejet’s custom code support gives developers and advanced users the flexibility to extend their website beyond the builder’s standard options. Whether you need analytics, enhanced styling, or custom interactive features, you can add them cleanly and efficiently using the tools built into Sitejet Builder.
