Disclaimer Popup

Description

• add a custom disclaimer popup
• view demo – password: abc
• my friend code this, you can send her a coffee

#1. Install Code

You can click on Website > Pages

Scroll down and click on Custom Code > Code Injection

Paste this code to Code Injection > Footer

<!-- Disclaimer Popup - [email protected] -->
<script>
window.TP_GATE_CONFIG = {
  text: {
    mainMessage: "Life certainly has elements of adversity for all of us. How our minds react to the more difficult challenges can set us on different paths. And these are true crossroads. Overcoming adversity makes you stronger.",
    acceptButton: "Accept",
    declineButton: "Decline",
    declineMessage: "Based on your selection, we cannot show you this content."
  },
  style: {
    overlayBackground: "rgba(0, 0, 0, 1)", 
    popupBackground: "#ffffff",
    popupWidth: "500px",
    popupBorderRadius: "12px",
    popupPadding: "28px 22px",
    textColor: "#000000",
    textSize: "18px",
    textLineHeight: "1.5",
    buttonGap: "12px",
    actionsMarginTop: "22px"
  }
};
</script>
<style>
#tpGate{position:fixed;inset:0;z-index:2147483647;display:none;align-items:center;justify-content:center;padding:24px;background:var(--tp-gate-overlay-bg,rgb(0 0 0))}#tpGate.is-open{display:flex}#tpGate .tpGate__popup{width:min(var(--tp-gate-width, 500px), calc(100vw - 48px));background:var(--tp-gate-popup-bg,#fff);border-radius:var(--tp-gate-border-radius,12px);padding:var(--tp-gate-padding,28px 22px);box-sizing:border-box;text-align:center}#tpGate .tpGate__text{margin:0;font-size:var(--tp-gate-text-size,18px);line-height:var(--tp-gate-text-line-height,1.5);color:var(--tp-gate-text-color,#000)}#tpGate .tpGate__actions{margin-top:var(--tp-gate-actions-margin,22px);display:flex;gap:var(--tp-gate-button-gap,12px);justify-content:center;flex-wrap:wrap}#tpGate .tpGate__actions a{text-decoration:none}
</style>

<div id="tpGate" role="dialog" aria-modal="true"><div class="tpGate__popup"><p class="tpGate__text"></p><div class="tpGate__actions"><a href="#" data-tp-accept class="btn btn--border theme-btn--primary-inverse sqs-button-element--primary"></a><a href="#" data-tp-decline  class="btn btn--border theme-btn--primary-inverse sqs-button-element--secondary"></a></div></div></div>
<script>
!function(){var t=window.TP_GATE_CONFIG||{},e=t.text||{},a=t.style||{},p=document.getElementById("tpGate");if(p){a.overlayBackground&&p.style.setProperty("--tp-gate-overlay-bg",a.overlayBackground),a.popupBackground&&p.style.setProperty("--tp-gate-popup-bg",a.popupBackground),a.popupWidth&&p.style.setProperty("--tp-gate-width",a.popupWidth),a.popupBorderRadius&&p.style.setProperty("--tp-gate-border-radius",a.popupBorderRadius),a.popupPadding&&p.style.setProperty("--tp-gate-padding",a.popupPadding),a.textColor&&p.style.setProperty("--tp-gate-text-color",a.textColor),a.textSize&&p.style.setProperty("--tp-gate-text-size",a.textSize),a.textLineHeight&&p.style.setProperty("--tp-gate-text-line-height",a.textLineHeight),a.buttonGap&&p.style.setProperty("--tp-gate-button-gap",a.buttonGap),a.actionsMarginTop&&p.style.setProperty("--tp-gate-actions-margin",a.actionsMarginTop);var o=p.querySelector(".tpGate__text"),r=p.querySelector("[data-tp-accept]"),n=p.querySelector("[data-tp-decline]");o&&e.mainMessage&&(o.textContent=e.mainMessage),r&&e.acceptButton&&(r.textContent=e.acceptButton),n&&e.declineButton&&(n.textContent=e.declineButton),p.classList.add("is-open"),p.addEventListener("click",(function(t){var a=t.target.closest("a[data-tp-accept], a[data-tp-decline]");a&&(t.preventDefault(),a.hasAttribute("data-tp-accept")?p.classList.remove("is-open"):a.hasAttribute("data-tp-decline")&&function(){var t=p.querySelector(".tpGate__popup");if(t){var a=e.declineMessage||"";t.innerHTML='<p class="tpGate__text" style="color: var(--tp-gate-text-color, #000); font-size: var(--tp-gate-text-size, 18px); line-height: var(--tp-gate-text-line-height, 1.5);">'+a+"</p>"}}())}))}}();
</script>

#2. Customize

#2.1. Update text

You can change these lines

#2.2. Update style

You can update these lines