Custom scripts allow publishers to integrate analytics tools, widgets, tracking systems, and third-party services into their website through Page Builder.
To maintain website performance, SEO, and stability, scripts should be added carefully and only where required.
Where to Add Custom Scripts
Scripts can be added in the following locations within Page Builder:
All Pages (Global Settings) - Scripts added here are applied site-wide.
Supported locations:
-
<head>section -
<body>section
Page or Layout Level
Scripts can also be added to:
- Specific pages
- Templates
- Layouts
This helps load scripts only where required.
Choosing Between <head> and <body>
Add Scripts in <head> When:
The script is required before page rendering.
Examples:
- Google Tag Manager base scripts
- Critical CSS loaders
- Font loaders
Note: Keep head scripts minimal to avoid blocking page rendering.
Add Scripts Before </body> When: The script is non-critical and can load after the page content.
Examples:
- Chat widgets
- Third-party embeds
- Support integrations
This approach improves performance and user experience.
Best Practices for Safe Implementation
1. Use Trusted Sources Only
Add scripts only from verified providers
Untrusted scripts may introduce security or performance concerns
2. Test Before Publishing
Always validate changes in:
- Staging environment
- Preview mode
Check for:
- Console errors
- Layout/UI changes
- Performance impact
3. Prevent Duplicate Script Loading
Ensure the same script is not added in multiple locations.
Duplicate scripts may cause:
- Incorrect tracking
- Unexpected behavior
- Performance degradation
4. Consider SEO and Performance
- Avoid scripts that delay page rendering
- Monitor impact on Core Web Vitals and page speed
5. Load Scripts Conditionally
Where possible:
- Load scripts only on required pages
- Avoid unnecessary site-wide loading
When Not to Use Custom Scripts
Avoid adding scripts through Page Builder if:
- The script modifies core application behavior
- The implementation requires backend or application-level changes
Checklist Before Adding a Script
Before publishing, confirm the following:
- Is the script necessary?
- Is it from a trusted source?
- Can it load after page render?
- Has it been tested in staging or preview?
- Is it added only once?
- Does it affect performance or SEO?
Steps to Insert Custom Code
- Navigate to Page Builder
- Go to General Settings
- Select Insert Custom Code
- Locate the fields for:
* Head Scripts
* Body Scripts - Paste the script in the appropriate section:
* Use Head Scripts for critical scripts
* Use Body Scripts for non-critical scripts - Save and publish the changes
Following these practices helps ensure custom scripts are implemented safely without affecting website stability, performance, or user experience.