Skip to main content

Amplify Engage Homepage Popup

A tree canopy with a red button overlay that says, "Join our mailing list."

There is a built-in delay to make sure that it functions on the homepage.
You will need to:

  1. Create a new content page with the embedded engage HTML (code is on DreamStream)
  2. Add the Sitewide Script into Preferences>Advanced. 
    Be sure to update the colors to match your site currenty red and white
Add this to Site-wide custom HTML before </body> 

//amplify engage popup for homepage
<script>
  setTimeout(() => {
    if (window.location.pathname !== "/" || document.getElementById("amplify-sticky-signup")) return;

    const sticky = document.createElement("a");
    sticky.id = "amplify-sticky-signup";
    sticky.href = "https://www.eldoradocountyfire.com/join-our-mailing-list";
    sticky.textContent = "Join our mailing list";
    sticky.setAttribute("aria-label", "Join our mailing list");
    sticky.setAttribute("role", "button");

    Object.assign(sticky.style, {
      position: "fixed",
      bottom: "20px",
      right: "20px",
      backgroundColor: "#BA261A",
      color: "#ffffff",
      padding: "12px 20px",
      borderRadius: "6px",
      fontWeight: "bold",
      fontSize: "14px",
      fontFamily: "inherit",
      textAlign: "center",
      whiteSpace: "nowrap",
      textDecoration: "none",
      boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
      cursor: "pointer",
      zIndex: "2147483647"
    });

    sticky.addEventListener("mouseenter", () => {
      sticky.style.backgroundColor = "#b30000";
    });
    sticky.addEventListener("mouseleave", () => {
      sticky.style.backgroundColor = "#BA261A";
    });

    document.body.appendChild(sticky);
    console.log("✅ Sticky button added on homepage only.");
  }, 7000);
</script>