Skip to main content
HoopAI’s builder lets you inject custom HTML, CSS, and JavaScript directly into any page. This gives you fine-grained control over design and behavior beyond what the visual editor supports — from custom animations and styling to third-party embeds and dynamic content.

​
Where to add custom code

There are two levels at which you can add custom code:

​
Page-level custom code

Custom code added at the page level applies only to that specific page. This is appropriate for page-specific scripts, embed codes, or CSS overrides. To access page-level custom code:
  1. Open the page in the builder.
  2. Click the Page Settings icon in the top toolbar.
  3. Select Custom CSS for styles, or use the Tracking Code panel to add HTML/JavaScript to the <head> or <body> sections.

​
Funnel-level custom code

Custom code added in the funnel’s Settings tab under Head / Body Tracking Code applies to every step in the funnel. Use this for scripts that should run sitewide — analytics libraries, chat widgets, and global style overrides.

​
Element-level custom code

The builder includes a Code element (found in the Embed category of the elements panel) that lets you embed custom HTML and JavaScript directly on the canvas. This is useful for embedding third-party widgets, iframes, or dynamic content blocks within a specific section of a page.

​
Adding custom CSS

1

Open page settings

In the builder, click the Page Settings icon and select Custom CSS.
2

Write your CSS rules

Enter valid CSS in the editor. Rules added here apply only to this page and are scoped by the builder’s class structure.
3

Save

Click Save. The styles are applied immediately in the builder preview.

​
Common CSS use cases

/* Hide an element by its class */
.my-element-class {
  display: none;
}

/* Change the font size of all paragraph text */
p {
  font-size: 18px;
  line-height: 1.7;
}

/* Style a button with custom hover color */
.cta-button:hover {
  background-color: #e84040;
  transition: background-color 0.2s ease;
}

/* Center a section's content on mobile */
@media (max-width: 768px) {
  .hero-text {
    text-align: center;
  }
}

​
Adding custom JavaScript

Use the Tracking Code panel (in Page Settings) to add JavaScript:
  • Head code: Paste scripts that need to load before the page content. Analytics libraries and tag managers typically go here.
  • Body code: Paste scripts that should load after the page content. Event listeners, third-party widgets, and deferred scripts go here.

​
Common JavaScript use cases

// Fire an event when a button is clicked
document.querySelector('#my-button').addEventListener('click', function() {
  console.log('Button clicked');
});

// Redirect after a delay (e.g., on a thank-you page)
setTimeout(function() {
  window.location.href = 'https://yourdomain.com/next-step';
}, 5000);

// Show a hidden div after page load
document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('#hidden-offer').style.display = 'block';
});

​
Embedding third-party content

Use the Code element on the canvas to embed iframes and third-party widgets: 
<!-- Embed a YouTube video -->
<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  frameborder="0" allowfullscreen>
</iframe>

<!-- Embed a Calendly booking widget -->
<div class="calendly-inline-widget"
  data-url="https://calendly.com/yourname"
  style="min-width:320px;height:630px;">
</div>
<script type="text/javascript"
  src="https://assets.calendly.com/assets/external/widget.js">
</script>

​
Performance considerations

The funnel’s Settings tab includes two performance options that affect how custom code loads:
  • Optimize JavaScript — lazy-loads custom HTML and JavaScript elements. This can improve page load speed, but may delay scripts from firing until the user interacts with the page. Disable this if your scripts need to run immediately on page load.
  • GDPR compliant fonts — uses self-hosted fonts instead of loading them from Google Fonts, which can resolve GDPR compliance concerns related to IP address logging.
Malformed HTML or JavaScript can break the page layout or prevent the builder from functioning correctly. Always test pages with custom code in a preview window before publishing. Keep a copy of any working code before making changes.

​
Video backgrounds

Add a video background to any section using custom code: 
<style>
.video-bg-section {
  position: relative;
  overflow: hidden;
}
.video-bg-section video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
</style>

<video autoplay muted loop playsinline>
  <source src="YOUR_VIDEO_URL.mp4" type="video/mp4">
</video>
Apply the video-bg-section class to the section containing the video element. The video plays silently on loop behind the section content.

​
Dynamic animations and visual effects

Add scroll-triggered animations using custom CSS and JavaScript: 
/* Fade-in animation on scroll */
.animate-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

// Trigger animation when element scrolls into view
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.animate-fade-in').forEach(el => {
  observer.observe(el);
});
Add the animate-fade-in class to any element in the builder to apply the scroll animation.

​
Hide/show elements on button click

Toggle element visibility with a button click using custom JavaScript: 
// Toggle visibility of a target element
document.querySelector('#toggle-button').addEventListener('click', function() {
  const target = document.querySelector('#hidden-content');
  if (target.style.display === 'none') {
    target.style.display = 'block';
    this.textContent = 'Hide Details';
  } else {
    target.style.display = 'none';
    this.textContent = 'Show Details';
  }
});
Set the target element’s initial CSS to display: none in the Custom CSS panel, and assign the matching IDs (#toggle-button and #hidden-content) to your elements in the builder.

​
Custom JavaScript validation

Add custom form validation beyond what the builder provides: 
// Validate phone number format before form submission
document.querySelector('form').addEventListener('submit', function(e) {
  const phone = document.querySelector('input[name="phone"]').value;
  const phoneRegex = /^\+?[\d\s\-\(\)]{10,15}$/;

  if (!phoneRegex.test(phone)) {
    e.preventDefault();
    alert('Please enter a valid phone number.');
    return false;
  }
});
Custom validation scripts run in addition to the builder’s built-in required field checks. Place validation scripts in the Body tracking code section so they load after the form elements.
Use browser developer tools (F12) to debug custom code on the live preview page. The console shows JavaScript errors and the Elements panel lets you inspect the page structure and applied styles.
Last modified on March 6, 2026