[Code] Open Modals with a Link

Article author
Memberstack Team
  • Updated

To open modals with specific links on your website, you can use the following code:

<script type="module">
  async function handleModals(type, plans) {
    switch (type) {
      case "profile":
        await window.$memberstackDom.openModal("PROFILE");
        break;
      case "login":
        await window.$memberstackDom.openModal("LOGIN", {
          signup: { plans },
        });
        break;
      case "signup":
        await window.$memberstackDom.openModal("SIGNUP", {
          signup: { plans },
        });
        break;
      default:
        break;
    }
    window.$memberstackDom.hideModal();
  }

  document.addEventListener("DOMContentLoaded", (e) => {
    if (window.location.search === "") return;
    window.$memberstackDom.getCurrentMember().then(async ({ data }) => {
      const params = new URLSearchParams(window.location.search);
      if (params.get("openModal") === "true" && params.get("modalType")) {
        let plans = params.get("plans") ? params.get("plans").split(",") : "";
        await handleModals(params.get("modalType"), plans);
      }
    });
  });
</script>

Place this code in the BODY section of your site.

URL Scheme Examples:

To open a specific modal, use the following URL schemes.

Profile Modal

https://website.com?openModal=true&modalType=profile

Signup Modal

https://website.com?openModal=true&modalType=signup

Signup Modal with One Free Plan

https://website.com?openModal=true&modalType=signup&plans=pln_ID

Signup Modal with Multiple Free Plans

https://website.com?openModal=true&modalType=login&plans=pln_1,pln_2,plan_3

Login Modal

https://website.com?openModal=true&modalType=login

Notes:

modalType: Must be set to either signup, login, or profile.

plans: (Optional) A single plan ID or a list of comma-separated plan IDs with no spaces. Only use free plans.

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.