How to Add Custom CSS and JavaScript to Your Zibster Website
Overview
The Zibster Website Builder includes design settings that let you customize your website without writing code. For more advanced customization, you can also add custom CSS, JavaScript, tracking tools, and third-party integrations through the CSS/JS settings.
This guide explains how to find the CSS/JS settings, choose between the HEAD and BODY sections, save your code, and test your website after making changes. Custom code added through these settings applies globally across your Zibster website.
Important Information About Custom Code
Custom CSS and JavaScript can affect your website's appearance, performance, accessibility, security, and functionality. Incorrect, outdated, or incompatible code may prevent parts of your website from displaying or working correctly.
Before adding custom code:
- Keep a separate backup copy of your code.
- Confirm that the code comes from a trusted source.
- Follow the installation instructions provided by the developer or third-party service.
- Add one code change at a time when possible.
- Test your website on desktop and mobile devices after saving.
- Remove the most recently added code if your website stops displaying or working correctly.
Zibster Support can show you where to add or remove code and answer questions about the CSS/JS feature. Zibster Support cannot write, review, modify, repair, or troubleshoot custom CSS, JavaScript, or third-party code.
For assistance with the code itself, contact a qualified web developer or the company that provided the code.
STEP ONE
Log in to your Zibster account and click WEBSITE in the left-side menu.
This opens the Zibster Website Builder, where you can manage your website pages, content, and design settings.
STEP TWO
Click DESIGN at the top of the Website Builder.
The Design section displays a preview of your website and provides access to the global design settings used throughout your site.
STEP THREE
Click EDIT DESIGN SETTINGS above the website preview.
Your website's global design settings will open in the right-side panel.
STEP FOUR
Click CSS/JS in the right-side settings panel.
The CSS/JS section includes separate areas for adding code to the HEAD and BODY of your website. The correct location depends on the type of code you are adding and the installation instructions provided by the developer or third-party service.
FINAL STEP
Paste your custom code into the location specified by the code provider.
Use the HEAD section when the installation instructions tell you to place the code in the website header, head section, or between the opening and closing head tags. Custom styles, verification tags, tracking tools, fonts, and some third-party scripts may use this section.
Use the BODY section when the instructions tell you to place the code in the website body or near the opening or closing body tag. Some widgets, integrations, tracking scripts, and interactive tools may require this section.
Do not move code between the HEAD and BODY sections unless the provider confirms that either location is supported. Placing code in the wrong section may prevent it from loading correctly or interfere with your website.
Click Save Changes after entering your code. Saving automatically applies the update to your website. There is no separate Publish button.
Open your website in a new browser tab and review the affected pages. Test your website on both desktop and mobile devices to confirm that the code works as expected and has not affected other areas of your site.
Understanding the HEAD and BODY Sections
The HEAD and BODY sections refer to different areas of your website's underlying page structure.
HEAD
The HEAD section loads information and resources that generally do not appear as visible page content. This may include:
- Custom CSS or styles
- Website verification tags
- Analytics or tracking code
- Web fonts
- Scripts that need to load early
BODY
The BODY section contains the visible and interactive portion of a webpage. Code added here may:
- Display a widget
- Add interactive functionality
- Load a third-party integration
- Run a script alongside page content
Always use the location specified in the installation instructions supplied with your code. Zibster does not determine whether third-party code should be placed in the HEAD or BODY section.
Helpful Notes
Custom code added through the CSS/JS settings applies globally across your Zibster website. This means the code can potentially affect every page, even when it is intended to change only one feature or page element.
When possible, add one code change at a time. Click Save Changes, test your website, and confirm that everything works correctly before adding additional code. This makes it easier to identify which code caused a problem if an issue occurs.
Keep a backup copy of any existing code before editing or removing it. This allows you to restore the previous version if necessary.
Some third-party services require additional configuration on their own platform before their code will work. Review the provider's complete installation instructions before adding the code to Zibster.
Privacy and Third-Party Tracking
Third-party scripts may collect information about visitors to your website. This may include analytics, advertising, chat, scheduling, social media, or other tracking services.
Before adding third-party code:
- Review the provider's privacy and data collection practices.
- Determine whether your website's privacy policy needs to be updated.
- Confirm whether visitor consent is required for the service you are using.
- Remove third-party scripts and services that you no longer use.
You are responsible for confirming that the code and services added to your website meet the privacy and data protection requirements that apply to your business and website visitors.
Troubleshooting Custom Code
My website does not display or work correctly after adding code
Return to WEBSITE, click DESIGN, and click EDIT DESIGN SETTINGS. Click CSS/JS, remove the most recently added code, and click Save Changes.
Refresh your website and check whether the issue has been resolved.
If the problem was caused by the custom code, contact the developer or third-party provider that supplied it for additional assistance.
My custom code is not working
Confirm that you placed the code in the HEAD or BODY section specified by the provider.
Review the provider's installation instructions and make sure you completed any required setup outside your Zibster account.
You can also open your website in a private or incognito browser window to check the current version of the site without previously cached website files.
The code works on one page but not another
Code added through the CSS/JS settings is available globally, but a script may only activate when a particular page element, block, widget, or integration is present.
Contact the code provider to confirm which pages or website elements are required for the code to function.
Can Zibster Support fix my custom code?
Zibster Support can help you locate the CSS/JS settings and show you how to add or remove code from your account.
Zibster Support cannot write, review, modify, repair, or troubleshoot custom CSS, JavaScript, or third-party code.
Contact the developer or service provider that supplied the code for assistance with its installation or functionality.
Need Help?
Zibster Support Hours: Monday–Friday, 9am–6pm EST
Phone: 844.353.3412
Channels: Phone, Live Chat, Support Ticket
