Hostinger's Website Builder does not play as well with Outseta as for instance Webflow or Framer.

However, this guide provides a solution that allows Outseta to function properly on Hostinger-hosted websites.

⚠️ Notice: Hostinger may update their Website Builder at any time, potentially breaking this solution. If popups stop working after a Hostinger update, check back here for an updated fix or contact Outseta support.

The Problem

When you add Outseta to a Hostinger website, clicking on pop-up links (sign up, login, profile) may not trigger Outseta's modals or embeds. Instead, Hostinger's navigation system intercepts these clicks, breaking the authentication flow.

The Solution

You'll need to add a custom script in addition to the regular Outseta script. It will intercept clicks before Hostinger can hijack them.

Implementation Steps

Step 1: Access Hostinger's Custom Code

Navigate to Integration > Custom Code in your Hostinger dashboard.

Step 2: Add the Outseta Script

Copy and paste this code into the Custom Code section (replace yourdomain.outseta.com with your actual Outseta domain):

<!-- Outseta Configuration -->
<script>
  var o_options = {
    domain: "<your-domain>.outseta.com",
    load: 'auth,customForm,emailList,leadCapture,nocode,profile,support'
    monitorDom: true
  };
</script>

<!-- Outseta External Script -->
<script src="https://cdn.outseta.com/outseta.min.js" data-options="o_options"></script>

Step 3: Add the Hostinger Link Fix

Immediately after the Outseta script, add this custom fix script:

<!-- ✨ Custom Snippet by Raae at Outseta ✨ -->
<script>
  (function() {
    function attachClickHandler(target) {
      console.log("[Fix] Attaching click handler to:", target);
      target.addEventListener("click", function(event) {
        console.log("[Fix] Click intercepted on element with o-processed=1:", target);
        event.stopPropagation();
        event.preventDefault();
      });
    }

    function processExistingElements() {
      document.querySelectorAll("[o-processed]").forEach(attachClickHandler);
    }

    function initialize() {
      console.log("[Fix] Script initialized");
      processExistingElements();

      const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
          if (mutation.type === "attributes" && mutation.attributeName === "o-processed") {
            attachClickHandler(mutation.target);
          }
        });
      });

      observer.observe(document.body, {
        attributes: true,
        subtree: true,
        attributeFilter: ["o-processed"]
      });

      console.log("[Fix] MutationObserver initialized");
    }

    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", initialize);
    } else {
      initialize();
    }
  })();
</script>

How It Works

The custom fix script intercepts clicks on Outseta-processed links before Hostinger's navigation system can hijack them. It does this by:

  1. Identifying elements that Outseta has processed (marked with the o-processed attribute)
  2. Attaching click handlers that prevent Hostinger's default navigation
  3. Using a MutationObserver to automatically handle dynamically added Outseta elements

Testing Your Integration

After adding both scripts:

  1. Save your changes in Hostinger
  2. Visit your website
  3. Test the sign-up, login, and profile links
  4. Verify that Outseta's modals or embeds appear correctly

Troubleshooting

If you're still experiencing issues:

  • Open your browser's console (F12) and look for [Fix] log messages to confirm the script is running
  • Verify your Outseta domain is correct in the script
  • Ensure both scripts are in the Custom Code section and in the correct order
  • Clear your browser cache and test again

Need Help?

If you continue to experience issues after following these steps, contact Outseta support with details about your Hostinger setup and any console errors you're seeing.