Adding 3rd-Party Code
June 19, 2024
Adding Third-Party Code to Your Website
Adding third-party code to your website can enhance its functionality with features such as tracking, chat, and other customizations. This guide will walk you through the steps to safely and effectively add this code to your site without requiring any coding knowledge.
Steps to Add Third-Party Code
- Before making any changes, it is a good idea to use the
Site Backup Feature to create a backup of your current site. This ensures you can easily revert to the original version if something goes wrong.
- Adding code to the Header HTML Header HTML (<head>) or Body End HTML (</body>)
- In the left panel of your website editor, click on Settings.
- Select Head HTML from the options.
- There are two main sections where you can add the code:
- Body End HTML: This section is for adding custom HTML or JavaScript just before the closing </body> tag of each page on your site.
- NOTE: Unless specifically instructed otherwise, all third-party code should be added to the Body End HTML section. This practice is recommended because:
- Improves Page Load Speed: The main content of the page loads first, enhancing the user experience.
- Reduces Rendering Delays: Ensures the page's content is visible sooner.
- Better Browser Performance: Avoids issues like flickering or layout shifts during the page load.
- Fewer Script Conflicts: Minimizes conflicts with other scripts or styles.
- NOTE: Don't be concerned if the code doesn't appear to work immediately after you add it. Often, the code will function only after you republish.
- Head HTML: This section is for adding content to the head section of your site.
- It's uncommon to add code to this section. Always add it to Body End first. If the code still doesn't work after republishing, then add it to Head HTML.
- Once you've added the code, click
Save.
- Adding Comment Tags
- When adding third-party code, it is helpful to include comment tags to indicate where the code starts and ends. This improves readability and makes future maintenance easier.
- An HTML comment tag consists of three components:
- Opening tag: <!-- Begin Name of Code -->
- 3rd-party code
- Closing tag:
<!-- End Name of Code -->
- Here’s how to do it:
- In Head HTML or Body End HTML add empty rows between <!-- Begin Body End Markup --> and the code that immediately follows it.
- Enter <!-- Begin Name of Code --> (ex <!-- Begin Paul's Chat code -->)
- On next line enter the code
- On next line enter <!-- End Name of Code --> (ex <!-- End Paul's Chat code -->)
- NOTE: It it's necessary to add comment tags when adding code via the HTML Widget.
See this quick demo as an example:
View Walkthrough
Guidance for Adding Third-Party Code to <head>
, </body>
,
or Directly as an HTML Widget
When deciding where to add third-party code in your HTML document, it helps to understand the purpose of the code and its impact on your webpage. Here are some tips to guide you:
- Adding Code to the Head HTML or
<head>Section - When to Use:
- Essential Styles and Scripts: If the code is for styles (CSS) or scripts (JavaScript) that need to be available as soon as the page starts loading, add it to the
<head>. - Critical Setup: Use this section for any script that sets up important configurations or global variables required by the rest of your page.
- Why: Code in the <head> ensures that styles and critical scripts are loaded before the content, preventing layout shifts and ensuring scripts are ready when the content loads.
- Adding Code to the Body end HTML or
</body>Section - When to Use:
- Non-Essential Scripts: If the script enhances functionality but is not critical for the initial page load, place it at the end of the
<body>. - Performance Optimization: Scripts here will load after the main content, improving page load times and user experience
- Why: Placing scripts at the end ensures that your main content loads first, making the page usable sooner for visitors.
- NOTE: Unless specifically instructed otherwise, all third-party code should be added to the Body End HTML section.
- Using an HTML Widget Directly in the Page
- When to Use:
- Interactive Elements: When you need to place interactive elements or widgets at specific locations within your page content.
- Precise Layout Control: When the widget needs to be part of the content flow and interact directly with other page elements.
- Why: Directly embedding widgets allows them to be positioned exactly where they are needed, ensuring a seamless user experience.
- Examples
- Embedded YouTube Video
- Google Maps Embed
- Facebook Page Plugin
- Twitter Embedded Tweet
- Instagram Post Embed
- SoundCloud Audio Embed
- Spotify Playlist Embed
- Vimeo Video Embed
- Chat widget
- BBB Logo
Remember
- Hibu will not activate, set-up account, generate, or "grab" 3rd party integration code / snippets on behalf of client.
- Hibu will not debug issues with client-supplied 3rd party HTML snippets
- All 3rd party codes will not be maintained or supported by Hibu
- Clients should contact the 3rd party with any issues
In this section, you’ll learn how to control the size of elements using different types of units in Editor 2.0. We’ll break down how viewport width (vw) and height (vh) respond to the browser window, how the auto unit allows containers to resize based on their content, and how min/max values help you keep your elements within practical size limits. Together, these tools give you greater control over how your site adapts across devices—without relying on fixed pixel values.
Flexbox is the foundation for how columns behave in Editor 2.0. It controls how elements stack, align, and space themselves inside containers, giving you full control over layout across different screen sizes. By adjusting properties like stacking direction, content alignment, and wrap, you can create clean, organized designs that adapt smoothly to any device. These features help prevent layout issues, make better use of space, and simplify how you manage rows and individual elements. Learning how to use Flexbox effectively leads to faster builds and more consistent, responsive websites.
Understanding layout elements and the Layers Panel is key to building clean, responsive websites. Layout elements help you control structure—how widgets are grouped, how content stacks, and how different parts of the page respond across breakpoints. The Layers Panel gives you a clear view of that structure, making it easier to manage complex sections, find hidden elements, and keep your layout organized. Together, these tools let you build with more precision, troubleshoot faster, and maintain consistency across the entire site.
Breakpoints are specific screen widths where your website layout shifts to fit different devices, like phones, tablets, and desktops. They’re a key part of responsive design, allowing you to adjust styles so your site looks and works well on any screen. In the editor, you can see how styles behave at each breakpoint, apply universal styles, and override them when needed. You can also preview your site at different screen sizes to make sure everything looks right.