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.
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 5, 2026