[Code] Open Modals with a Link

Article author
Memberstack Team
  • Updated

Place the following code in the BODY section of your site:

<script type="module">
import * as queryString from "https://cdn.jsdelivr.net/npm/native-querystring@1.1.1/+esm";

async function handleModals(type, plans) {
	let memberstack = $window.memberstackDom;
	switch (type) {
	  case 'profile':
	    await memberstack.openModal('PROFILE');
    break;
	  case 'login':
	    await memberstack.openModal('LOGIN', {
	      signup: { plans },
	    });
    break;
	  case 'signup':
	    await memberstack.openModal('SIGNUP', {
	      signup: { plans },
	    });
    break;
  default:
    break;
	 }
 memberstack.hideModal();
}

window.$memberstackDom.getCurrentMember().then(async ({ data }) => {
	const params = queryString.parse(window.location.search);
	if (params['openModal'] === 'true' && params['modalType']) {
	  let plans = params['plans'] ? params.plans.split(',') : '';
	  await handleModals(params['modalType'], plans);
	 }
});
</script>

Anytime you want to open/share a link that auto-opens a specific, use the following URL scheme examples:

Profile Modal

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

Signup Modal

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

Signup Modal w/ One Plan

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

Signup Modal w/ Multiple 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.

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.