``` ## 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: ```html theme={null}

``` 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: ```css theme={null} /* 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); } ``` ```javascript theme={null} // 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: ```javascript theme={null} // 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: ```javascript theme={null} // 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. # Exit-intent popups Source: https://help.hoopai.com/funnels/exit-intent-popups Create popups that trigger when visitors attempt to leave your funnel or website page in HoopAI. Exit-intent popups detect when a visitor is about to leave your page and display a targeted message — a discount offer, email capture form, survey, or last-chance reminder — before they navigate away. They are one of the highest-converting lead recovery tools available in the funnel builder. ## How exit-intent detection works On **desktop**, exit-intent is triggered when the visitor's mouse cursor moves toward the browser's close button or address bar. The platform tracks cursor trajectory and fires the popup before the visitor actually leaves. On **mobile**, true cursor tracking is not available. Instead, the popup triggers on scroll-up behavior (indicating the visitor is reaching for the back button) or after a configurable time delay. Exit-intent popups fire once per visitor session by default. A returning visitor who has already dismissed the popup will not see it again unless you change the frequency settings. ## Creating an exit-intent popup Navigate to **Sites > Funnels** (or **Sites > Websites**), open your funnel or website, and click **Edit Page** on the target step. In the left panel, click **Add Elements** and scroll to the **Popup** section. Drag a **Popup** element onto the canvas. Click the popup element to open its settings. Under **Trigger**, select **Exit Intent**. This tells the popup to appear only when the visitor attempts to leave. Add your headline, body text, image or video, and a call-to-action button or form inside the popup. Keep the message focused on a single action — one offer, one form, one decision. Set the following options: * **Show frequency** — once per session, once per day, or every visit * **Delay before eligible** — minimum seconds on page before the popup can fire (prevents triggering on accidental mouse movements) * **Mobile fallback** — choose a time-delay trigger for mobile visitors Click **Save**, then **Publish** to make the popup live. ## Popup design best practices | Element | Recommendation | | ---------------- | --------------------------------------------------------------------- | | **Headline** | Lead with the benefit — "Wait! Get 15% off before you go" | | **Body** | One to two sentences maximum | | **CTA button** | Action-oriented text like "Claim my discount" instead of "Submit" | | **Image** | A product image or relevant visual that reinforces the offer | | **Close option** | Always include a visible close button — hiding it frustrates visitors | ## A/B testing exit-intent popups Create two versions of the popup with different headlines, offers, or designs to determine which converts better: 1. Duplicate the popup element in the builder. 2. Assign each version to a traffic split using the funnel's A/B testing settings. 3. Monitor conversion rates in **Sites > Funnels > Analytics** to identify the winner. Test one variable at a time — headline, offer amount, or design — to isolate what drives the conversion difference. Changing everything at once makes results impossible to interpret. ## Common use cases Display a limited-time coupon code when a visitor tries to leave an order form page. Include a countdown timer to create urgency. Offer a free resource (checklist, guide, template) in exchange for an email address before the visitor leaves. Ask leaving visitors why they did not convert — "What stopped you from signing up today?" with multiple-choice options. Use the responses to improve your page. If the current page offer is not resonating, redirect leaving visitors to a lower-priced alternative or a free trial page. Avoid showing exit-intent popups on thank-you or confirmation pages. A visitor who has already converted does not need another popup — it creates a poor post-purchase experience. # Funnel analytics Source: https://help.hoopai.com/funnels/funnel-analytics Track page views, opt-ins, conversions, revenue, and step-by-step performance with funnel analytics in HoopAI.

``` Use the funnel's **Head Tracking Code** field for the pixel base code (which should load on every page) and the **Body Tracking Code** or page-level tracking code for specific conversion events that should fire only on certain steps. Always verify that pixels are firing correctly before launching a paid campaign. Use the Facebook Pixel Helper browser extension or Google Tag Assistant to confirm that the base code and events are triggering as expected on each funnel step. # Upsells and downsells Source: https://help.hoopai.com/funnels/upsells-downsells Add one-click upsell and downsell pages to your funnels to increase average order value in HoopAI. Upsells and downsells are post-purchase funnel steps that give buyers the opportunity to add more value to their order — or accept a lower-priced alternative — with a single click. Because payment details have already been entered, there is no need for buyers to re-enter their card information, which dramatically increases conversion rates. ## How one-click upsells work After a buyer completes a purchase on an order form step, HoopAI automatically routes them to the next step in the funnel. If that next step is an upsell page, the buyer can accept the additional offer by clicking a single button. The charge is applied immediately to the same payment method used for the original purchase. No second form. No re-entering card details. One click. ## Upsell page structure A typical upsell page contains: * **Headline** — leads with the benefit of the additional offer * **Video or image** — demonstrates the product or explains the value * **Body copy** — overcomes hesitation and reinforces the decision * **Yes button** — accepts the upsell and processes the charge * **No button** — declines the upsell and moves to the next step (often a downsell) ## Adding an upsell step In the funnel's Steps tab, click **Add New Step or Import**. Name the step (for example, "Upsell 1") and give it a path such as `/upsell-1`. Open the step in the builder. Add your headline, copy, video, and button elements. The page should feel like a continuation of the purchase experience, not a separate offer. Use a standard **Button** element for the "Yes" button. In the button's link settings, set it to **Submit Form** or use a direct URL to the next step. For one-click processing, the button must be linked to the upsell product assignment in the step settings. Click the **gear icon** on the step card and assign the product that represents the upsell offer. This is what gets charged when the buyer accepts. The "No" button should link to the next step after the upsell — typically a downsell page or the thank-you page. Use a plain URL link, not a form submit, so no charge is triggered when the visitor clicks No. ## Adding a downsell step A downsell is shown to visitors who decline an upsell. It presents a lower-priced or stripped-down version of the upsell offer to recapture buyers who said no. The setup is identical to an upsell step: 1. Add a new step after the upsell step and name it (for example, "Downsell 1"). 2. Design the page with a more modest offer and adjusted price point. 3. Assign the downsell product to the step. 4. Link the Yes button to trigger the charge and route to the thank-you page. 5. Link the No button to route directly to the thank-you page. ## Upsell vs order bump | Feature | Order bump | Upsell page | | ---------------- | ------------------------------------- | ---------------------------------------- | | Where it appears | On the order form, before checkout | On a separate page, after checkout | | How to accept | Check a checkbox | Click a Yes button | | Payment method | Charged at checkout with main product | One-click charge to saved payment method | | Best for | Small add-ons, complements | Bigger, related offers | ## Best practices * Keep upsell pages short and focused. A visitor who just purchased is in a buying mindset — do not overwhelm them with information. * The upsell should be a natural next step from what they just bought. If they bought a course, upsell a live coaching session. * Price the upsell at roughly two to three times the original purchase price for best results. * Always offer a clear, visible No button. Hiding the decline option frustrates buyers and increases chargebacks. * Test different upsell offers, prices, and page designs using A/B testing to find what converts best. A two-upsell sequence (upsell 1 → downsell → upsell 2) can significantly increase revenue per visitor without adding friction to the initial purchase flow. Keep each offer distinct and complementary. One-click upsells require the buyer to have completed a purchase on the order form step immediately before the upsell. If a visitor navigates directly to the upsell URL without having purchased, the one-click charge mechanism will not have a saved payment method to process. # Sites analytics dashboard Source: https://help.hoopai.com/sites/analytics-dashboard Track page views, opt-in rates, bounce rates, and conversions across funnels, websites, blogs, forms, surveys, QR codes, and webinars.