#11 - Automatically Open Login Modal v0.2

Show all logged-out visitors a login modal immediately on page visit. Both custom and default Memberstack work.

View demo project
Voir la démo

<!-- 💙 MEMBERSCRIPT #11 v0.1 💙 SHOW LOGIN MODAL IF MEMBER IS NOT LOGGED IN -->

<!-- KEEP THIS FOR DEFAULT MEMBERSTACK MODAL -->
<script>
function handleRedirect(redirect) {
  if (redirect && (window.location.pathname !== redirect)) return window.location.href = redirect;
  window.location.reload()
}

$memberstackDom.getCurrentMember().then(async ({
  data
}) => {
  if (!data) {
    const {
      data
    } = await $memberstackDom.openModal("login");
    handleRedirect(data.redirect)
  }
})
</script>

<!-- KEEP THIS FOR YOUR OWN CUSTOM MODAL -->
<script>
$memberstackDom.getCurrentMember().then(({ data }) => {
  if (!data) {
    const loginModal = document.querySelector('[ms-code-modal="login"]');
    if (loginModal) {
      loginModal.style.display = "flex";
    }
  }
});
</script>

Création du scénario Make.com

1. Téléchargez le modèle JSON ci-dessous pour commencer.

2. Naviguez jusqu'à Make.com et créez un nouveau scénario...

3. Cliquez sur la petite boîte avec trois points, puis sur Import Blueprint...

4. Téléchargez votre fichier et voilà ! Vous êtes prêt à relier vos propres comptes.

Besoin d'aide avec ce MemberScript ?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

Join the 2.0 Slack
Version notes

v0.2 - Fixed redirect handling

Slight issue with the default modal code which has now been updated.

Attributs
Description
Attribut
Aucun élément n'a été trouvé.
Guide

How to Prompt Visitors to Log In

Memberscripts needed

#11 - Automatically Open Login Modal - How to prompt visitors to log in

Tutorial

https://www.loom.com/share/4c5ddc17d36f4f7b9b6f7986f1b341a1?sid=4bd469f8-b01d-4754-8742-aba1c38b3964

Attributes used

ms-code-modal=”login”

Cloneable

https://webflow.com/made-in-webflow/website/automatic-login-modal

Why/When would need to Prompt Visitors to Log In?

  1. Lead users further down the conversion funnel and increase your conversion rate.
  2. When creating an account, you can uniquely identify users on your website and target them with special offers based on the data you have on them.
  3. Accounts allow users to see and control the data they share with you, thus fostering transparency and building trust.
  4. Accounts allow users to get a better support experience – e.g. being greeted with their name, already having access to their activity/purchase history, etc.

Getting your website visitors to create an account and log in is a great way to lead them further down the conversion funnel and increase your conversion rate.

They might not be immediately inclined to do this but you can nudge them a little by, for example, displaying a login modal. Within that modal, you can talk about the benefits of creating an account and offer them a quicker way to do so through their existing Google, Microsoft, or Facebook accounts, for example.

How to add a login modal to your Webflow site

To add a login modal to your site, you can use MemberScript #11 – Automatically Open Login Modal. Open the link and you can see a tutorial video on how to set it up.

Creating the modal

You can either build a custom modal yourself and add all the fields and buttons you need, or you can just use our demo.

If you choose to use a custom modal, just go ahead and build the login form however you like and use the attribute ms-code-modal=”login” for the main parent of the element that holds your login form.

Making it work

Now that you’ve got your modal built, you need to add the custom code from MemberScript #11 to your page, before the closing body tag.

If you’ve watched the tutorial video, you’ll know that once you copy the code to your site, you’ll need to choose between the default MemberStack modal or your own custom one.

To do that, you just need to move around some comment tags in the code and it only takes a few seconds.

And that’s all there is to it, you’re good to go. You can edit the modal however you want and offer all the login methods you think would be beneficial to your users.

Conclusion

As mentioned earlier, asking users to log in can be beneficial for both your users and yourself and using MemberScript #11 is a super easy way to implement a login modal on your Webflow site.

If you need a bit of help to get you started or just don’t want to create a custom modal, you can get our free cloneable and add it to your Webflow site in minutes.

Take me to the Scripts

#11 - Automatically Open Login Modal - How to prompt visitors to log in

Tutorial