#Nr. 26 - Inhalte mit benutzerdefinierten Modals verwalten

#26 - Gate Content With Custom Modals v0.1

Verwenden Sie benutzerdefinierte Modals, um Ihre Besucher dazu zu bewegen, ein kostenpflichtiges Konto zu eröffnen!

View demo project Learn about Memberstack


<!-- 💙 MEMBERSCRIPT #26 v0.1 💙 GATE CONTENT WITH MODALS -->
<script>
$memberstackDom.getCurrentMember().then(({ data }) => {
  if (!data) {
    // Member is not logged in
    const triggers = document.querySelectorAll('[ms-code-gate-modal-trigger]');
    const boxes = document.querySelectorAll('[ms-code-gate-modal-box]');
    
    triggers.forEach(trigger => {
      trigger.addEventListener('click', () => {
        const targetId = trigger.getAttribute('ms-code-gate-modal-trigger');
        const box = document.querySelector(`[ms-code-gate-modal-box="${targetId}"]`);
        if (box) {
          box.style.display = 'flex';
        }
      });
      // Remove links and attributes from trigger
      // Uncomment the lines below to enable this functionality
      // trigger.removeAttribute('href');
      // trigger.removeAttribute('target');
      // trigger.removeAttribute('rel');
      // trigger.removeAttribute('onclick');
    });
  }
});
</script>

Erstellen des Make.com-Szenarios

1. Laden Sie den JSON-Blaupause unten, um angegeben zu bekommen.

Datei herunterladen

2. Navigieren Sie zu Make.com und erstellen Sie ein neues Szenario...

3. Klicken Sie auf das kleine Kästchen mit den 3 Punkten und dann auf Blaupause importieren...

4. Laden Sie Ihre Datei hoch und voila! Sie sind bereit, Ihre eigenen Konten zu verknüpfen.

Brauchen Sie Hilfe mit diesem MemberScript?

Alle Memberstack-Kunden können im 2.0 Slack um Unterstützung bitten. Bitte beachten Sie, dass dies keine offiziellen Funktionen sind und der Support nicht garantiert werden kann.

Treten Sie dem 2.0 Slack bei

Anmerkungen zur Version

Attribute

Beschreibung

Attribut

Keine Artikel gefunden.

Leitfäden / Tutorials

Erstellen von Paywalls mit Webflow

Tutorial

How to Gate Content with Custom Modals in Webflow: A Step-by-Step Guide

Hello there! Are you looking to enhance your website's user experience by gating content with custom modals? You're in the right place! This tutorial will guide you through the process, as demonstrated in the video "How To Gate Content With Custom Modals In Webflow".

What is Gating Content with Modals?

Gating content with modals is a popular feature on many websites. It allows you to show users that certain features exist, but they need to sign up or log in to access them. This is a great way to encourage visitors to upgrade their plan or sign in.

Step-by-Step Guide

Step 1: Understand the Elements

In Webflow, you'll be working with two main elements: a button and a custom modal. The button allows users to interact with your content, and the custom modal pops up when a non-logged-in visitor clicks on a members-only item.

Step 2: Apply Attributes

Apply an attribute to the button: ms-code-gate-modal-trigger. The value for this attribute is a placeholder (for example, "X"). This attribute is crucial for triggering the modal.

Next, apply an attribute to the outer layer of the custom modal: ms-code-gate-modal-box. The value for this attribute should match the value you used for the button attribute (in this case, "X"). This attribute is essential for linking the button to the correct modal.

Step 3: Customize Your Modal

You can customize the content of your modal to suit your needs. For example, you can include links to a sign-up page or any other relevant information.

Step 4: Hide Your Modal

Before you publish your website, make sure to hide your modal. Also, note that the script sets the modal to flex, which is a common practice for centering everything inside the modal.

Step 5: Implement Memberscript 26

Paste in Memberscript 26 into your Webflow project. You don't need to change anything here unless you're using a different display property (like block instead of flex).

Step 6: Adjust for Links

If your button links to another page, you'll need to adjust the script to prevent the link from interfering with the modal. You can do this by uncommenting certain lines in the script.

Step 7: Remove Unwanted Attributes

If you have custom attributes that you want to remove, you can do so by copying and pasting a specific line of code from the script.

And that's it! You've successfully gated content with custom modals in Webflow.

Schlussfolgerung

Gating content with custom modals is a powerful way to enhance your website's user experience. With just one script and two attributes, you can create a more engaging and personalized experience for your visitors. If you encounter any issues, don't hesitate to reach out for help. Happy coding!

For more detailed instructions, you can watch the full video tutorial here.

Schaltfläche Text

#26 - Gate Content With Custom Modals v0.1

Erstellen des Make.com-Szenarios

Brauchen Sie Hilfe mit diesem MemberScript?

How to Gate Content with Custom Modals in Webflow: A Step-by-Step Guide

What is Gating Content with Modals?

Step-by-Step Guide

Step 1: Understand the Elements

Step 2: Apply Attributes

Step 3: Customize Your Modal

Step 4: Hide Your Modal

Step 5: Implement Memberscript 26

Step 6: Adjust for Links

Step 7: Remove Unwanted Attributes

Schlussfolgerung

Autorisierung und Zahlungen für Webflow-Websites

Memberstack kostenlos testen

Produkt

Sprache

Learn about Memberstack

Unternehmen

Ressourcen