Composants
Modèles
Attributs
Intégrations
Testeur de site
Code personnalisé

Scripts des membres

Une solution basée sur les attributs pour ajouter des fonctionnalités à votre site Webflow.
Il suffit de copier un peu de code, d'ajouter quelques attributs et le tour est joué.

Nous vous remercions ! Votre demande a bien été reçue !
Oups ! Un problème s'est produit lors de l'envoi du formulaire.
Besoin d'aide avec MemberScripts ?

Tous les clients de Memberstack peuvent demander de l'aide dans le Slack 2.0. Veuillez noter qu'il ne s'agit pas de fonctionnalités officielles et que le support ne peut être garanti.

UX
Visibilité conditionnelle

#182 - Disable Animations Using cookies

Instantly disable or enable all Webflow animations with a toggle, cookies, and reduced-motion support.


<!-- 💙 MEMBERSCRIPT #182 v.01 - DISABLE ANIMATIONS USING COOKIES & PREFERS-REDUCED-MOTION 💙 -->
<script>
// Run immediately to catch animations before they start
(function() {
  console.log('Animation Disable Script loaded!');
  
  // Configuration - Customize these values as needed
  const config = {
    // Cookie settings
    cookieName: 'animationsDisabled',
    cookieExpiryDays: 365, // How long to remember the preference
    
    // Universal animation attribute - use this on ANY animated element
    animationAttribute: 'data-ms-animate',
    
    // Toggle control settings
    showToggle: true, // Set to false to hide the toggle button
    togglePosition: 'bottom-right', // 'top-right', 'bottom-right', 'top-left', 'bottom-left'
    toggleText: {
      disable: 'Disable Animations',
      enable: 'Enable Animations'
    }
  };
  
  // Cookie management functions
  function setCookie(name, value, days) {
    let expires = "";
    if (days) {
      const date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/; SameSite=Lax";
  }
  
  function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
      let c = ca[i];
      while (c.charAt(0) === ' ') c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  }
  
  function deleteCookie(name) {
    document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
  }
  
  // Check if user prefers reduced motion
  function prefersReducedMotion() {
    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  }
  
  // Check if animations should be disabled
  function shouldDisableAnimations() {
    const cookieDisabled = getCookie(config.cookieName) === 'true';
    const systemPrefersReduced = prefersReducedMotion();
    
    console.log('Animation check:', {
      cookieDisabled,
      systemPrefersReduced,
      shouldDisable: cookieDisabled || systemPrefersReduced
    });
    
    return cookieDisabled || systemPrefersReduced;
  }
  
  // Disable animations on page
  function disableAnimations() {
    console.log('Disabling animations...');
    
    // Find all elements with the animation attribute
    const animatedElements = document.querySelectorAll(`[${config.animationAttribute}]`);
    console.log(`Found ${animatedElements.length} animated elements`);
    
    animatedElements.forEach(element => {
      // Remove Webflow animation ID to prevent interactions
      const webflowId = element.getAttribute('data-w-id');
      if (webflowId) {
        element.setAttribute('data-w-id-disabled', webflowId);
        element.removeAttribute('data-w-id');
        console.log('Disabled Webflow animation for:', element);
      }
      
      // Mark as animation disabled
      element.setAttribute('data-animation-disabled', 'true');
    });
    
    // Disable Webflow interactions globally
    if (window.Webflow && window.Webflow.require) {
      try {
        const ix2 = window.Webflow.require('ix2');
        if (ix2 && ix2.store) {
          ix2.store.dispatch({ type: 'ix2/STORE_DISABLE' });
          console.log('Disabled Webflow interactions globally');
        }
      } catch (e) {
        console.log('Could not disable Webflow interactions:', e);
      }
    }
    
    // Override Webflow animation styles
    const style = document.createElement('style');
    style.id = 'webflow-animation-disable';
    style.textContent = `
      [data-animation-disabled="true"] {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
      }
    `;
    
    if (!document.getElementById('webflow-animation-disable')) {
      document.head.appendChild(style);
    }
    
    console.log('Animations disabled successfully');
  }
  
  // Enable animations on page
  function enableAnimations() {
    console.log('Enabling animations...');
    
    // Find all elements with the animation attribute
    const animatedElements = document.querySelectorAll(`[${config.animationAttribute}]`);
    
    animatedElements.forEach(element => {
      if (element.getAttribute('data-animation-disabled') === 'true') {
        // Restore Webflow animation ID
        const disabledId = element.getAttribute('data-w-id-disabled');
        if (disabledId) {
          element.setAttribute('data-w-id', disabledId);
          element.removeAttribute('data-w-id-disabled');
          console.log('Re-enabled Webflow animation for:', element);
        }
        
        // Remove disabled marker
        element.removeAttribute('data-animation-disabled');
      }
    });
    
    // Re-enable Webflow interactions globally
    if (window.Webflow && window.Webflow.require) {
      try {
        const ix2 = window.Webflow.require('ix2');
        if (ix2 && ix2.store) {
          ix2.store.dispatch({ type: 'ix2/STORE_ENABLE' });
          console.log('Re-enabled Webflow interactions globally');
        }
      } catch (e) {
        console.log('Could not re-enable Webflow interactions:', e);
      }
    }
    
    // Remove override styles
    const style = document.getElementById('webflow-animation-disable');
    if (style) {
      style.remove();
    }
    
    console.log('Animations enabled successfully');
  }
  
  // Create toggle button
  function createToggleButton() {
    if (!config.showToggle) return;
    
    // Double check that body exists
    if (!document.body) {
      console.log('Body not ready, retrying toggle creation...');
      setTimeout(createToggleButton, 100);
      return;
    }
    //CUSTOMIZE THE TOGGLE COLORS
    const toggle = document.createElement('button');
    toggle.id = 'animation-toggle';
    toggle.type = 'button';
    toggle.setAttribute('data-ms-code', 'animation-toggle');
    toggle.style.cssText = `
      position: fixed;
      ${config.togglePosition.includes('top') ? 'top: 20px;' : 'bottom: 20px;'}
      ${config.togglePosition.includes('right') ? 'right: 20px;' : 'left: 20px;'}
      z-index: 10000;
      background: #2d62ff; 
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 25px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
      opacity: 0.8;
    `;
    
    // Add hover effects
    toggle.addEventListener('mouseenter', function() {
      this.style.opacity = '1';
      this.style.transform = 'scale(1.05)';
    });
    
    toggle.addEventListener('mouseleave', function() {
      this.style.opacity = '0.8';
      this.style.transform = 'scale(1)';
    });
    
    // Add click handler
    toggle.addEventListener('click', function() {
      console.log('Toggle clicked!');
      const currentlyDisabled = shouldDisableAnimations();
      console.log('Currently disabled:', currentlyDisabled);
      
      if (currentlyDisabled) {
        // Enable animations
        console.log('Enabling animations...');
        deleteCookie(config.cookieName);
        enableAnimations();
        updateToggleButton(false);
        showMessage('Animations enabled', 'success');
      } else {
        // Disable animations
        console.log('Disabling animations...');
        setCookie(config.cookieName, 'true', config.cookieExpiryDays);
        disableAnimations();
        updateToggleButton(true);
        showMessage('Animations disabled', 'info');
      }
    });
    
    document.body.appendChild(toggle);
    updateToggleButton(shouldDisableAnimations());
    
    console.log('Toggle button created');
  }
  
  // Update toggle button text and state
  function updateToggleButton(disabled) {
    const toggle = document.getElementById('animation-toggle');
    if (!toggle) return;
    
    toggle.textContent = disabled ? config.toggleText.enable : config.toggleText.disable;
    toggle.style.background = disabled ? '#28a745' : '#2d62ff';
  }
  
  // Show message to user, CUSTOMIZE THIS
  function showMessage(message, type = 'info') {
    const messageDiv = document.createElement('div');
    messageDiv.className = 'animation-message';
    messageDiv.textContent = message;
    
    const colors = {
      success: '#28a745',
      error: '#dc3545',
      info: '#2d62ff',
      warning: '#ffc107'
    };
    
    messageDiv.style.cssText = `
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: ${colors[type] || colors.info};
      color: white;
      padding: 12px 20px;
      border-radius: 25px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      z-index: 10001;
      font-size: 14px;
      font-weight: 500;
      opacity: 0;
      transition: opacity 0.3s ease;
    `;
    
    document.body.appendChild(messageDiv);
    
    // Fade in
    setTimeout(() => {
      messageDiv.style.opacity = '1';
    }, 100);
    
    // Fade out and remove
    setTimeout(() => {
      messageDiv.style.opacity = '0';
      setTimeout(() => {
        if (document.body.contains(messageDiv)) {
          document.body.removeChild(messageDiv);
        }
      }, 300);
    }, 2000);
  }
  
  // Listen for system preference changes
  function setupPreferenceListener() {
    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
    
    function handlePreferenceChange(e) {
      console.log('System preference changed:', e.matches);
      
      if (e.matches && !getCookie(config.cookieName)) {
        // User now prefers reduced motion and hasn't manually set a preference
        disableAnimations();
        updateToggleButton(true);
      } else if (!e.matches && !getCookie(config.cookieName)) {
        // User no longer prefers reduced motion and hasn't manually set a preference
        enableAnimations();
        updateToggleButton(false);
      }
    }
    
    // Modern browsers
    if (mediaQuery.addEventListener) {
      mediaQuery.addEventListener('change', handlePreferenceChange);
    } else {
      // Fallback for older browsers
      mediaQuery.addListener(handlePreferenceChange);
    }
  }
  
  // Initialize the script
  function initialize() {
    console.log('Initializing animation disable script...');
    
    // Check if animations should be disabled
    if (shouldDisableAnimations()) {
      disableAnimations();
    }
    
    // Setup preference listener
    setupPreferenceListener();
    
    console.log('Animation disable script initialized successfully');
  }
  
  // Initialize animations immediately
  initialize();
  
  // Create toggle button when body is ready
  function createToggleWhenReady() {
    if (document.body) {
      createToggleButton();
    } else {
      setTimeout(createToggleWhenReady, 10);
    }
  }
  
  // Run when DOM is ready
  document.addEventListener('DOMContentLoaded', function() {
    initialize();
    createToggleWhenReady();
  });
  
  // Debug function
  window.debugAnimationDisable = function() {
    console.log('=== Animation Disable Debug Info ===');
    console.log('Cookie value:', getCookie(config.cookieName));
    console.log('Prefers reduced motion:', prefersReducedMotion());
    console.log('Should disable animations:', shouldDisableAnimations());
    console.log('Animation elements found:', document.querySelectorAll(`[${config.animationAttribute}]`).length);
    console.log('Toggle button:', document.getElementById('animation-toggle'));
    console.log('Config:', config);
  };
})();
</script>
v0.1

<!-- 💙 MEMBERSCRIPT #182 v.01 - DISABLE ANIMATIONS USING COOKIES & PREFERS-REDUCED-MOTION 💙 -->
<script>
// Run immediately to catch animations before they start
(function() {
  console.log('Animation Disable Script loaded!');
  
  // Configuration - Customize these values as needed
  const config = {
    // Cookie settings
    cookieName: 'animationsDisabled',
    cookieExpiryDays: 365, // How long to remember the preference
    
    // Universal animation attribute - use this on ANY animated element
    animationAttribute: 'data-ms-animate',
    
    // Toggle control settings
    showToggle: true, // Set to false to hide the toggle button
    togglePosition: 'bottom-right', // 'top-right', 'bottom-right', 'top-left', 'bottom-left'
    toggleText: {
      disable: 'Disable Animations',
      enable: 'Enable Animations'
    }
  };
  
  // Cookie management functions
  function setCookie(name, value, days) {
    let expires = "";
    if (days) {
      const date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/; SameSite=Lax";
  }
  
  function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
      let c = ca[i];
      while (c.charAt(0) === ' ') c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  }
  
  function deleteCookie(name) {
    document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
  }
  
  // Check if user prefers reduced motion
  function prefersReducedMotion() {
    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  }
  
  // Check if animations should be disabled
  function shouldDisableAnimations() {
    const cookieDisabled = getCookie(config.cookieName) === 'true';
    const systemPrefersReduced = prefersReducedMotion();
    
    console.log('Animation check:', {
      cookieDisabled,
      systemPrefersReduced,
      shouldDisable: cookieDisabled || systemPrefersReduced
    });
    
    return cookieDisabled || systemPrefersReduced;
  }
  
  // Disable animations on page
  function disableAnimations() {
    console.log('Disabling animations...');
    
    // Find all elements with the animation attribute
    const animatedElements = document.querySelectorAll(`[${config.animationAttribute}]`);
    console.log(`Found ${animatedElements.length} animated elements`);
    
    animatedElements.forEach(element => {
      // Remove Webflow animation ID to prevent interactions
      const webflowId = element.getAttribute('data-w-id');
      if (webflowId) {
        element.setAttribute('data-w-id-disabled', webflowId);
        element.removeAttribute('data-w-id');
        console.log('Disabled Webflow animation for:', element);
      }
      
      // Mark as animation disabled
      element.setAttribute('data-animation-disabled', 'true');
    });
    
    // Disable Webflow interactions globally
    if (window.Webflow && window.Webflow.require) {
      try {
        const ix2 = window.Webflow.require('ix2');
        if (ix2 && ix2.store) {
          ix2.store.dispatch({ type: 'ix2/STORE_DISABLE' });
          console.log('Disabled Webflow interactions globally');
        }
      } catch (e) {
        console.log('Could not disable Webflow interactions:', e);
      }
    }
    
    // Override Webflow animation styles
    const style = document.createElement('style');
    style.id = 'webflow-animation-disable';
    style.textContent = `
      [data-animation-disabled="true"] {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
      }
    `;
    
    if (!document.getElementById('webflow-animation-disable')) {
      document.head.appendChild(style);
    }
    
    console.log('Animations disabled successfully');
  }
  
  // Enable animations on page
  function enableAnimations() {
    console.log('Enabling animations...');
    
    // Find all elements with the animation attribute
    const animatedElements = document.querySelectorAll(`[${config.animationAttribute}]`);
    
    animatedElements.forEach(element => {
      if (element.getAttribute('data-animation-disabled') === 'true') {
        // Restore Webflow animation ID
        const disabledId = element.getAttribute('data-w-id-disabled');
        if (disabledId) {
          element.setAttribute('data-w-id', disabledId);
          element.removeAttribute('data-w-id-disabled');
          console.log('Re-enabled Webflow animation for:', element);
        }
        
        // Remove disabled marker
        element.removeAttribute('data-animation-disabled');
      }
    });
    
    // Re-enable Webflow interactions globally
    if (window.Webflow && window.Webflow.require) {
      try {
        const ix2 = window.Webflow.require('ix2');
        if (ix2 && ix2.store) {
          ix2.store.dispatch({ type: 'ix2/STORE_ENABLE' });
          console.log('Re-enabled Webflow interactions globally');
        }
      } catch (e) {
        console.log('Could not re-enable Webflow interactions:', e);
      }
    }
    
    // Remove override styles
    const style = document.getElementById('webflow-animation-disable');
    if (style) {
      style.remove();
    }
    
    console.log('Animations enabled successfully');
  }
  
  // Create toggle button
  function createToggleButton() {
    if (!config.showToggle) return;
    
    // Double check that body exists
    if (!document.body) {
      console.log('Body not ready, retrying toggle creation...');
      setTimeout(createToggleButton, 100);
      return;
    }
    //CUSTOMIZE THE TOGGLE COLORS
    const toggle = document.createElement('button');
    toggle.id = 'animation-toggle';
    toggle.type = 'button';
    toggle.setAttribute('data-ms-code', 'animation-toggle');
    toggle.style.cssText = `
      position: fixed;
      ${config.togglePosition.includes('top') ? 'top: 20px;' : 'bottom: 20px;'}
      ${config.togglePosition.includes('right') ? 'right: 20px;' : 'left: 20px;'}
      z-index: 10000;
      background: #2d62ff; 
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 25px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
      opacity: 0.8;
    `;
    
    // Add hover effects
    toggle.addEventListener('mouseenter', function() {
      this.style.opacity = '1';
      this.style.transform = 'scale(1.05)';
    });
    
    toggle.addEventListener('mouseleave', function() {
      this.style.opacity = '0.8';
      this.style.transform = 'scale(1)';
    });
    
    // Add click handler
    toggle.addEventListener('click', function() {
      console.log('Toggle clicked!');
      const currentlyDisabled = shouldDisableAnimations();
      console.log('Currently disabled:', currentlyDisabled);
      
      if (currentlyDisabled) {
        // Enable animations
        console.log('Enabling animations...');
        deleteCookie(config.cookieName);
        enableAnimations();
        updateToggleButton(false);
        showMessage('Animations enabled', 'success');
      } else {
        // Disable animations
        console.log('Disabling animations...');
        setCookie(config.cookieName, 'true', config.cookieExpiryDays);
        disableAnimations();
        updateToggleButton(true);
        showMessage('Animations disabled', 'info');
      }
    });
    
    document.body.appendChild(toggle);
    updateToggleButton(shouldDisableAnimations());
    
    console.log('Toggle button created');
  }
  
  // Update toggle button text and state
  function updateToggleButton(disabled) {
    const toggle = document.getElementById('animation-toggle');
    if (!toggle) return;
    
    toggle.textContent = disabled ? config.toggleText.enable : config.toggleText.disable;
    toggle.style.background = disabled ? '#28a745' : '#2d62ff';
  }
  
  // Show message to user, CUSTOMIZE THIS
  function showMessage(message, type = 'info') {
    const messageDiv = document.createElement('div');
    messageDiv.className = 'animation-message';
    messageDiv.textContent = message;
    
    const colors = {
      success: '#28a745',
      error: '#dc3545',
      info: '#2d62ff',
      warning: '#ffc107'
    };
    
    messageDiv.style.cssText = `
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: ${colors[type] || colors.info};
      color: white;
      padding: 12px 20px;
      border-radius: 25px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      z-index: 10001;
      font-size: 14px;
      font-weight: 500;
      opacity: 0;
      transition: opacity 0.3s ease;
    `;
    
    document.body.appendChild(messageDiv);
    
    // Fade in
    setTimeout(() => {
      messageDiv.style.opacity = '1';
    }, 100);
    
    // Fade out and remove
    setTimeout(() => {
      messageDiv.style.opacity = '0';
      setTimeout(() => {
        if (document.body.contains(messageDiv)) {
          document.body.removeChild(messageDiv);
        }
      }, 300);
    }, 2000);
  }
  
  // Listen for system preference changes
  function setupPreferenceListener() {
    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
    
    function handlePreferenceChange(e) {
      console.log('System preference changed:', e.matches);
      
      if (e.matches && !getCookie(config.cookieName)) {
        // User now prefers reduced motion and hasn't manually set a preference
        disableAnimations();
        updateToggleButton(true);
      } else if (!e.matches && !getCookie(config.cookieName)) {
        // User no longer prefers reduced motion and hasn't manually set a preference
        enableAnimations();
        updateToggleButton(false);
      }
    }
    
    // Modern browsers
    if (mediaQuery.addEventListener) {
      mediaQuery.addEventListener('change', handlePreferenceChange);
    } else {
      // Fallback for older browsers
      mediaQuery.addListener(handlePreferenceChange);
    }
  }
  
  // Initialize the script
  function initialize() {
    console.log('Initializing animation disable script...');
    
    // Check if animations should be disabled
    if (shouldDisableAnimations()) {
      disableAnimations();
    }
    
    // Setup preference listener
    setupPreferenceListener();
    
    console.log('Animation disable script initialized successfully');
  }
  
  // Initialize animations immediately
  initialize();
  
  // Create toggle button when body is ready
  function createToggleWhenReady() {
    if (document.body) {
      createToggleButton();
    } else {
      setTimeout(createToggleWhenReady, 10);
    }
  }
  
  // Run when DOM is ready
  document.addEventListener('DOMContentLoaded', function() {
    initialize();
    createToggleWhenReady();
  });
  
  // Debug function
  window.debugAnimationDisable = function() {
    console.log('=== Animation Disable Debug Info ===');
    console.log('Cookie value:', getCookie(config.cookieName));
    console.log('Prefers reduced motion:', prefersReducedMotion());
    console.log('Should disable animations:', shouldDisableAnimations());
    console.log('Animation elements found:', document.querySelectorAll(`[${config.animationAttribute}]`).length);
    console.log('Toggle button:', document.getElementById('animation-toggle'));
    console.log('Config:', config);
  };
})();
</script>
Voir le Memberscript
Intégration
UX

#181 - Dynamic Google Maps With CMS Location Pins

Display CMS locations on a dynamic Google Map with interactive pins and info windows.


<!-- 💙 MEMBERSCRIPT #181 v.01 - DYNAMIC GOOGLE MAPS WITH CMS LOCATION PINS 💙 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  console.log('Dynamic Google Maps with CMS data loaded!');
  
  // Configuration - Customize these values as needed
  const config = {
    // Map settings
    defaultZoom: 10,
    defaultCenter: { lat: 40.7128, lng: -74.0060 }, // New York City as default
    mapTypeId: 'roadmap', // roadmap, satellite, hybrid, terrain
    mapId: "df5b64a914f0e2d26021bc7d", // Set to your Map ID for Advanced Markers (optional but recommended)
    
    // Marker settings
    markerIcon: null, // Set to custom icon URL if desired
    markerAnimation: 'DROP', // DROP, BOUNCE, or null
    
    // Info window settings
    infoWindowMaxWidth: 300,
    infoWindowPixelOffset: { width: 0, height: -30 },

    
    // Data attributes
    mapContainerAttr: 'map-container',
    locationItemAttr: 'location-item',
    locationNameAttr: 'location-name',
    locationAddressAttr: 'location-address',
    locationLatAttr: 'location-lat',
    locationLngAttr: 'location-lng',
    locationDescriptionAttr: 'location-description'
  };
  
  // Initialize the dynamic map
  function initializeDynamicMap() {
    const mapContainer = document.querySelector(`[data-ms-code="${config.mapContainerAttr}"]`);
    
    if (!mapContainer) {
      console.log('No map container found with data-ms-code="map-container"');
      return;
    }
    
    console.log('Initializing dynamic map...');
    
    // Set map container dimensions
    mapContainer.style.width = config.mapWidth;
    mapContainer.style.height = config.mapHeight;
    mapContainer.style.borderRadius = '8px';
    mapContainer.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
    
    // Load Google Maps API if not already loaded
    if (typeof google === 'undefined' || !google.maps) {
      loadGoogleMapsAPI();
    } else {
      createMap();
    }
  }
  
  // Load Google Maps API
  function loadGoogleMapsAPI() {
    // Check if script is already being loaded
    if (document.querySelector('script[src*="maps.googleapis.com"]')) {
      console.log('Google Maps API already loading...');
      return;
    }
    
    console.log('Loading Google Maps API...');
    
    const script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?key=${getGoogleMapsAPIKey()}&libraries=marker&loading=async&callback=initDynamicMap`;
    script.async = true;
    script.defer = true;
    script.onerror = function() {
      console.error('Failed to load Google Maps API');
      showMapError('Failed to load Google Maps. Please check your API key.');
    };
    
    document.head.appendChild(script);
    
    // Make initDynamicMap globally available
    window.initDynamicMap = createMap;
  }
  
  // Get Google Maps API key from data attribute or environment
  function getGoogleMapsAPIKey() {
    const mapContainer = document.querySelector(`[data-ms-code="${config.mapContainerAttr}"]`);
    const apiKey = mapContainer?.getAttribute('data-api-key') || 
                  document.querySelector('[data-ms-code="google-maps-api-key"]')?.value ||
                  'YOUR_GOOGLE_MAPS_API_KEY'; // Replace with your actual API key
    
    if (apiKey === 'YOUR_GOOGLE_MAPS_API_KEY') {
      console.warn('Please set your Google Maps API key in the map container or form field');
      showMapError('Google Maps API key not configured. Please contact the administrator.');
    }
    
    return apiKey;
  }
  
  // Create the map with CMS data
  function createMap() {
    const mapContainer = document.querySelector(`[data-ms-code="${config.mapContainerAttr}"]`);
    
    if (!mapContainer) {
      console.error('Map container not found');
      return;
    }
    
    console.log('Creating map with CMS data...');
    
    // Get location data from CMS
    const locations = getLocationDataFromCMS();
    
    if (locations.length === 0) {
      console.log('No location data found in CMS');
      showMapError('No locations found. Please add location data to your CMS.');
      return;
    }
    
    console.log(`Found ${locations.length} locations:`, locations);
    
    // Calculate map center based on locations
    const mapCenter = calculateMapCenter(locations);
    
    // Initialize the map
    const mapOptions = {
      center: mapCenter,
      zoom: config.defaultZoom,
      mapTypeId: config.mapTypeId,
      styles: getMapStyles(), // Custom map styling
      gestureHandling: 'cooperative', // Require Ctrl+scroll to zoom
      zoomControl: true,
      mapTypeControl: true,
      scaleControl: true,
      streetViewControl: true,
      rotateControl: true,
      fullscreenControl: true
    };
    
    // Add Map ID if provided (recommended for Advanced Markers)
    if (config.mapId) {
      mapOptions.mapId = config.mapId;
    }
    
    const map = new google.maps.Map(mapContainer, mapOptions);
    
    // Create markers for each location
    const markers = [];
    const bounds = new google.maps.LatLngBounds();
    
    locations.forEach((location, index) => {
      const marker = createLocationMarker(map, location, index);
      markers.push(marker);
      // AdvancedMarkerElement uses position property instead of getPosition() method
      bounds.extend(marker.position);
    });
    
    // Fit map to show all markers
    if (locations.length > 1) {
      map.fitBounds(bounds);
      
      // Ensure minimum zoom level
      google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
        if (map.getZoom() > 15) {
          map.setZoom(15);
        }
      });
    }
    
    console.log('Map created successfully with', markers.length, 'markers');
  }
  
  // Get location data from CMS elements
  function getLocationDataFromCMS() {
    const locationItems = document.querySelectorAll(`[data-ms-code="${config.locationItemAttr}"]`);
    const locations = [];
    
    locationItems.forEach((item, index) => {
      const name = getElementText(item, config.locationNameAttr);
      const address = getElementText(item, config.locationAddressAttr);
      const lat = parseFloat(getElementText(item, config.locationLatAttr));
      const lng = parseFloat(getElementText(item, config.locationLngAttr));
      const description = getElementText(item, config.locationDescriptionAttr);
      
      // Validate coordinates
      if (isNaN(lat) || isNaN(lng)) {
        console.warn(`Invalid coordinates for location ${index + 1}:`, { lat, lng });
        return;
      }
      
      // Validate coordinate ranges
      if (lat < -90 || lat > 90 || lng < -180 || lng > 180) {
        console.warn(`Coordinates out of range for location ${index + 1}:`, { lat, lng });
        return;
      }
      
      locations.push({
        name: name || `Location ${index + 1}`,
        address: address || '',
        lat: lat,
        lng: lng,
        description: description || '',
        index: index
      });
    });
    
    return locations;
  }
  
  // Helper function to get text content from nested elements
  function getElementText(parent, attribute) {
    const element = parent.querySelector(`[data-ms-code="${attribute}"]`);
    return element ? element.textContent.trim() : '';
  }
  
  // Calculate map center based on locations
  function calculateMapCenter(locations) {
    if (locations.length === 0) {
      return config.defaultCenter;
    }
    
    if (locations.length === 1) {
      return { lat: locations[0].lat, lng: locations[0].lng };
    }
    
    // Calculate average coordinates
    const totalLat = locations.reduce((sum, loc) => sum + loc.lat, 0);
    const totalLng = locations.reduce((sum, loc) => sum + loc.lng, 0);
    
    return {
      lat: totalLat / locations.length,
      lng: totalLng / locations.length
    };
  }
  
  // Create a marker for a location
  function createLocationMarker(map, location, index) {
    const position = { lat: location.lat, lng: location.lng };
    
    // CHANGE MARKER CONTENT ELEMENT
    const markerContent = document.createElement('div');
    markerContent.style.cssText = `
      width: 32px;
      height: 32px;
      background-color: #4285f4; 
      border: 2px solid #ffffff;
      border-radius: 50%;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.2s ease;
    `;
    
    // Add custom icon if specified
    if (config.markerIcon) {
      markerContent.style.backgroundImage = `url(${config.markerIcon})`;
      markerContent.style.backgroundSize = 'cover';
      markerContent.style.backgroundPosition = 'center';
      markerContent.style.backgroundColor = 'transparent';
      markerContent.style.border = 'none';
    } else {
      // Add default pin icon
      const pinIcon = document.createElement('div');
      pinIcon.style.cssText = `
        width: 8px;
        height: 8px;
        background-color: #ffffff;
        border-radius: 50%;
      `;
      markerContent.appendChild(pinIcon);
    }
    
    // Add hover effect
    markerContent.addEventListener('mouseenter', function() {
      this.style.transform = 'scale(1.1)';
    });
    
    markerContent.addEventListener('mouseleave', function() {
      this.style.transform = 'scale(1)';
    });
    
    // Create AdvancedMarkerElement
    const marker = new google.maps.marker.AdvancedMarkerElement({
      position: position,
      map: map,
      title: location.name,
      content: markerContent
    });
    
    // Create info window content
    const infoWindowContent = createInfoWindowContent(location);
    
    // Add click event to marker
    marker.addListener('click', function() {
      // Close any existing info windows
      closeAllInfoWindows();
      
      // Create and open info window
      const infoWindow = new google.maps.InfoWindow({
        content: infoWindowContent,
        maxWidth: config.infoWindowMaxWidth,
        pixelOffset: config.infoWindowPixelOffset
      });
      
      infoWindow.open(map, marker);
      
      // Store reference for closing
      window.currentInfoWindow = infoWindow;
    });
    
    return marker;
  }
  
  // Create info window content
  function createInfoWindowContent(location) {
    let content = `<div style="padding: 10px; font-family: Arial, sans-serif;">`;
    
    if (location.name) {
      content += `<h3 style="margin: 0 0 8px 0; color: #333; font-size: 16px;">${escapeHtml(location.name)}</h3>`;
    }
    
    if (location.address) {
      content += `<p style="margin: 0 0 8px 0; color: #666; font-size: 14px;">${escapeHtml(location.address)}</p>`;
    }
    
    if (location.description) {
      content += `<p style="margin: 0; color: #555; font-size: 13px; line-height: 1.4;">${escapeHtml(location.description)}</p>`;
    }
    
    content += `</div>`;
    return content;
  }
  
  // Close all info windows
  function closeAllInfoWindows() {
    if (window.currentInfoWindow) {
      window.currentInfoWindow.close();
      window.currentInfoWindow = null;
    }
  }
  
  // Escape HTML to prevent XSS
  function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }
  
  // Custom map styles (optional)
  function getMapStyles() {
    return [
      {
        featureType: 'poi',
        elementType: 'labels',
        stylers: [{ visibility: 'off' }]
      },
      {
        featureType: 'transit',
        elementType: 'labels',
        stylers: [{ visibility: 'off' }]
      }
    ];
  }
  
  // Show error message
  function showMapError(message) {
    const mapContainer = document.querySelector(`[data-ms-code="${config.mapContainerAttr}"]`);
    if (mapContainer) {
      mapContainer.innerHTML = `
        <div style="
          display: flex;
          align-items: center;
          justify-content: center;
          height: ${config.mapHeight};
          background: #f8f9fa;
          border: 2px dashed #dee2e6;
          border-radius: 8px;
          color: #6c757d;
          font-family: Arial, sans-serif;
          text-align: center;
          padding: 20px;
        ">
          <div>
            <div style="font-size: 24px; margin-bottom: 10px;">🗺️</div>
            <div style="font-size: 14px;">${message}</div>
          </div>
        </div>
      `;
    }
  }
  
  // Initialize the map
  initializeDynamicMap();
  
  // Debug function
  window.debugDynamicMap = function() {
    console.log('=== Dynamic Map Debug Info ===');
    console.log('Map container:', document.querySelector(`[data-ms-code="${config.mapContainerAttr}"]`));
    console.log('Location items:', document.querySelectorAll(`[data-ms-code="${config.locationItemAttr}"]`));
    console.log('CMS locations:', getLocationDataFromCMS());
    console.log('Google Maps loaded:', typeof google !== 'undefined' && !!google.maps);
    console.log('Config:', config);
  };
});
</script>
v0.1

<!-- 💙 MEMBERSCRIPT #181 v.01 - DYNAMIC GOOGLE MAPS WITH CMS LOCATION PINS 💙 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  console.log('Dynamic Google Maps with CMS data loaded!');
  
  // Configuration - Customize these values as needed
  const config = {
    // Map settings
    defaultZoom: 10,
    defaultCenter: { lat: 40.7128, lng: -74.0060 }, // New York City as default
    mapTypeId: 'roadmap', // roadmap, satellite, hybrid, terrain
    mapId: "df5b64a914f0e2d26021bc7d", // Set to your Map ID for Advanced Markers (optional but recommended)
    
    // Marker settings
    markerIcon: null, // Set to custom icon URL if desired
    markerAnimation: 'DROP', // DROP, BOUNCE, or null
    
    // Info window settings
    infoWindowMaxWidth: 300,
    infoWindowPixelOffset: { width: 0, height: -30 },

    
    // Data attributes
    mapContainerAttr: 'map-container',
    locationItemAttr: 'location-item',
    locationNameAttr: 'location-name',
    locationAddressAttr: 'location-address',
    locationLatAttr: 'location-lat',
    locationLngAttr: 'location-lng',
    locationDescriptionAttr: 'location-description'
  };
  
  // Initialize the dynamic map
  function initializeDynamicMap() {
    const mapContainer = document.querySelector(`[data-ms-code="${config.mapContainerAttr}"]`);
    
    if (!mapContainer) {
      console.log('No map container found with data-ms-code="map-container"');
      return;
    }
    
    console.log('Initializing dynamic map...');
    
    // Set map container dimensions
    mapContainer.style.width = config.mapWidth;
    mapContainer.style.height = config.mapHeight;
    mapContainer.style.borderRadius = '8px';
    mapContainer.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
    
    // Load Google Maps API if not already loaded
    if (typeof google === 'undefined' || !google.maps) {
      loadGoogleMapsAPI();
    } else {
      createMap();
    }
  }
  
  // Load Google Maps API
  function loadGoogleMapsAPI() {
    // Check if script is already being loaded
    if (document.querySelector('script[src*="maps.googleapis.com"]')) {
      console.log('Google Maps API already loading...');
      return;
    }
    
    console.log('Loading Google Maps API...');
    
    const script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?key=${getGoogleMapsAPIKey()}&libraries=marker&loading=async&callback=initDynamicMap`;
    script.async = true;
    script.defer = true;
    script.onerror = function() {
      console.error('Failed to load Google Maps API');
      showMapError('Failed to load Google Maps. Please check your API key.');
    };
    
    document.head.appendChild(script);
    
    // Make initDynamicMap globally available
    window.initDynamicMap = createMap;
  }
  
  // Get Google Maps API key from data attribute or environment
  function getGoogleMapsAPIKey() {
    const mapContainer = document.querySelector(`[data-ms-code="${config.mapContainerAttr}"]`);
    const apiKey = mapContainer?.getAttribute('data-api-key') || 
                  document.querySelector('[data-ms-code="google-maps-api-key"]')?.value ||
                  'YOUR_GOOGLE_MAPS_API_KEY'; // Replace with your actual API key
    
    if (apiKey === 'YOUR_GOOGLE_MAPS_API_KEY') {
      console.warn('Please set your Google Maps API key in the map container or form field');
      showMapError('Google Maps API key not configured. Please contact the administrator.');
    }
    
    return apiKey;
  }
  
  // Create the map with CMS data
  function createMap() {
    const mapContainer = document.querySelector(`[data-ms-code="${config.mapContainerAttr}"]`);
    
    if (!mapContainer) {
      console.error('Map container not found');
      return;
    }
    
    console.log('Creating map with CMS data...');
    
    // Get location data from CMS
    const locations = getLocationDataFromCMS();
    
    if (locations.length === 0) {
      console.log('No location data found in CMS');
      showMapError('No locations found. Please add location data to your CMS.');
      return;
    }
    
    console.log(`Found ${locations.length} locations:`, locations);
    
    // Calculate map center based on locations
    const mapCenter = calculateMapCenter(locations);
    
    // Initialize the map
    const mapOptions = {
      center: mapCenter,
      zoom: config.defaultZoom,
      mapTypeId: config.mapTypeId,
      styles: getMapStyles(), // Custom map styling
      gestureHandling: 'cooperative', // Require Ctrl+scroll to zoom
      zoomControl: true,
      mapTypeControl: true,
      scaleControl: true,
      streetViewControl: true,
      rotateControl: true,
      fullscreenControl: true
    };
    
    // Add Map ID if provided (recommended for Advanced Markers)
    if (config.mapId) {
      mapOptions.mapId = config.mapId;
    }
    
    const map = new google.maps.Map(mapContainer, mapOptions);
    
    // Create markers for each location
    const markers = [];
    const bounds = new google.maps.LatLngBounds();
    
    locations.forEach((location, index) => {
      const marker = createLocationMarker(map, location, index);
      markers.push(marker);
      // AdvancedMarkerElement uses position property instead of getPosition() method
      bounds.extend(marker.position);
    });
    
    // Fit map to show all markers
    if (locations.length > 1) {
      map.fitBounds(bounds);
      
      // Ensure minimum zoom level
      google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
        if (map.getZoom() > 15) {
          map.setZoom(15);
        }
      });
    }
    
    console.log('Map created successfully with', markers.length, 'markers');
  }
  
  // Get location data from CMS elements
  function getLocationDataFromCMS() {
    const locationItems = document.querySelectorAll(`[data-ms-code="${config.locationItemAttr}"]`);
    const locations = [];
    
    locationItems.forEach((item, index) => {
      const name = getElementText(item, config.locationNameAttr);
      const address = getElementText(item, config.locationAddressAttr);
      const lat = parseFloat(getElementText(item, config.locationLatAttr));
      const lng = parseFloat(getElementText(item, config.locationLngAttr));
      const description = getElementText(item, config.locationDescriptionAttr);
      
      // Validate coordinates
      if (isNaN(lat) || isNaN(lng)) {
        console.warn(`Invalid coordinates for location ${index + 1}:`, { lat, lng });
        return;
      }
      
      // Validate coordinate ranges
      if (lat < -90 || lat > 90 || lng < -180 || lng > 180) {
        console.warn(`Coordinates out of range for location ${index + 1}:`, { lat, lng });
        return;
      }
      
      locations.push({
        name: name || `Location ${index + 1}`,
        address: address || '',
        lat: lat,
        lng: lng,
        description: description || '',
        index: index
      });
    });
    
    return locations;
  }
  
  // Helper function to get text content from nested elements
  function getElementText(parent, attribute) {
    const element = parent.querySelector(`[data-ms-code="${attribute}"]`);
    return element ? element.textContent.trim() : '';
  }
  
  // Calculate map center based on locations
  function calculateMapCenter(locations) {
    if (locations.length === 0) {
      return config.defaultCenter;
    }
    
    if (locations.length === 1) {
      return { lat: locations[0].lat, lng: locations[0].lng };
    }
    
    // Calculate average coordinates
    const totalLat = locations.reduce((sum, loc) => sum + loc.lat, 0);
    const totalLng = locations.reduce((sum, loc) => sum + loc.lng, 0);
    
    return {
      lat: totalLat / locations.length,
      lng: totalLng / locations.length
    };
  }
  
  // Create a marker for a location
  function createLocationMarker(map, location, index) {
    const position = { lat: location.lat, lng: location.lng };
    
    // CHANGE MARKER CONTENT ELEMENT
    const markerContent = document.createElement('div');
    markerContent.style.cssText = `
      width: 32px;
      height: 32px;
      background-color: #4285f4; 
      border: 2px solid #ffffff;
      border-radius: 50%;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.2s ease;
    `;
    
    // Add custom icon if specified
    if (config.markerIcon) {
      markerContent.style.backgroundImage = `url(${config.markerIcon})`;
      markerContent.style.backgroundSize = 'cover';
      markerContent.style.backgroundPosition = 'center';
      markerContent.style.backgroundColor = 'transparent';
      markerContent.style.border = 'none';
    } else {
      // Add default pin icon
      const pinIcon = document.createElement('div');
      pinIcon.style.cssText = `
        width: 8px;
        height: 8px;
        background-color: #ffffff;
        border-radius: 50%;
      `;
      markerContent.appendChild(pinIcon);
    }
    
    // Add hover effect
    markerContent.addEventListener('mouseenter', function() {
      this.style.transform = 'scale(1.1)';
    });
    
    markerContent.addEventListener('mouseleave', function() {
      this.style.transform = 'scale(1)';
    });
    
    // Create AdvancedMarkerElement
    const marker = new google.maps.marker.AdvancedMarkerElement({
      position: position,
      map: map,
      title: location.name,
      content: markerContent
    });
    
    // Create info window content
    const infoWindowContent = createInfoWindowContent(location);
    
    // Add click event to marker
    marker.addListener('click', function() {
      // Close any existing info windows
      closeAllInfoWindows();
      
      // Create and open info window
      const infoWindow = new google.maps.InfoWindow({
        content: infoWindowContent,
        maxWidth: config.infoWindowMaxWidth,
        pixelOffset: config.infoWindowPixelOffset
      });
      
      infoWindow.open(map, marker);
      
      // Store reference for closing
      window.currentInfoWindow = infoWindow;
    });
    
    return marker;
  }
  
  // Create info window content
  function createInfoWindowContent(location) {
    let content = `<div style="padding: 10px; font-family: Arial, sans-serif;">`;
    
    if (location.name) {
      content += `<h3 style="margin: 0 0 8px 0; color: #333; font-size: 16px;">${escapeHtml(location.name)}</h3>`;
    }
    
    if (location.address) {
      content += `<p style="margin: 0 0 8px 0; color: #666; font-size: 14px;">${escapeHtml(location.address)}</p>`;
    }
    
    if (location.description) {
      content += `<p style="margin: 0; color: #555; font-size: 13px; line-height: 1.4;">${escapeHtml(location.description)}</p>`;
    }
    
    content += `</div>`;
    return content;
  }
  
  // Close all info windows
  function closeAllInfoWindows() {
    if (window.currentInfoWindow) {
      window.currentInfoWindow.close();
      window.currentInfoWindow = null;
    }
  }
  
  // Escape HTML to prevent XSS
  function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }
  
  // Custom map styles (optional)
  function getMapStyles() {
    return [
      {
        featureType: 'poi',
        elementType: 'labels',
        stylers: [{ visibility: 'off' }]
      },
      {
        featureType: 'transit',
        elementType: 'labels',
        stylers: [{ visibility: 'off' }]
      }
    ];
  }
  
  // Show error message
  function showMapError(message) {
    const mapContainer = document.querySelector(`[data-ms-code="${config.mapContainerAttr}"]`);
    if (mapContainer) {
      mapContainer.innerHTML = `
        <div style="
          display: flex;
          align-items: center;
          justify-content: center;
          height: ${config.mapHeight};
          background: #f8f9fa;
          border: 2px dashed #dee2e6;
          border-radius: 8px;
          color: #6c757d;
          font-family: Arial, sans-serif;
          text-align: center;
          padding: 20px;
        ">
          <div>
            <div style="font-size: 24px; margin-bottom: 10px;">🗺️</div>
            <div style="font-size: 14px;">${message}</div>
          </div>
        </div>
      `;
    }
  }
  
  // Initialize the map
  initializeDynamicMap();
  
  // Debug function
  window.debugDynamicMap = function() {
    console.log('=== Dynamic Map Debug Info ===');
    console.log('Map container:', document.querySelector(`[data-ms-code="${config.mapContainerAttr}"]`));
    console.log('Location items:', document.querySelectorAll(`[data-ms-code="${config.locationItemAttr}"]`));
    console.log('CMS locations:', getLocationDataFromCMS());
    console.log('Google Maps loaded:', typeof google !== 'undefined' && !!google.maps);
    console.log('Config:', config);
  };
});
</script>
Voir le Memberscript
Flux personnalisés

#180 - Allow Members to Edit CMS Blog Content

Let members edit live CMS blog posts directly on your Webflow site.

Code de la tête

Place this in your page <head>


<!-- 💙 MEMBERSCRIPT #180 v.01 CSS FOR THE RICH TEXT FIELD 💙 -->

<style>
/* =========================================== */
/* MAIN EDITOR CONTAINER - Customize borders, colors, etc. */
/* =========================================== */
.rich-text-editor {
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fcfcfc;
  font-family: inherit;
}
/* =========================================== */
/* TOOLBAR STYLES - Customize button appearance */
/* =========================================== */
.toolbar {
  display: flex;
  gap: 5px;
  padding: 10px;
  background: #f9fafb;
  border-bottom: 1px solid #d1d5db;
  border-radius: 6px 6px 0 0;
  flex-wrap: wrap;
}
/* =========================================== */
/* TOOLBAR BUTTONS - Customize button styling */
/* =========================================== */
.toolbar button {
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}
.toolbar button:hover {
  background: #f3f4f6;
}
.toolbar button.active {
  background: #3b82f6;
  color: white;
}
/* =========================================== */
/* EDITOR CONTENT AREA - Customize typing area */
/* =========================================== */
.editor-content {
  padding: 15px;
  min-height: 120px;
  outline: none;
  line-height: 1.6;
}
/* =========================================== */
/* CONTENT STYLING - Customize text formatting */
/* =========================================== */
.editor-content p {
  margin: 0 0 10px 0;
}
.editor-content h1,
.editor-content h2,
.editor-content h3,
.editor-content h4,
.editor-content h5,
.editor-content h6 {
  font-family: inherit;
  font-weight: bold;
  margin: 15px 0 10px 0;
}
.editor-content h1 { font-size: 1.8em; }
.editor-content h2 { font-size: 1.5em; }
.editor-content h3 { font-size: 1.3em; }
.editor-content ul, 
.editor-content ol {
  margin: 10px 0;
  padding-left: 30px;
}
.editor-content a {
  color: #3b82f6;
  text-decoration: underline;
}

/* Link input overlay styles */
.link-input-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.link-input-container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  min-width: 300px;
}
.link-input-container label {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  color: #374151;
}
.link-url-input {
  width: 100%;
  padding: 10px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 15px;
  box-sizing: border-box;
}
.link-url-input:focus {
  outline: none;
  border-color: #3b82f6;
}
.link-input-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.link-cancel-btn, .link-create-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}
.link-cancel-btn {
  background: #f3f4f6;
  color: #374151;
}
.link-cancel-btn:hover {
  background: #e5e7eb;
}
.link-create-btn {
  background: #3b82f6;
  color: white;
}
.link-create-btn:hover {
  background: #2563eb;
}
</style>

Code du corps

Place this in your page <body>



<!-- 💙 MEMBERSCRIPT #180 v.01 ALLOW MEMBERS TO EDIT CMS BLOG CONTENT 💙 --> 

<script>
document.addEventListener('DOMContentLoaded', function() {
  console.log('Blog editor with rich text loaded!');
  
  // REPLACE THIS WEBHOOK LINK WITH YOUR OWN
  const WEBHOOK_URL = 'https://hook.eu2.make.com/ycjsr8mhbqhim3ic85o6hxcj9t0kp999';
  
  // Initialize Rich Text Editor
  function initializeRichTextEditor() {
    const contentTextarea = document.querySelector('[data-ms-code="blog-content"]');
    if (!contentTextarea) return console.log('No content textarea found for rich text editor');
    contentTextarea.style.display = 'none';
    
    const editorContainer = document.createElement('div');
    editorContainer.className = 'rich-text-editor';
    
    const toolbar = document.createElement('div');
    toolbar.className = 'toolbar';
    toolbar.innerHTML = `
      
      
      
      
      
      
      
      
      
      
      
    `;
    
    const editorContent = document.createElement('div');
    editorContent.className = 'editor-content';
    editorContent.contentEditable = true;
    editorContent.innerHTML = contentTextarea.value || '';
    
    editorContainer.appendChild(toolbar);
    editorContainer.appendChild(editorContent);
    contentTextarea.parentNode.insertBefore(editorContainer, contentTextarea);
    
    toolbar.addEventListener('click', function(e) {
      if (e.target.tagName === 'BUTTON') {
        e.preventDefault();
        const command = e.target.dataset.command;
        const value = e.target.dataset.value;
        if (command === 'createLink') handleLinkCreation();
        else if (command === 'formatBlock') document.execCommand('formatBlock', false, value);
        else document.execCommand(command, false, null);
        updateToolbarStates();
        updateHiddenField();
      }
    });
    
    function handleLinkCreation() {
      const selection = window.getSelection();
      const selectedText = selection.toString().trim();
      if (!selectedText) return showMessage('Please select text first, then click the link button', 'warning');
      
      const range = selection.getRangeAt(0);
      const linkInput = document.createElement('div');
      linkInput.className = 'link-input-overlay';
      linkInput.innerHTML = `
        
      `;
      document.body.appendChild(linkInput);
      
      const urlInput = linkInput.querySelector('.link-url-input');
      urlInput.focus();
      
      linkInput.querySelector('.link-cancel-btn').addEventListener('click', () => document.body.removeChild(linkInput));
      linkInput.querySelector('.link-create-btn').addEventListener('click', () => {
        const url = urlInput.value.trim();
        if (url) {
          const fullUrl = url.startsWith('http') ? url : 'https://' + url;
          const newSelection = window.getSelection();
          newSelection.removeAllRanges();
          newSelection.addRange(range);
          editorContent.focus();
          document.execCommand('createLink', false, fullUrl);
          updateHiddenField();
        }
        document.body.removeChild(linkInput);
      });
      
      urlInput.addEventListener('keypress', e => { if (e.key === 'Enter') linkInput.querySelector('.link-create-btn').click(); });
      urlInput.addEventListener('keydown', e => { if (e.key === 'Escape') linkInput.querySelector('.link-cancel-btn').click(); });
    }
    
    function updateToolbarStates() {
      toolbar.querySelectorAll('button').forEach(button => {
        const command = button.dataset.command;
        const value = button.dataset.value;
        if (command === 'formatBlock') {
          button.classList.toggle('active', document.queryCommandValue('formatBlock') === value);
        } else if (command !== 'createLink' && command !== 'removeFormat') {
          button.classList.toggle('active', document.queryCommandState(command));
        }
      });
    }
    
    function updateHiddenField() { contentTextarea.value = editorContent.innerHTML; }
    editorContent.addEventListener('input', updateHiddenField);
    editorContent.addEventListener('mouseup', updateToolbarStates);
    editorContent.addEventListener('keyup', updateToolbarStates);
    
    updateHiddenField();
  }
  
  function initializeBlogEditor() {
    let editForm = document.querySelector('[data-ms-code="edit-blog-form"]') || document.querySelector('form');
    if (!editForm) return console.error('No form found on page');
    
    const titleInput = editForm.querySelector('[data-ms-code="blog-title"]') || document.querySelector('[data-ms-code="blog-title"]');
    const contentInput = editForm.querySelector('[data-ms-code="blog-content"]') || document.querySelector('[data-ms-code="blog-content"]');
    const submitButton = editForm.querySelector('[data-ms-code="submit-edit"]') || editForm.querySelector('[type="submit"]') || editForm.querySelector('button');
    
    if (!titleInput || !contentInput || !submitButton) return console.error('Required form elements not found');
    
    editForm.setAttribute('data-wf-ignore', 'true');
    editForm.removeAttribute('action');
    
    const handleSubmit = async function(event) {
      event.preventDefault();
      const formData = {
        title: titleInput.value.trim(),
        content: contentInput.value.trim()
      };
      
      if (!validateFormData(titleInput, contentInput)) return false;
      
      setLoadingState(submitButton, true);
      
      try {
        const response = await fetch(WEBHOOK_URL, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(formData)
        });
        if (response.ok) showMessage('Blog post updated successfully!', 'success');
        else throw new Error(`HTTP error! status: ${response.status}`);
      } catch (error) {
        console.error('Error updating blog post:', error);
        showMessage('Failed to update blog post. Please try again.', 'error');
      } finally {
        setLoadingState(submitButton, false);
      }
    };
    
    editForm.addEventListener('submit', handleSubmit);
    submitButton.addEventListener('click', handleSubmit);
  }
  
  function validateFormData(titleInput, contentInput) {
    if (!titleInput.value.trim()) { showMessage('Please enter a blog title.', 'error'); titleInput.focus(); return false; }
    if (!contentInput.value.trim()) { showMessage('Please enter blog content.', 'error'); return false; }
    return true;
  }
  
  function setLoadingState(button, isLoading) {
    if (isLoading) { button.disabled = true; button.setAttribute('data-original-text', button.textContent); button.textContent = 'Updating...'; button.style.opacity = '0.7'; }
    else { button.disabled = false; button.textContent = button.getAttribute('data-original-text') || 'Update Post'; button.style.opacity = '1'; }
  }
  
  function showMessage(message, type = 'info') {
    const existingMessage = document.querySelector('.blog-message'); if (existingMessage) existingMessage.remove();
    const messageDiv = document.createElement('div');
    messageDiv.className = `blog-message blog-message-${type}`; messageDiv.textContent = message;
    const colors = { success: '#10b981', error: '#ef4444', info: '#3b82f6', warning: '#f59e0b' };
    messageDiv.style.cssText = `position: fixed; top: 20px; right: 20px; background: ${colors[type] || colors.info}; color: white; padding: 12px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 10000; font-size: 14px; font-weight: 500; max-width: 300px;`;
    document.body.appendChild(messageDiv);
    setTimeout(() => { if (document.body.contains(messageDiv)) messageDiv.remove(); }, 5000);
  }
  
  initializeRichTextEditor();
  initializeBlogEditor();
});
</script>
v0.1

Code de la tête

Place this in your page <head>


<!-- 💙 MEMBERSCRIPT #180 v.01 CSS FOR THE RICH TEXT FIELD 💙 -->

<style>
/* =========================================== */
/* MAIN EDITOR CONTAINER - Customize borders, colors, etc. */
/* =========================================== */
.rich-text-editor {
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fcfcfc;
  font-family: inherit;
}
/* =========================================== */
/* TOOLBAR STYLES - Customize button appearance */
/* =========================================== */
.toolbar {
  display: flex;
  gap: 5px;
  padding: 10px;
  background: #f9fafb;
  border-bottom: 1px solid #d1d5db;
  border-radius: 6px 6px 0 0;
  flex-wrap: wrap;
}
/* =========================================== */
/* TOOLBAR BUTTONS - Customize button styling */
/* =========================================== */
.toolbar button {
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}
.toolbar button:hover {
  background: #f3f4f6;
}
.toolbar button.active {
  background: #3b82f6;
  color: white;
}
/* =========================================== */
/* EDITOR CONTENT AREA - Customize typing area */
/* =========================================== */
.editor-content {
  padding: 15px;
  min-height: 120px;
  outline: none;
  line-height: 1.6;
}
/* =========================================== */
/* CONTENT STYLING - Customize text formatting */
/* =========================================== */
.editor-content p {
  margin: 0 0 10px 0;
}
.editor-content h1,
.editor-content h2,
.editor-content h3,
.editor-content h4,
.editor-content h5,
.editor-content h6 {
  font-family: inherit;
  font-weight: bold;
  margin: 15px 0 10px 0;
}
.editor-content h1 { font-size: 1.8em; }
.editor-content h2 { font-size: 1.5em; }
.editor-content h3 { font-size: 1.3em; }
.editor-content ul, 
.editor-content ol {
  margin: 10px 0;
  padding-left: 30px;
}
.editor-content a {
  color: #3b82f6;
  text-decoration: underline;
}

/* Link input overlay styles */
.link-input-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.link-input-container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  min-width: 300px;
}
.link-input-container label {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  color: #374151;
}
.link-url-input {
  width: 100%;
  padding: 10px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 15px;
  box-sizing: border-box;
}
.link-url-input:focus {
  outline: none;
  border-color: #3b82f6;
}
.link-input-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.link-cancel-btn, .link-create-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}
.link-cancel-btn {
  background: #f3f4f6;
  color: #374151;
}
.link-cancel-btn:hover {
  background: #e5e7eb;
}
.link-create-btn {
  background: #3b82f6;
  color: white;
}
.link-create-btn:hover {
  background: #2563eb;
}
</style>

Code du corps

Place this in your page <body>



<!-- 💙 MEMBERSCRIPT #180 v.01 ALLOW MEMBERS TO EDIT CMS BLOG CONTENT 💙 --> 

<script>
document.addEventListener('DOMContentLoaded', function() {
  console.log('Blog editor with rich text loaded!');
  
  // REPLACE THIS WEBHOOK LINK WITH YOUR OWN
  const WEBHOOK_URL = 'https://hook.eu2.make.com/ycjsr8mhbqhim3ic85o6hxcj9t0kp999';
  
  // Initialize Rich Text Editor
  function initializeRichTextEditor() {
    const contentTextarea = document.querySelector('[data-ms-code="blog-content"]');
    if (!contentTextarea) return console.log('No content textarea found for rich text editor');
    contentTextarea.style.display = 'none';
    
    const editorContainer = document.createElement('div');
    editorContainer.className = 'rich-text-editor';
    
    const toolbar = document.createElement('div');
    toolbar.className = 'toolbar';
    toolbar.innerHTML = `
      
      
      
      
      
      
      
      
      
      
      
    `;
    
    const editorContent = document.createElement('div');
    editorContent.className = 'editor-content';
    editorContent.contentEditable = true;
    editorContent.innerHTML = contentTextarea.value || '';
    
    editorContainer.appendChild(toolbar);
    editorContainer.appendChild(editorContent);
    contentTextarea.parentNode.insertBefore(editorContainer, contentTextarea);
    
    toolbar.addEventListener('click', function(e) {
      if (e.target.tagName === 'BUTTON') {
        e.preventDefault();
        const command = e.target.dataset.command;
        const value = e.target.dataset.value;
        if (command === 'createLink') handleLinkCreation();
        else if (command === 'formatBlock') document.execCommand('formatBlock', false, value);
        else document.execCommand(command, false, null);
        updateToolbarStates();
        updateHiddenField();
      }
    });
    
    function handleLinkCreation() {
      const selection = window.getSelection();
      const selectedText = selection.toString().trim();
      if (!selectedText) return showMessage('Please select text first, then click the link button', 'warning');
      
      const range = selection.getRangeAt(0);
      const linkInput = document.createElement('div');
      linkInput.className = 'link-input-overlay';
      linkInput.innerHTML = `
        
      `;
      document.body.appendChild(linkInput);
      
      const urlInput = linkInput.querySelector('.link-url-input');
      urlInput.focus();
      
      linkInput.querySelector('.link-cancel-btn').addEventListener('click', () => document.body.removeChild(linkInput));
      linkInput.querySelector('.link-create-btn').addEventListener('click', () => {
        const url = urlInput.value.trim();
        if (url) {
          const fullUrl = url.startsWith('http') ? url : 'https://' + url;
          const newSelection = window.getSelection();
          newSelection.removeAllRanges();
          newSelection.addRange(range);
          editorContent.focus();
          document.execCommand('createLink', false, fullUrl);
          updateHiddenField();
        }
        document.body.removeChild(linkInput);
      });
      
      urlInput.addEventListener('keypress', e => { if (e.key === 'Enter') linkInput.querySelector('.link-create-btn').click(); });
      urlInput.addEventListener('keydown', e => { if (e.key === 'Escape') linkInput.querySelector('.link-cancel-btn').click(); });
    }
    
    function updateToolbarStates() {
      toolbar.querySelectorAll('button').forEach(button => {
        const command = button.dataset.command;
        const value = button.dataset.value;
        if (command === 'formatBlock') {
          button.classList.toggle('active', document.queryCommandValue('formatBlock') === value);
        } else if (command !== 'createLink' && command !== 'removeFormat') {
          button.classList.toggle('active', document.queryCommandState(command));
        }
      });
    }
    
    function updateHiddenField() { contentTextarea.value = editorContent.innerHTML; }
    editorContent.addEventListener('input', updateHiddenField);
    editorContent.addEventListener('mouseup', updateToolbarStates);
    editorContent.addEventListener('keyup', updateToolbarStates);
    
    updateHiddenField();
  }
  
  function initializeBlogEditor() {
    let editForm = document.querySelector('[data-ms-code="edit-blog-form"]') || document.querySelector('form');
    if (!editForm) return console.error('No form found on page');
    
    const titleInput = editForm.querySelector('[data-ms-code="blog-title"]') || document.querySelector('[data-ms-code="blog-title"]');
    const contentInput = editForm.querySelector('[data-ms-code="blog-content"]') || document.querySelector('[data-ms-code="blog-content"]');
    const submitButton = editForm.querySelector('[data-ms-code="submit-edit"]') || editForm.querySelector('[type="submit"]') || editForm.querySelector('button');
    
    if (!titleInput || !contentInput || !submitButton) return console.error('Required form elements not found');
    
    editForm.setAttribute('data-wf-ignore', 'true');
    editForm.removeAttribute('action');
    
    const handleSubmit = async function(event) {
      event.preventDefault();
      const formData = {
        title: titleInput.value.trim(),
        content: contentInput.value.trim()
      };
      
      if (!validateFormData(titleInput, contentInput)) return false;
      
      setLoadingState(submitButton, true);
      
      try {
        const response = await fetch(WEBHOOK_URL, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(formData)
        });
        if (response.ok) showMessage('Blog post updated successfully!', 'success');
        else throw new Error(`HTTP error! status: ${response.status}`);
      } catch (error) {
        console.error('Error updating blog post:', error);
        showMessage('Failed to update blog post. Please try again.', 'error');
      } finally {
        setLoadingState(submitButton, false);
      }
    };
    
    editForm.addEventListener('submit', handleSubmit);
    submitButton.addEventListener('click', handleSubmit);
  }
  
  function validateFormData(titleInput, contentInput) {
    if (!titleInput.value.trim()) { showMessage('Please enter a blog title.', 'error'); titleInput.focus(); return false; }
    if (!contentInput.value.trim()) { showMessage('Please enter blog content.', 'error'); return false; }
    return true;
  }
  
  function setLoadingState(button, isLoading) {
    if (isLoading) { button.disabled = true; button.setAttribute('data-original-text', button.textContent); button.textContent = 'Updating...'; button.style.opacity = '0.7'; }
    else { button.disabled = false; button.textContent = button.getAttribute('data-original-text') || 'Update Post'; button.style.opacity = '1'; }
  }
  
  function showMessage(message, type = 'info') {
    const existingMessage = document.querySelector('.blog-message'); if (existingMessage) existingMessage.remove();
    const messageDiv = document.createElement('div');
    messageDiv.className = `blog-message blog-message-${type}`; messageDiv.textContent = message;
    const colors = { success: '#10b981', error: '#ef4444', info: '#3b82f6', warning: '#f59e0b' };
    messageDiv.style.cssText = `position: fixed; top: 20px; right: 20px; background: ${colors[type] || colors.info}; color: white; padding: 12px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 10000; font-size: 14px; font-weight: 500; max-width: 300px;`;
    document.body.appendChild(messageDiv);
    setTimeout(() => { if (document.body.contains(messageDiv)) messageDiv.remove(); }, 5000);
  }
  
  initializeRichTextEditor();
  initializeBlogEditor();
});
</script>
Voir le Memberscript
UX

#179 - Rich Text Fields For Webflow Forms

Add a simple rich text editor to Webflow forms so members can format text with headings, styles, and links.

Code de la tête

Place this in your page <head>


<!-- 💙 MEMBERSCRIPT #179 v0.1 RICH TEXT FIELDS FOR WEBFLOW FORMS 💙 -->

<style>
/* =========================================== */
/* MAIN EDITOR CONTAINER - Customize borders, colors, etc. */
/* =========================================== */
.rich-text-editor {
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fcfcfc;
  font-family: inherit;
}
/* =========================================== */
/* TOOLBAR STYLES - Customize button appearance */
/* =========================================== */
.toolbar {
  display: flex;
  gap: 5px;
  padding: 10px;
  background: #f9fafb;
  border-bottom: 1px solid #d1d5db;
  border-radius: 6px 6px 0 0;
  flex-wrap: wrap;
}
/* =========================================== */
/* TOOLBAR BUTTONS - Customize button styling */
/* =========================================== */
.toolbar button {
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}
.toolbar button:hover {
  background: #f3f4f6;
}
.toolbar button.active {
  background: #3b82f6;
  color: white;
}
/* =========================================== */
/* EDITOR CONTENT AREA - Customize typing area */
/* =========================================== */
.editor-content {
  padding: 15px;
  min-height: 120px;
  outline: none;
  line-height: 1.6;
}
/* =========================================== */
/* CONTENT STYLING - Customize text formatting */
/* =========================================== */
.editor-content p {
  margin: 0 0 10px 0;
}
.editor-content h1,
.editor-content h2,
.editor-content h3,
.editor-content h4,
.editor-content h5,
.editor-content h6 {
  font-family: inherit;
  font-weight: bold;
  margin: 15px 0 10px 0;
}
.editor-content h1 { font-size: 1.8em; }
.editor-content h2 { font-size: 1.5em; }
.editor-content h3 { font-size: 1.3em; }
.editor-content ul, 
.editor-content ol {
  margin: 10px 0;
  padding-left: 30px;
}
.editor-content a {
  color: #3b82f6;
  text-decoration: underline;
}

/* Link input overlay styles */
.link-input-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.link-input-container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  min-width: 300px;
}
.link-input-container label {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  color: #374151;
}
.link-url-input {
  width: 100%;
  padding: 10px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 15px;
  box-sizing: border-box;
}
.link-url-input:focus {
  outline: none;
  border-color: #3b82f6;
}
.link-input-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.link-cancel-btn, .link-create-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}
.link-cancel-btn {
  background: #f3f4f6;
  color: #374151;
}
.link-cancel-btn:hover {
  background: #e5e7eb;
}
.link-create-btn {
  background: #3b82f6;
  color: white;
}
.link-create-btn:hover {
  background: #2563eb;
}
</style>

Code du corps

Place this in your page <body>



<!-- 💙 MEMBERSCRIPT #179 v0.1 RICH TEXT FIELDS FOR WEBFLOW FORMS 💙 --> 

<!-- 
  ===========================================
  JAVASCRIPT FUNCTIONALITY - DO NOT MODIFY
  ===========================================
  The script below handles all the rich text editor functionality.
  Only modify if you know what you're doing.
-->

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Find all rich text editors
  const editors = document.querySelectorAll('[data-ms-code="rich-text-editor"]');
  
  editors.forEach(function(textarea) {
    // Hide original textarea
    textarea.style.display = 'none';
    
    // Create editor container
    const editorContainer = document.createElement('div');
    editorContainer.className = 'rich-text-editor';
    
    // Create toolbar
    const toolbar = document.createElement('div');
    toolbar.className = 'toolbar';
    toolbar.innerHTML = `
      <button type="button" data-command="formatBlock" data-value="h1">H1</button>
      <button type="button" data-command="formatBlock" data-value="h2">H2</button>
      <button type="button" data-command="formatBlock" data-value="h3">H3</button>
      <button type="button" data-command="formatBlock" data-value="p">P</button>
      <button type="button" data-command="bold"><b>B</b></button>
      <button type="button" data-command="italic"><i>I</i></button>
      <button type="button" data-command="underline"><u>U</u></button>
      <button type="button" data-command="insertUnorderedList">• List</button>
      <button type="button" data-command="insertOrderedList">1. List</button>
      <button type="button" data-command="createLink">Link</button>
      <button type="button" data-command="removeFormat">Clear</button>
    `;
    
    // Create editable content area
    const editorContent = document.createElement('div');
    editorContent.className = 'editor-content';
    editorContent.contentEditable = true;
    editorContent.innerHTML = textarea.value || '';
    
    // Assemble editor
    editorContainer.appendChild(toolbar);
    editorContainer.appendChild(editorContent);
    textarea.parentNode.insertBefore(editorContainer, textarea);
    
    // Handle toolbar buttons
    toolbar.addEventListener('click', function(e) {
      if (e.target.tagName === 'BUTTON') {
        e.preventDefault();
        const command = e.target.dataset.command;
        const value = e.target.dataset.value;
        
        if (command === 'createLink') {
          handleLinkCreation();
        } else if (command === 'formatBlock') {
          document.execCommand('formatBlock', false, value);
        } else {
          document.execCommand(command, false, null);
        }
        
        // Update button states
        updateToolbarStates();
        
        // Update hidden field
        updateHiddenField();
      }
    });
    
    // Handle link creation without popup
    function handleLinkCreation() {
      const selection = window.getSelection();
      const selectedText = selection.toString().trim();
      
      if (selectedText) {
        // Store the selection range to restore it later
        const range = selection.getRangeAt(0);
        // Create a temporary input field for URL entry
        const linkInput = document.createElement('div');
        linkInput.className = 'link-input-overlay';
        linkInput.innerHTML = `
          <div class="link-input-container">
            <label>Enter URL for "${selectedText}":</label>
            <input type="url" placeholder="https://example.com" class="link-url-input">
            <div class="link-input-buttons">
              <button type="button" class="link-cancel-btn">Cancel</button>
              <button type="button" class="link-create-btn">Create Link</button>
            </div>
          </div>
        `;
        
        // Add styles for the input overlay
        const overlayStyles = `...`; // (Styles unchanged, truncated here for brevity)
        
        // Add styles if not already added
        if (!document.querySelector('#link-input-styles')) {
          const styleSheet = document.createElement('style');
          styleSheet.id = 'link-input-styles';
          styleSheet.textContent = overlayStyles;
          document.head.appendChild(styleSheet);
        }
        
        // (Remaining logic unchanged — handles link creation, cancel, enter/escape keys, etc.)
      }
    }
    
    // Update toolbar button states
    function updateToolbarStates() { ... }
    
    // Update hidden field with HTML content
    function updateHiddenField() { ... }
    
    // Handle content changes
    editorContent.addEventListener('input', function() {
      updateHiddenField();
    });
    
    // Handle selection changes for toolbar states
    editorContent.addEventListener('mouseup', updateToolbarStates);
    editorContent.addEventListener('keyup', updateToolbarStates);
    
    // Initial update
    updateHiddenField();
    
    // Handle form submission
    const form = document.querySelector('[data-ms-code="rich-text-form"]');
    if (form) {
      form.addEventListener('submit', function() {
        updateHiddenField();
      });
    }
  });
});
</script>
v0.1

Code de la tête

Place this in your page <head>


<!-- 💙 MEMBERSCRIPT #179 v0.1 RICH TEXT FIELDS FOR WEBFLOW FORMS 💙 -->

<style>
/* =========================================== */
/* MAIN EDITOR CONTAINER - Customize borders, colors, etc. */
/* =========================================== */
.rich-text-editor {
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fcfcfc;
  font-family: inherit;
}
/* =========================================== */
/* TOOLBAR STYLES - Customize button appearance */
/* =========================================== */
.toolbar {
  display: flex;
  gap: 5px;
  padding: 10px;
  background: #f9fafb;
  border-bottom: 1px solid #d1d5db;
  border-radius: 6px 6px 0 0;
  flex-wrap: wrap;
}
/* =========================================== */
/* TOOLBAR BUTTONS - Customize button styling */
/* =========================================== */
.toolbar button {
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}
.toolbar button:hover {
  background: #f3f4f6;
}
.toolbar button.active {
  background: #3b82f6;
  color: white;
}
/* =========================================== */
/* EDITOR CONTENT AREA - Customize typing area */
/* =========================================== */
.editor-content {
  padding: 15px;
  min-height: 120px;
  outline: none;
  line-height: 1.6;
}
/* =========================================== */
/* CONTENT STYLING - Customize text formatting */
/* =========================================== */
.editor-content p {
  margin: 0 0 10px 0;
}
.editor-content h1,
.editor-content h2,
.editor-content h3,
.editor-content h4,
.editor-content h5,
.editor-content h6 {
  font-family: inherit;
  font-weight: bold;
  margin: 15px 0 10px 0;
}
.editor-content h1 { font-size: 1.8em; }
.editor-content h2 { font-size: 1.5em; }
.editor-content h3 { font-size: 1.3em; }
.editor-content ul, 
.editor-content ol {
  margin: 10px 0;
  padding-left: 30px;
}
.editor-content a {
  color: #3b82f6;
  text-decoration: underline;
}

/* Link input overlay styles */
.link-input-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.link-input-container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  min-width: 300px;
}
.link-input-container label {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  color: #374151;
}
.link-url-input {
  width: 100%;
  padding: 10px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 15px;
  box-sizing: border-box;
}
.link-url-input:focus {
  outline: none;
  border-color: #3b82f6;
}
.link-input-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.link-cancel-btn, .link-create-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}
.link-cancel-btn {
  background: #f3f4f6;
  color: #374151;
}
.link-cancel-btn:hover {
  background: #e5e7eb;
}
.link-create-btn {
  background: #3b82f6;
  color: white;
}
.link-create-btn:hover {
  background: #2563eb;
}
</style>

Code du corps

Place this in your page <body>



<!-- 💙 MEMBERSCRIPT #179 v0.1 RICH TEXT FIELDS FOR WEBFLOW FORMS 💙 --> 

<!-- 
  ===========================================
  JAVASCRIPT FUNCTIONALITY - DO NOT MODIFY
  ===========================================
  The script below handles all the rich text editor functionality.
  Only modify if you know what you're doing.
-->

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Find all rich text editors
  const editors = document.querySelectorAll('[data-ms-code="rich-text-editor"]');
  
  editors.forEach(function(textarea) {
    // Hide original textarea
    textarea.style.display = 'none';
    
    // Create editor container
    const editorContainer = document.createElement('div');
    editorContainer.className = 'rich-text-editor';
    
    // Create toolbar
    const toolbar = document.createElement('div');
    toolbar.className = 'toolbar';
    toolbar.innerHTML = `
      <button type="button" data-command="formatBlock" data-value="h1">H1</button>
      <button type="button" data-command="formatBlock" data-value="h2">H2</button>
      <button type="button" data-command="formatBlock" data-value="h3">H3</button>
      <button type="button" data-command="formatBlock" data-value="p">P</button>
      <button type="button" data-command="bold"><b>B</b></button>
      <button type="button" data-command="italic"><i>I</i></button>
      <button type="button" data-command="underline"><u>U</u></button>
      <button type="button" data-command="insertUnorderedList">• List</button>
      <button type="button" data-command="insertOrderedList">1. List</button>
      <button type="button" data-command="createLink">Link</button>
      <button type="button" data-command="removeFormat">Clear</button>
    `;
    
    // Create editable content area
    const editorContent = document.createElement('div');
    editorContent.className = 'editor-content';
    editorContent.contentEditable = true;
    editorContent.innerHTML = textarea.value || '';
    
    // Assemble editor
    editorContainer.appendChild(toolbar);
    editorContainer.appendChild(editorContent);
    textarea.parentNode.insertBefore(editorContainer, textarea);
    
    // Handle toolbar buttons
    toolbar.addEventListener('click', function(e) {
      if (e.target.tagName === 'BUTTON') {
        e.preventDefault();
        const command = e.target.dataset.command;
        const value = e.target.dataset.value;
        
        if (command === 'createLink') {
          handleLinkCreation();
        } else if (command === 'formatBlock') {
          document.execCommand('formatBlock', false, value);
        } else {
          document.execCommand(command, false, null);
        }
        
        // Update button states
        updateToolbarStates();
        
        // Update hidden field
        updateHiddenField();
      }
    });
    
    // Handle link creation without popup
    function handleLinkCreation() {
      const selection = window.getSelection();
      const selectedText = selection.toString().trim();
      
      if (selectedText) {
        // Store the selection range to restore it later
        const range = selection.getRangeAt(0);
        // Create a temporary input field for URL entry
        const linkInput = document.createElement('div');
        linkInput.className = 'link-input-overlay';
        linkInput.innerHTML = `
          <div class="link-input-container">
            <label>Enter URL for "${selectedText}":</label>
            <input type="url" placeholder="https://example.com" class="link-url-input">
            <div class="link-input-buttons">
              <button type="button" class="link-cancel-btn">Cancel</button>
              <button type="button" class="link-create-btn">Create Link</button>
            </div>
          </div>
        `;
        
        // Add styles for the input overlay
        const overlayStyles = `...`; // (Styles unchanged, truncated here for brevity)
        
        // Add styles if not already added
        if (!document.querySelector('#link-input-styles')) {
          const styleSheet = document.createElement('style');
          styleSheet.id = 'link-input-styles';
          styleSheet.textContent = overlayStyles;
          document.head.appendChild(styleSheet);
        }
        
        // (Remaining logic unchanged — handles link creation, cancel, enter/escape keys, etc.)
      }
    }
    
    // Update toolbar button states
    function updateToolbarStates() { ... }
    
    // Update hidden field with HTML content
    function updateHiddenField() { ... }
    
    // Handle content changes
    editorContent.addEventListener('input', function() {
      updateHiddenField();
    });
    
    // Handle selection changes for toolbar states
    editorContent.addEventListener('mouseup', updateToolbarStates);
    editorContent.addEventListener('keyup', updateToolbarStates);
    
    // Initial update
    updateHiddenField();
    
    // Handle form submission
    const form = document.querySelector('[data-ms-code="rich-text-form"]');
    if (form) {
      form.addEventListener('submit', function() {
        updateHiddenField();
      });
    }
  });
});
</script>
Voir le Memberscript
UX
Visibilité conditionnelle

#178 - Rewrite Text When User Logged In

Rewrite text on your Webflow site to show different messages for logged-in and logged-out users.


<!-- 💙 MEMBERSCRIPT #178 v0.1 REWRITE TEXT WHEN USER IS LOGGED IN 💙 -->

<script>
async function getMemberData() {
  if (!window.$memberstackDom) {
    return null;
  }
  
  try {
    const member = await window.$memberstackDom.getCurrentMember();
    return member;
  } catch (error) {
    return null;
  }
}

function updateText(member) {
  const textElements = document.querySelectorAll('[data-ms-code="text-rewrite"]');
  
  textElements.forEach((el) => {
    if (!el.hasAttribute("data-ms-original-text")) {
      el.setAttribute("data-ms-original-text", el.textContent.trim());
    }

    const originalText = el.getAttribute("data-ms-original-text");
    const loggedInText = el.getAttribute("data-ms-logged-in-text");
    
    const isLoggedIn = member && member.data && member.data.id;
    
    if (isLoggedIn) {
      if (loggedInText) {
        el.textContent = loggedInText;
        el.classList.add("ms-logged-in");
      }
    } else {
      el.textContent = originalText;
      el.classList.remove("ms-logged-in");
    }
  });
}

async function initialize() {
  let attempts = 0;
  while (!window.$memberstackDom && attempts < 50) {
    await new Promise(resolve => setTimeout(resolve, 100));
    attempts++;
  }
  
  const member = await getMemberData();
  updateText(member);
}

function tryInitialize() {
  initialize();
  
  setTimeout(initialize, 500);
  setTimeout(initialize, 1000);
  setTimeout(initialize, 2000);
}

tryInitialize();

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', tryInitialize);
} else {
  tryInitialize();
}

document.addEventListener('msLogin', async () => {
  setTimeout(async () => {
    const member = await getMemberData();
    updateText(member);
  }, 200);
});

document.addEventListener('msLogout', () => {
  updateText(null);
});
</script>
v0.1

<!-- 💙 MEMBERSCRIPT #178 v0.1 REWRITE TEXT WHEN USER IS LOGGED IN 💙 -->

<script>
async function getMemberData() {
  if (!window.$memberstackDom) {
    return null;
  }
  
  try {
    const member = await window.$memberstackDom.getCurrentMember();
    return member;
  } catch (error) {
    return null;
  }
}

function updateText(member) {
  const textElements = document.querySelectorAll('[data-ms-code="text-rewrite"]');
  
  textElements.forEach((el) => {
    if (!el.hasAttribute("data-ms-original-text")) {
      el.setAttribute("data-ms-original-text", el.textContent.trim());
    }

    const originalText = el.getAttribute("data-ms-original-text");
    const loggedInText = el.getAttribute("data-ms-logged-in-text");
    
    const isLoggedIn = member && member.data && member.data.id;
    
    if (isLoggedIn) {
      if (loggedInText) {
        el.textContent = loggedInText;
        el.classList.add("ms-logged-in");
      }
    } else {
      el.textContent = originalText;
      el.classList.remove("ms-logged-in");
    }
  });
}

async function initialize() {
  let attempts = 0;
  while (!window.$memberstackDom && attempts < 50) {
    await new Promise(resolve => setTimeout(resolve, 100));
    attempts++;
  }
  
  const member = await getMemberData();
  updateText(member);
}

function tryInitialize() {
  initialize();
  
  setTimeout(initialize, 500);
  setTimeout(initialize, 1000);
  setTimeout(initialize, 2000);
}

tryInitialize();

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', tryInitialize);
} else {
  tryInitialize();
}

document.addEventListener('msLogin', async () => {
  setTimeout(async () => {
    const member = await getMemberData();
    updateText(member);
  }, 200);
});

document.addEventListener('msLogout', () => {
  updateText(null);
});
</script>
Voir le Memberscript
Champs personnalisés
UX

#177 - Disable Auth Buttons Until required fields are completed

Automatically disables your form’s sign-up or login buttons until all required fields are filled.


<!-- 💙 MEMBERSCRIPT #177 v0.1 DISABLE AUTH BUTTONS UNTIL REQUIRED FIELDS ARE COMPLETED 💙 -->

<script>
document.addEventListener('DOMContentLoaded', function() {
  const AUTH_BUTTON_SELECTORS = [
    '[data-ms-code="auth-button"]',
    '[data-ms-auth-provider]',
    'button[type="submit"]',
    'input[type="submit"]',
    '.ms-auth-button',
    '.auth-submit'
  ];
  
  const REQUIRED_FIELD_SELECTORS = [
    'input[required]',
    'textarea[required]',
    'select[required]',
    '[data-ms-member][required]',
    '[data-ms-code="required-field"]',
    '[data-ms-required]'
  ];

  const authButtons = [];
  const requiredFields = [];

  AUTH_BUTTON_SELECTORS.forEach(selector => {
    document.querySelectorAll(selector).forEach(button => authButtons.push(button));
  });

  REQUIRED_FIELD_SELECTORS.forEach(selector => {
    document.querySelectorAll(selector).forEach(field => requiredFields.push(field));
  });

  const uniqueAuthButtons = [...new Set(authButtons)];
  const uniqueRequiredFields = [...new Set(requiredFields)];

  function checkRequiredFields() {
    let allFilled = true;
    
    uniqueRequiredFields.forEach(field => {
      if (field.type === 'checkbox' || field.type === 'radio') {
        if (!field.checked) allFilled = false;
      } else if (field.type === 'select-one') {
        if (!field.value || field.value === '' || field.value === field.querySelector('option[value=""]')?.value) {
          allFilled = false;
        }
      } else {
        if (!field.value || field.value.trim() === '') allFilled = false;
      }
    });

    uniqueAuthButtons.forEach(button => {
      if (allFilled) {
        button.disabled = false;
        button.style.opacity = '1';
        button.style.cursor = 'pointer';
        button.classList.remove('disabled', 'ms-disabled');
      } else {
        button.disabled = true;
        button.style.opacity = '0.5';
        button.style.cursor = 'not-allowed';
        button.classList.add('disabled', 'ms-disabled');
      }
    });
  }

  uniqueRequiredFields.forEach(field => {
    field.addEventListener('input', checkRequiredFields);
    field.addEventListener('change', checkRequiredFields);
    field.addEventListener('paste', () => setTimeout(checkRequiredFields, 10));
  });

  checkRequiredFields();

  const style = document.createElement('style');
  style.textContent = `
    .ms-disabled {
      opacity: 0.5 !important;
      cursor: not-allowed !important;
      pointer-events: none !important;
    }
    .ms-disabled:hover {
      transform: none !important;
      box-shadow: none !important;
    }
  `;
  document.head.appendChild(style);
});
</script>
v0.1

<!-- 💙 MEMBERSCRIPT #177 v0.1 DISABLE AUTH BUTTONS UNTIL REQUIRED FIELDS ARE COMPLETED 💙 -->

<script>
document.addEventListener('DOMContentLoaded', function() {
  const AUTH_BUTTON_SELECTORS = [
    '[data-ms-code="auth-button"]',
    '[data-ms-auth-provider]',
    'button[type="submit"]',
    'input[type="submit"]',
    '.ms-auth-button',
    '.auth-submit'
  ];
  
  const REQUIRED_FIELD_SELECTORS = [
    'input[required]',
    'textarea[required]',
    'select[required]',
    '[data-ms-member][required]',
    '[data-ms-code="required-field"]',
    '[data-ms-required]'
  ];

  const authButtons = [];
  const requiredFields = [];

  AUTH_BUTTON_SELECTORS.forEach(selector => {
    document.querySelectorAll(selector).forEach(button => authButtons.push(button));
  });

  REQUIRED_FIELD_SELECTORS.forEach(selector => {
    document.querySelectorAll(selector).forEach(field => requiredFields.push(field));
  });

  const uniqueAuthButtons = [...new Set(authButtons)];
  const uniqueRequiredFields = [...new Set(requiredFields)];

  function checkRequiredFields() {
    let allFilled = true;
    
    uniqueRequiredFields.forEach(field => {
      if (field.type === 'checkbox' || field.type === 'radio') {
        if (!field.checked) allFilled = false;
      } else if (field.type === 'select-one') {
        if (!field.value || field.value === '' || field.value === field.querySelector('option[value=""]')?.value) {
          allFilled = false;
        }
      } else {
        if (!field.value || field.value.trim() === '') allFilled = false;
      }
    });

    uniqueAuthButtons.forEach(button => {
      if (allFilled) {
        button.disabled = false;
        button.style.opacity = '1';
        button.style.cursor = 'pointer';
        button.classList.remove('disabled', 'ms-disabled');
      } else {
        button.disabled = true;
        button.style.opacity = '0.5';
        button.style.cursor = 'not-allowed';
        button.classList.add('disabled', 'ms-disabled');
      }
    });
  }

  uniqueRequiredFields.forEach(field => {
    field.addEventListener('input', checkRequiredFields);
    field.addEventListener('change', checkRequiredFields);
    field.addEventListener('paste', () => setTimeout(checkRequiredFields, 10));
  });

  checkRequiredFields();

  const style = document.createElement('style');
  style.textContent = `
    .ms-disabled {
      opacity: 0.5 !important;
      cursor: not-allowed !important;
      pointer-events: none !important;
    }
    .ms-disabled:hover {
      transform: none !important;
      box-shadow: none !important;
    }
  `;
  document.head.appendChild(style);
});
</script>
Voir le Memberscript
UX
Accessibilité

#176 - Save & Display Last Used Auth Method

Displays a popup showing the last login method a member used to make logging in easier.

Code de la tête

Place this in your page <head>


<style>
.ms-popup-badge { /* CHANGE THE STYLE OF THE BADGE*/
    position: absolute;
    background: #2d62ff;
    color: white;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    user-select: none;
}

.ms-popup-badge::before {
    font-size: 14px;
    font-weight: bold;
}

.ms-popup-badge .ms-popup-text {
    font-size: 12px;
    font-weight: 600;
}

/* Animation keyframes */
@keyframes ms-badge-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ms-badge-fade-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.9);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ms-popup-badge {
        font-size: 11px;
        padding: 6px 12px;
    }
    
    .ms-popup-badge .ms-popup-text {
        font-size: 11px;
    }
}
</style>

Code du corps

Place this in your page </body>


<!-- 💙 MEMBERSCRIPT #176 v0.1 💙 - SAVE AND DISPLAY LAST AUTH METHOD -->

<script>
(function() {
    'use strict';
    
    const STORAGE_KEY = 'ms_last_auth_method';
    
    // Auth method display names
    const AUTH_METHOD_NAMES = {
        'email': 'Email & Password',
        'google': 'Google',
        'facebook': 'Facebook',
        'github': 'GitHub',
        'linkedin': 'LinkedIn',
        'twitter': 'Twitter',
        'apple': 'Apple',
        'microsoft': 'Microsoft',
        'discord': 'Discord',
        'spotify': 'Spotify',
        'dribbble': 'Dribbble'
    };
    
    function getAuthMethodDisplayName(method) {
        return AUTH_METHOD_NAMES[method] || method.charAt(0).toUpperCase() + method.slice(1);
    }

    function saveAuthMethod(method) {
        if (method) localStorage.setItem(STORAGE_KEY, method);
    }

    function getLastAuthMethod() {
        return localStorage.getItem(STORAGE_KEY);
    }

    function showPopupTag(method) {
        if (!method) return;

        document.querySelectorAll('.ms-popup-badge').forEach(badge => badge.remove());

        let targetElement;
        if (method === 'email') {
            targetElement = document.querySelector('[data-ms-member="email"]') || 
                             document.querySelector('input[type="email"]') ||
                             document.querySelector('input[name="email"]');
        } else {
            targetElement = document.querySelector(`[data-ms-auth-provider="${method}"]`);
        }
        
        if (!targetElement) {
            console.log('Memberstack: Target element not found for method:', method);
            return;
        }

        const authMethodName = getAuthMethodDisplayName(method);
        const badge = document.createElement('div');
        badge.className = 'ms-popup-badge';
        badge.innerHTML = `<span class="ms-popup-text">Last Auth Method Used: ${authMethodName}</span>`;

        const elementRect = targetElement.getBoundingClientRect();
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;

        document.body.appendChild(badge);

        badge.style.position = 'absolute';
        badge.style.top = (elementRect.top + scrollTop - 40) + 'px';
        badge.style.left = (elementRect.right + scrollLeft - 200) + 'px';

        badge.style.opacity = '0';
        badge.style.transform = 'translateY(10px) scale(0.9)';
        
        requestAnimationFrame(() => {
            badge.style.transition = 'all 0.3s ease-out';
            badge.style.opacity = '1';
            badge.style.transform = 'translateY(0) scale(1)';
        });

        setTimeout(() => {
            badge.style.transition = 'all 0.3s ease-in';
            badge.style.opacity = '0';
            badge.style.transform = 'translateY(-10px) scale(0.9)';
            setTimeout(() => {
                if (badge.parentNode) {
                    badge.parentNode.removeChild(badge);
                }
            }, 300);
        }, 8000);
    }

    function handleEmailPasswordLogin() {
        const emailForm = document.querySelector('[data-ms-form="login"]');
        if (emailForm) {
            emailForm.addEventListener('submit', () => {
                setTimeout(() => saveAuthMethod('email'), 100);
            });
        }
    }

    function handleSocialAuthClicks() {
        document.querySelectorAll('[data-ms-auth-provider]').forEach(button => {
            button.addEventListener('click', function() {
                const provider = this.getAttribute('data-ms-auth-provider');
                if (provider) saveAuthMethod(provider);
            });
        });

        document.addEventListener('ms:auth:start', e => {
            const provider = e.detail?.provider || e.detail?.authMethod;
            if (provider) saveAuthMethod(provider);
        });
    }

    function init() {
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', init);
            return;
        }

        handleEmailPasswordLogin();
        handleSocialAuthClicks();

        const lastMethod = getLastAuthMethod();
        if (lastMethod) showPopupTag(lastMethod);

        document.addEventListener('ms:auth:success', e => {
            const method = e.detail?.method || e.detail?.provider || 'email';
            saveAuthMethod(method);
            showPopupTag(method);
        });
    }

    init();
})();
</script>
v0.1

Code de la tête

Place this in your page <head>


<style>
.ms-popup-badge { /* CHANGE THE STYLE OF THE BADGE*/
    position: absolute;
    background: #2d62ff;
    color: white;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    user-select: none;
}

.ms-popup-badge::before {
    font-size: 14px;
    font-weight: bold;
}

.ms-popup-badge .ms-popup-text {
    font-size: 12px;
    font-weight: 600;
}

/* Animation keyframes */
@keyframes ms-badge-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ms-badge-fade-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.9);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ms-popup-badge {
        font-size: 11px;
        padding: 6px 12px;
    }
    
    .ms-popup-badge .ms-popup-text {
        font-size: 11px;
    }
}
</style>

Code du corps

Place this in your page </body>


<!-- 💙 MEMBERSCRIPT #176 v0.1 💙 - SAVE AND DISPLAY LAST AUTH METHOD -->

<script>
(function() {
    'use strict';
    
    const STORAGE_KEY = 'ms_last_auth_method';
    
    // Auth method display names
    const AUTH_METHOD_NAMES = {
        'email': 'Email & Password',
        'google': 'Google',
        'facebook': 'Facebook',
        'github': 'GitHub',
        'linkedin': 'LinkedIn',
        'twitter': 'Twitter',
        'apple': 'Apple',
        'microsoft': 'Microsoft',
        'discord': 'Discord',
        'spotify': 'Spotify',
        'dribbble': 'Dribbble'
    };
    
    function getAuthMethodDisplayName(method) {
        return AUTH_METHOD_NAMES[method] || method.charAt(0).toUpperCase() + method.slice(1);
    }

    function saveAuthMethod(method) {
        if (method) localStorage.setItem(STORAGE_KEY, method);
    }

    function getLastAuthMethod() {
        return localStorage.getItem(STORAGE_KEY);
    }

    function showPopupTag(method) {
        if (!method) return;

        document.querySelectorAll('.ms-popup-badge').forEach(badge => badge.remove());

        let targetElement;
        if (method === 'email') {
            targetElement = document.querySelector('[data-ms-member="email"]') || 
                             document.querySelector('input[type="email"]') ||
                             document.querySelector('input[name="email"]');
        } else {
            targetElement = document.querySelector(`[data-ms-auth-provider="${method}"]`);
        }
        
        if (!targetElement) {
            console.log('Memberstack: Target element not found for method:', method);
            return;
        }

        const authMethodName = getAuthMethodDisplayName(method);
        const badge = document.createElement('div');
        badge.className = 'ms-popup-badge';
        badge.innerHTML = `<span class="ms-popup-text">Last Auth Method Used: ${authMethodName}</span>`;

        const elementRect = targetElement.getBoundingClientRect();
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;

        document.body.appendChild(badge);

        badge.style.position = 'absolute';
        badge.style.top = (elementRect.top + scrollTop - 40) + 'px';
        badge.style.left = (elementRect.right + scrollLeft - 200) + 'px';

        badge.style.opacity = '0';
        badge.style.transform = 'translateY(10px) scale(0.9)';
        
        requestAnimationFrame(() => {
            badge.style.transition = 'all 0.3s ease-out';
            badge.style.opacity = '1';
            badge.style.transform = 'translateY(0) scale(1)';
        });

        setTimeout(() => {
            badge.style.transition = 'all 0.3s ease-in';
            badge.style.opacity = '0';
            badge.style.transform = 'translateY(-10px) scale(0.9)';
            setTimeout(() => {
                if (badge.parentNode) {
                    badge.parentNode.removeChild(badge);
                }
            }, 300);
        }, 8000);
    }

    function handleEmailPasswordLogin() {
        const emailForm = document.querySelector('[data-ms-form="login"]');
        if (emailForm) {
            emailForm.addEventListener('submit', () => {
                setTimeout(() => saveAuthMethod('email'), 100);
            });
        }
    }

    function handleSocialAuthClicks() {
        document.querySelectorAll('[data-ms-auth-provider]').forEach(button => {
            button.addEventListener('click', function() {
                const provider = this.getAttribute('data-ms-auth-provider');
                if (provider) saveAuthMethod(provider);
            });
        });

        document.addEventListener('ms:auth:start', e => {
            const provider = e.detail?.provider || e.detail?.authMethod;
            if (provider) saveAuthMethod(provider);
        });
    }

    function init() {
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', init);
            return;
        }

        handleEmailPasswordLogin();
        handleSocialAuthClicks();

        const lastMethod = getLastAuthMethod();
        if (lastMethod) showPopupTag(lastMethod);

        document.addEventListener('ms:auth:success', e => {
            const method = e.detail?.method || e.detail?.provider || 'email';
            saveAuthMethod(method);
            showPopupTag(method);
        });
    }

    init();
})();
</script>
Voir le Memberscript
UX

#175 - Create a Stripe payment link from Webflow Form Submission

Allow your members to submit a product through a Webflow form and automatically create a Stripe product.

v0.1
Voir le Memberscript
Marketing

#174 - Simple Referral Program

Create a simple referral program that generates unique links, adds copy & share buttons, and tracks clicks.


<!-- 💙 MEMBERSCRIPT #174 v0.1 SIMPLE REFERRAL PROGRAM 💙 -->

<script>
(function() {
  'use strict';

  const CONFIG = {
    baseUrl: window.location.origin,
    referralParam: 'ref',
    trackingParam: 'utm_source',
    trackingValue: 'member_referral',
    webhookUrl: 'https://hook.eu2.make.com/1mfnxnmrkbl4e8tsyh8ob7kxuuauoc61' // REPLACE WITH YOUR WEBHOOK
  };

  let member = null;

  document.readyState === 'loading'
    ? document.addEventListener('DOMContentLoaded', init)
    : init();

  async function init() {
    await loadMember();

    if (member?.id) {
      const referralUrl = generateReferralUrl(member.id);

      // Populate the input field
      const input = document.querySelector('[data-ms-code="referral-url-input"]');
      if (input) {
        input.value = referralUrl;
        input.setAttribute('readonly', 'readonly');
      }

      // Attach to all buttons inside the container
      const buttons = document.querySelectorAll('[data-ms-code="referral-link"] a');
      buttons.forEach((btn) => {
        if (btn.dataset.msAction === 'copy') {
          btn.addEventListener('click', (e) => {
            e.preventDefault();
            copyToClipboard(referralUrl, btn);
          });
        }
        if (btn.dataset.msAction === 'share') {
          btn.addEventListener('click', (e) => {
            e.preventDefault();
            shareLink(referralUrl);
          });
        }
      });
    }

    trackReferralClick();
  }

  async function loadMember() {
    try {
      if (window.$memberstackDom) {
        const { data } = await window.$memberstackDom.getCurrentMember();
        member = data;
      }
    } catch {}
  }

  function generateReferralUrl(memberId) {
    const url = new URL(CONFIG.baseUrl);
    url.searchParams.set(CONFIG.referralParam, memberId);
    url.searchParams.set(CONFIG.trackingParam, CONFIG.trackingValue);
    return url.toString();
  }

  function copyToClipboard(text, btn) {
    navigator.clipboard.writeText(text).then(() => {
      showFeedback(btn, 'Copied!');
    }).catch(() => {
      showFeedback(btn, 'Failed to copy');
    });
  }

  function showFeedback(btn, msg) {
    const original = btn.textContent;
    btn.textContent = msg;
    setTimeout(() => {
      btn.textContent = original;
    }, 2000);
  }

  function shareLink(url) {
    if (navigator.share) {
      navigator.share({
        title: 'Join me!',
        text: 'Use my referral link:',
        url: url
      });
    } else {
      navigator.clipboard.writeText(url);
      alert('Referral link copied: ' + url);
    }
  }

  function trackReferralClick() {
    const urlParams = new URLSearchParams(window.location.search);
    const referrerId = urlParams.get(CONFIG.referralParam);
    if (!referrerId) return;

    const visitorId = 'visitor_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);

    const referralData = {
      referrerId,
      visitorId,
      timestamp: Date.now(),
      userAgent: navigator.userAgent,
      referrer: document.referrer || null,
      landingPage: window.location.href
    };

    fetch(CONFIG.webhookUrl, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(referralData)
    }).catch(() => {});
  }

})();
</script>
v0.1

<!-- 💙 MEMBERSCRIPT #174 v0.1 SIMPLE REFERRAL PROGRAM 💙 -->

<script>
(function() {
  'use strict';

  const CONFIG = {
    baseUrl: window.location.origin,
    referralParam: 'ref',
    trackingParam: 'utm_source',
    trackingValue: 'member_referral',
    webhookUrl: 'https://hook.eu2.make.com/1mfnxnmrkbl4e8tsyh8ob7kxuuauoc61' // REPLACE WITH YOUR WEBHOOK
  };

  let member = null;

  document.readyState === 'loading'
    ? document.addEventListener('DOMContentLoaded', init)
    : init();

  async function init() {
    await loadMember();

    if (member?.id) {
      const referralUrl = generateReferralUrl(member.id);

      // Populate the input field
      const input = document.querySelector('[data-ms-code="referral-url-input"]');
      if (input) {
        input.value = referralUrl;
        input.setAttribute('readonly', 'readonly');
      }

      // Attach to all buttons inside the container
      const buttons = document.querySelectorAll('[data-ms-code="referral-link"] a');
      buttons.forEach((btn) => {
        if (btn.dataset.msAction === 'copy') {
          btn.addEventListener('click', (e) => {
            e.preventDefault();
            copyToClipboard(referralUrl, btn);
          });
        }
        if (btn.dataset.msAction === 'share') {
          btn.addEventListener('click', (e) => {
            e.preventDefault();
            shareLink(referralUrl);
          });
        }
      });
    }

    trackReferralClick();
  }

  async function loadMember() {
    try {
      if (window.$memberstackDom) {
        const { data } = await window.$memberstackDom.getCurrentMember();
        member = data;
      }
    } catch {}
  }

  function generateReferralUrl(memberId) {
    const url = new URL(CONFIG.baseUrl);
    url.searchParams.set(CONFIG.referralParam, memberId);
    url.searchParams.set(CONFIG.trackingParam, CONFIG.trackingValue);
    return url.toString();
  }

  function copyToClipboard(text, btn) {
    navigator.clipboard.writeText(text).then(() => {
      showFeedback(btn, 'Copied!');
    }).catch(() => {
      showFeedback(btn, 'Failed to copy');
    });
  }

  function showFeedback(btn, msg) {
    const original = btn.textContent;
    btn.textContent = msg;
    setTimeout(() => {
      btn.textContent = original;
    }, 2000);
  }

  function shareLink(url) {
    if (navigator.share) {
      navigator.share({
        title: 'Join me!',
        text: 'Use my referral link:',
        url: url
      });
    } else {
      navigator.clipboard.writeText(url);
      alert('Referral link copied: ' + url);
    }
  }

  function trackReferralClick() {
    const urlParams = new URLSearchParams(window.location.search);
    const referrerId = urlParams.get(CONFIG.referralParam);
    if (!referrerId) return;

    const visitorId = 'visitor_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);

    const referralData = {
      referrerId,
      visitorId,
      timestamp: Date.now(),
      userAgent: navigator.userAgent,
      referrer: document.referrer || null,
      landingPage: window.location.href
    };

    fetch(CONFIG.webhookUrl, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(referralData)
    }).catch(() => {});
  }

})();
</script>
Voir le Memberscript
UX

#173 - CMS Chatbot Assistant

Build a Webflow chatbot that dynamically loads help articles from collection lists and updates in real time.


<!-- 💙 MEMBERSCRIPT #173 v0.1 💙 - CMS BASED CHATBOT ASSISTANT -->

<script>
(function() {
  'use strict';

  const CONFIG = {
    primary: '#2d62ff', // CHANGE THIS
    maxResults: 3, // CHANGE THIS
    helpPath: '/post/' // CHANGE THIS
  };

  let kb = [], member = null, open = false, history = [];
  let conversationContext = { lastQuery: '', topics: [] };

  document.readyState === 'loading' ? 
    document.addEventListener('DOMContentLoaded', init) : init();

  async function init() {
    await loadMember();
    createUI(); 
    setupEvents();
    await loadKB(); 
  }

  async function loadMember() {
    try {
      if (window.$memberstackDom) {
        const { data } = await window.$memberstackDom.getCurrentMember();
        member = data;
      }
    } catch {}
  }

  async function loadKB() {
    const articles = document.querySelectorAll('[data-ms-code="kb-article"]');
    if (articles.length > 0) return loadArticlesFromElements(articles);

    if (!window.location.pathname.includes('/help')) {
      return loadKnowledgeBaseFromHelpPage();
    }

    const wrappers = Array.from(document.querySelectorAll('[data-ms-code="kb-article"]'))
                          .map(el => el.parentElement)
                          .filter((v,i,a) => v && a.indexOf(v) === i);

    if (wrappers.length === 0) return [];

    const kbSet = new Set();

    wrappers.forEach(wrapper => {
      const observer = new MutationObserver(() => {
        const articles = wrapper.querySelectorAll('[data-ms-code="kb-article"]');
        if (articles.length > 0) {
          Array.from(articles).forEach(el => {
            const titleEl = el.querySelector('[data-ms-code="kb-title"]');
            const contentEl = el.querySelector('[data-ms-code="kb-content"]');
            const categoriesEl = el.querySelector('[data-ms-code="kb-categories"]');
            const slugEl = el.querySelector('[data-ms-code="kb-slug"]');

            const title = titleEl?.textContent?.trim() || '';
            const content = contentEl?.textContent?.trim() || '';
            const categoriesText = categoriesEl?.textContent?.trim() || '';
            const slug = slugEl?.textContent?.trim() || `article-${kb.length}`;

            if (!title || kbSet.has(title)) return;

            const categories = categoriesText ? categoriesText.split(',').map(c => c.trim().toLowerCase()).filter(c => c) : [];

            kb.push({ id: kb.length, title, content, slug, categories });
            kbSet.add(title);
          });

          conversationContext.topics = kb.map(a => a.title);
          updateWelcomeMessage(kb.length);
        }
      });

      observer.observe(wrapper, { childList: true, subtree: true });
    });

    return kb;
  }

  async function loadKnowledgeBaseFromHelpPage() {
    try {
      const response = await fetch('/help');
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      
      const html = await response.text();
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, 'text/html');
      
      const articles = doc.querySelectorAll('[data-ms-code="kb-article"]');
      if (articles.length > 0) {
        const kbData = loadArticlesFromElements(articles);
        return kbData;
      } else return [];
      
    } catch {
      return [];
    }
  }

  function loadArticlesFromElements(articles) {
    const uniqueArticles = new Map();
    
    Array.from(articles).forEach((el, i) => {
      const titleEl = el.querySelector('[data-ms-code="kb-title"]');
      const contentEl = el.querySelector('[data-ms-code="kb-content"]');
      const categoriesEl = el.querySelector('[data-ms-code="kb-categories"]');
      const slugEl = el.querySelector('[data-ms-code="kb-slug"]');
      
      const title = titleEl?.textContent?.trim() || '';
      const content = contentEl?.textContent?.trim() || '';
      const categoriesText = categoriesEl?.textContent?.trim() || '';
      const slug = slugEl?.textContent?.trim() || `article-${i}`;
      
      const categories = categoriesText ? categoriesText.split(',').map(c => c.trim().toLowerCase()).filter(c => c) : [];
      
      if (uniqueArticles.has(title)) return;
      
      uniqueArticles.set(title, {
        id: uniqueArticles.size,
        title,
        content,
        slug,
        categories
      });
    });
    
    kb = Array.from(uniqueArticles.values()).filter(a => a.title && a.content);
    conversationContext.topics = kb.map(a => a.title);

    updateWelcomeMessage(kb.length);

    return kb;
  }

  function updateWelcomeMessage(articleCount) {
    setTimeout(() => {
      const messages = document.getElementById('ms-messages');
      if (messages) {
        const firstBubble = messages.querySelector('div');
        if (firstBubble) {
          firstBubble.innerHTML = `👋 Ask me anything! I can help with ${articleCount} topics.`;
        }
      }
    }, 100);
  }

  function createUI() {
    const trigger = document.createElement('div');
    trigger.id = 'ms-chatbot';
    trigger.innerHTML = `<div id="ms-chat-button" onclick="MemberscriptChat.toggle()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/><path d="M8 12h.01"/><path d="M12 12h.01"/><path d="M16 12h.01"/></svg></div>`;

    const widget = document.createElement('div');
    widget.id = 'ms-chat-window';
    widget.innerHTML = `... (truncated for brevity) ...`; // Keep full inner HTML here as in original

    document.body.appendChild(trigger);
    document.body.appendChild(widget);
  }

  function setupEvents() {}
  function toggle() { ... }
  function close() { ... }
  function send() { ... }
  function search(query) { ... }
  function generateFollowUpSuggestions(results) { ... }
  function generateIntelligentFallback(query) { ... }
  function addMsg(sender,text){ ... }

  window.MemberscriptChat={
    toggle, 
    close, 
    send, 
    ask: q => { document.getElementById('ms-input').value = q; send(); }, 
    history: () => history,
    reloadFromHelp: async () => {
      const kbData = await loadKnowledgeBaseFromHelpPage();
      if (kbData.length > 0) updateWelcomeMessage(kbData.length);
      return kbData;
    }
  };

})();
</script>
v0.1

<!-- 💙 MEMBERSCRIPT #173 v0.1 💙 - CMS BASED CHATBOT ASSISTANT -->

<script>
(function() {
  'use strict';

  const CONFIG = {
    primary: '#2d62ff', // CHANGE THIS
    maxResults: 3, // CHANGE THIS
    helpPath: '/post/' // CHANGE THIS
  };

  let kb = [], member = null, open = false, history = [];
  let conversationContext = { lastQuery: '', topics: [] };

  document.readyState === 'loading' ? 
    document.addEventListener('DOMContentLoaded', init) : init();

  async function init() {
    await loadMember();
    createUI(); 
    setupEvents();
    await loadKB(); 
  }

  async function loadMember() {
    try {
      if (window.$memberstackDom) {
        const { data } = await window.$memberstackDom.getCurrentMember();
        member = data;
      }
    } catch {}
  }

  async function loadKB() {
    const articles = document.querySelectorAll('[data-ms-code="kb-article"]');
    if (articles.length > 0) return loadArticlesFromElements(articles);

    if (!window.location.pathname.includes('/help')) {
      return loadKnowledgeBaseFromHelpPage();
    }

    const wrappers = Array.from(document.querySelectorAll('[data-ms-code="kb-article"]'))
                          .map(el => el.parentElement)
                          .filter((v,i,a) => v && a.indexOf(v) === i);

    if (wrappers.length === 0) return [];

    const kbSet = new Set();

    wrappers.forEach(wrapper => {
      const observer = new MutationObserver(() => {
        const articles = wrapper.querySelectorAll('[data-ms-code="kb-article"]');
        if (articles.length > 0) {
          Array.from(articles).forEach(el => {
            const titleEl = el.querySelector('[data-ms-code="kb-title"]');
            const contentEl = el.querySelector('[data-ms-code="kb-content"]');
            const categoriesEl = el.querySelector('[data-ms-code="kb-categories"]');
            const slugEl = el.querySelector('[data-ms-code="kb-slug"]');

            const title = titleEl?.textContent?.trim() || '';
            const content = contentEl?.textContent?.trim() || '';
            const categoriesText = categoriesEl?.textContent?.trim() || '';
            const slug = slugEl?.textContent?.trim() || `article-${kb.length}`;

            if (!title || kbSet.has(title)) return;

            const categories = categoriesText ? categoriesText.split(',').map(c => c.trim().toLowerCase()).filter(c => c) : [];

            kb.push({ id: kb.length, title, content, slug, categories });
            kbSet.add(title);
          });

          conversationContext.topics = kb.map(a => a.title);
          updateWelcomeMessage(kb.length);
        }
      });

      observer.observe(wrapper, { childList: true, subtree: true });
    });

    return kb;
  }

  async function loadKnowledgeBaseFromHelpPage() {
    try {
      const response = await fetch('/help');
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      
      const html = await response.text();
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, 'text/html');
      
      const articles = doc.querySelectorAll('[data-ms-code="kb-article"]');
      if (articles.length > 0) {
        const kbData = loadArticlesFromElements(articles);
        return kbData;
      } else return [];
      
    } catch {
      return [];
    }
  }

  function loadArticlesFromElements(articles) {
    const uniqueArticles = new Map();
    
    Array.from(articles).forEach((el, i) => {
      const titleEl = el.querySelector('[data-ms-code="kb-title"]');
      const contentEl = el.querySelector('[data-ms-code="kb-content"]');
      const categoriesEl = el.querySelector('[data-ms-code="kb-categories"]');
      const slugEl = el.querySelector('[data-ms-code="kb-slug"]');
      
      const title = titleEl?.textContent?.trim() || '';
      const content = contentEl?.textContent?.trim() || '';
      const categoriesText = categoriesEl?.textContent?.trim() || '';
      const slug = slugEl?.textContent?.trim() || `article-${i}`;
      
      const categories = categoriesText ? categoriesText.split(',').map(c => c.trim().toLowerCase()).filter(c => c) : [];
      
      if (uniqueArticles.has(title)) return;
      
      uniqueArticles.set(title, {
        id: uniqueArticles.size,
        title,
        content,
        slug,
        categories
      });
    });
    
    kb = Array.from(uniqueArticles.values()).filter(a => a.title && a.content);
    conversationContext.topics = kb.map(a => a.title);

    updateWelcomeMessage(kb.length);

    return kb;
  }

  function updateWelcomeMessage(articleCount) {
    setTimeout(() => {
      const messages = document.getElementById('ms-messages');
      if (messages) {
        const firstBubble = messages.querySelector('div');
        if (firstBubble) {
          firstBubble.innerHTML = `👋 Ask me anything! I can help with ${articleCount} topics.`;
        }
      }
    }, 100);
  }

  function createUI() {
    const trigger = document.createElement('div');
    trigger.id = 'ms-chatbot';
    trigger.innerHTML = `<div id="ms-chat-button" onclick="MemberscriptChat.toggle()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/><path d="M8 12h.01"/><path d="M12 12h.01"/><path d="M16 12h.01"/></svg></div>`;

    const widget = document.createElement('div');
    widget.id = 'ms-chat-window';
    widget.innerHTML = `... (truncated for brevity) ...`; // Keep full inner HTML here as in original

    document.body.appendChild(trigger);
    document.body.appendChild(widget);
  }

  function setupEvents() {}
  function toggle() { ... }
  function close() { ... }
  function send() { ... }
  function search(query) { ... }
  function generateFollowUpSuggestions(results) { ... }
  function generateIntelligentFallback(query) { ... }
  function addMsg(sender,text){ ... }

  window.MemberscriptChat={
    toggle, 
    close, 
    send, 
    ask: q => { document.getElementById('ms-input').value = q; send(); }, 
    history: () => history,
    reloadFromHelp: async () => {
      const kbData = await loadKnowledgeBaseFromHelpPage();
      if (kbData.length > 0) updateWelcomeMessage(kbData.length);
      return kbData;
    }
  };

})();
</script>
Voir le Memberscript
RÉFÉRENCEMENT
Intégration

#172 - Capture Stripe Checkout Session

Track Memberstack Stripe checkouts and sends member + transaction data to your webhook.


<!-- 💙 MEMBERSCRIPT #172 v0.1 💙 - CAPTURE STRIPE CHECKOUT SESSION -->
<script>
(function() {
  'use strict';

  // Configuration object for webhook URL and debugging options
  const CONFIG = {
    WEBHOOK_URL: 'https://hook.eu2.make.com/ld2ovhwaw6fo9ufvq20lfcocmsjhr6zc', // REPLACE THIS WITH YOUR WEBHOOK URL
    TRACK_FAILURES: true,
    DEBUG: true
  };

  // Event listener to execute code once the DOM content is fully loaded
  document.addEventListener('DOMContentLoaded', async () => {
    if (CONFIG.DEBUG) console.log('Webhook-only checkout tracker initialized');

    // Fetch current member data from Memberstack
    const member = await getCurrentMember();

    // Check if the checkout was successful
    if (isCheckoutSuccess()) {
      onCheckoutSuccess(member);
    } else {
      onCheckoutFailure(member);
    }
  });

  // Function to retrieve current member data from Memberstack
  async function getCurrentMember() {
    try {
      const { data } = await window.$memberstackDom.getCurrentMember();
      if (!data) return {};
      const fn = data.customFields?.['first-name'] || data.customFields?.['first_name'] || '';
      return {
        ms_member_id: data.id || '',
        ms_email: data.auth?.email || '',
        ms_first_name: fn
      };
    } catch (e) {
      if (CONFIG.DEBUG) console.warn('Memberstack fetch error', e);
      return {};
    }
  }

  // Function to determine if the checkout was successful based on URL parameters
  function isCheckoutSuccess() {
    const p = new URLSearchParams(window.location.search);
    return p.get('fromCheckout') === 'true' && (p.has('msPriceId') || p.has('stripePriceId'));
  }

  // Function to handle successful checkout
  function onCheckoutSuccess(member) {
    if (CONFIG.DEBUG) console.log('Checkout success detected');
    const data = extractUrlData();
    sendToWebhook({ ...data, ...member }, 'checkout_success');
    setTimeout(cleanUrl, 2000);
  }

  // Function to generate or retrieve GA4 client ID
  function getGA4ClientId() {
    // Try to get existing client ID from localStorage
    let clientId = localStorage.getItem('ga4_client_id');
    
    if (!clientId) {
      // Generate new client ID if none exists
      clientId = 'GA1.1.' + Math.random().toString(36).substring(2, 15) + '.' + Date.now();
      localStorage.setItem('ga4_client_id', clientId);
    }
    
    return clientId;
  }

  // Function to extract relevant data from the URL query parameters
  function extractUrlData() {
    const p = new URLSearchParams(window.location.search);
    return {
      fromCheckout: p.get('fromCheckout'),
      msPriceId: p.get('msPriceId'),
      stripePriceId: p.get('stripePriceId'),
      planId: p.get('planId'),
      memberId: p.get('memberId'),
      transactionId: `ms_checkout_${Date.now()}_${Math.random().toString(36).substr(2,9)}`,
      timestamp: new Date().toISOString(),
      successUrl: window.location.href,
      checkout_session_id: p.get('checkout_session_id'),
      payment_intent: p.get('payment_intent'),
      amount: p.get('amount'),
      currency: p.get('currency') || 'USD',
      email: p.get('customer_email') || p.get('email'),
      subscription_id: p.get('subscription_id'),
      customer_id: p.get('customer_id'),
      payment_status: p.get('payment_status'),
      ga4_client_id: getGA4ClientId() // Add GA4 client ID
    };
  }

  // Function to send the collected data to a specified webhook URL
  async function sendToWebhook(data, type) {
    const fd = new FormData();
    fd.append('event_type', type);
    Object.entries(data).forEach(([k,v]) => v != null && fd.append(k, v));
    try {
      await fetch(CONFIG.WEBHOOK_URL, { method: 'POST', body: fd });
      if (CONFIG.DEBUG) console.log(`Data sent: ${type}`, data);
    } catch (e) {
      console.error('Webhook error', e);
    }
  }

  // Function to clean up the URL by removing specific query parameters
  function cleanUrl() {
    const url = new URL(window.location);
    ['fromCheckout','msPriceId','stripePriceId','planId','memberId','amount','currency'].forEach(p => url.searchParams.delete(p));
    window.history.replaceState({}, document.title, url.toString());
    if (CONFIG.DEBUG) console.log('URL cleaned');
  }

  // Function to handle checkout failure
  function onCheckoutFailure(member) {
    if (!CONFIG.TRACK_FAILURES) return;
    const p = new URLSearchParams(window.location.search);
    const failed = p.get('payment_status') === 'failed' || p.get('error');
    if (!failed) return;
    const data = {
      failure_url: window.location.href,
      payment_status: p.get('payment_status'),
      error: p.get('error'),
      msPriceId: p.get('msPriceId'),
      stripePriceId: p.get('stripePriceId'),
      timestamp: new Date().toISOString()
    };
    sendToWebhook({ ...data, ...member }, 'checkout_failure');
  }

})();
</script>
v0.1

<!-- 💙 MEMBERSCRIPT #172 v0.1 💙 - CAPTURE STRIPE CHECKOUT SESSION -->
<script>
(function() {
  'use strict';

  // Configuration object for webhook URL and debugging options
  const CONFIG = {
    WEBHOOK_URL: 'https://hook.eu2.make.com/ld2ovhwaw6fo9ufvq20lfcocmsjhr6zc', // REPLACE THIS WITH YOUR WEBHOOK URL
    TRACK_FAILURES: true,
    DEBUG: true
  };

  // Event listener to execute code once the DOM content is fully loaded
  document.addEventListener('DOMContentLoaded', async () => {
    if (CONFIG.DEBUG) console.log('Webhook-only checkout tracker initialized');

    // Fetch current member data from Memberstack
    const member = await getCurrentMember();

    // Check if the checkout was successful
    if (isCheckoutSuccess()) {
      onCheckoutSuccess(member);
    } else {
      onCheckoutFailure(member);
    }
  });

  // Function to retrieve current member data from Memberstack
  async function getCurrentMember() {
    try {
      const { data } = await window.$memberstackDom.getCurrentMember();
      if (!data) return {};
      const fn = data.customFields?.['first-name'] || data.customFields?.['first_name'] || '';
      return {
        ms_member_id: data.id || '',
        ms_email: data.auth?.email || '',
        ms_first_name: fn
      };
    } catch (e) {
      if (CONFIG.DEBUG) console.warn('Memberstack fetch error', e);
      return {};
    }
  }

  // Function to determine if the checkout was successful based on URL parameters
  function isCheckoutSuccess() {
    const p = new URLSearchParams(window.location.search);
    return p.get('fromCheckout') === 'true' && (p.has('msPriceId') || p.has('stripePriceId'));
  }

  // Function to handle successful checkout
  function onCheckoutSuccess(member) {
    if (CONFIG.DEBUG) console.log('Checkout success detected');
    const data = extractUrlData();
    sendToWebhook({ ...data, ...member }, 'checkout_success');
    setTimeout(cleanUrl, 2000);
  }

  // Function to generate or retrieve GA4 client ID
  function getGA4ClientId() {
    // Try to get existing client ID from localStorage
    let clientId = localStorage.getItem('ga4_client_id');
    
    if (!clientId) {
      // Generate new client ID if none exists
      clientId = 'GA1.1.' + Math.random().toString(36).substring(2, 15) + '.' + Date.now();
      localStorage.setItem('ga4_client_id', clientId);
    }
    
    return clientId;
  }

  // Function to extract relevant data from the URL query parameters
  function extractUrlData() {
    const p = new URLSearchParams(window.location.search);
    return {
      fromCheckout: p.get('fromCheckout'),
      msPriceId: p.get('msPriceId'),
      stripePriceId: p.get('stripePriceId'),
      planId: p.get('planId'),
      memberId: p.get('memberId'),
      transactionId: `ms_checkout_${Date.now()}_${Math.random().toString(36).substr(2,9)}`,
      timestamp: new Date().toISOString(),
      successUrl: window.location.href,
      checkout_session_id: p.get('checkout_session_id'),
      payment_intent: p.get('payment_intent'),
      amount: p.get('amount'),
      currency: p.get('currency') || 'USD',
      email: p.get('customer_email') || p.get('email'),
      subscription_id: p.get('subscription_id'),
      customer_id: p.get('customer_id'),
      payment_status: p.get('payment_status'),
      ga4_client_id: getGA4ClientId() // Add GA4 client ID
    };
  }

  // Function to send the collected data to a specified webhook URL
  async function sendToWebhook(data, type) {
    const fd = new FormData();
    fd.append('event_type', type);
    Object.entries(data).forEach(([k,v]) => v != null && fd.append(k, v));
    try {
      await fetch(CONFIG.WEBHOOK_URL, { method: 'POST', body: fd });
      if (CONFIG.DEBUG) console.log(`Data sent: ${type}`, data);
    } catch (e) {
      console.error('Webhook error', e);
    }
  }

  // Function to clean up the URL by removing specific query parameters
  function cleanUrl() {
    const url = new URL(window.location);
    ['fromCheckout','msPriceId','stripePriceId','planId','memberId','amount','currency'].forEach(p => url.searchParams.delete(p));
    window.history.replaceState({}, document.title, url.toString());
    if (CONFIG.DEBUG) console.log('URL cleaned');
  }

  // Function to handle checkout failure
  function onCheckoutFailure(member) {
    if (!CONFIG.TRACK_FAILURES) return;
    const p = new URLSearchParams(window.location.search);
    const failed = p.get('payment_status') === 'failed' || p.get('error');
    if (!failed) return;
    const data = {
      failure_url: window.location.href,
      payment_status: p.get('payment_status'),
      error: p.get('error'),
      msPriceId: p.get('msPriceId'),
      stripePriceId: p.get('stripePriceId'),
      timestamp: new Date().toISOString()
    };
    sendToWebhook({ ...data, ...member }, 'checkout_failure');
  }

})();
</script>
Voir le Memberscript
UX

#171 - Multi-Step Onboarding with Auto Tab Navigation

Automatically advances users through multi-step tabbed onboarding steps.


<!-- 💙 MEMBERSCRIPT #171 v0.1 💙 - MULTI-STEP ONBOARDING WITH AUTO TAB NAVIGATION -->
<script>
(function() {
  'use strict';
  
  // Configuration
  const CONFIG = {
    TABS_SELECTOR: '[data-ms-code="onboarding-tabs"]',
    FORM_SELECTOR: '[data-ms-code="profile-form"]',
    SUCCESS_SELECTOR: '[data-ms-message="success"]',
    WEBFLOW_SUCCESS_SELECTOR: '.w-form-done',
    TAB_BUTTON_SELECTOR: '[data-w-tab]',
    TAB_PANE_SELECTOR: '.w-tab-pane',
    DEFAULT_DELAY: 600 //Customize this delay between tabs
  };

  // Wait for Memberstack to be ready
  function waitForMemberstack() {
    return new Promise((resolve) => {
      if (window.$memberstackDom && window.$memberstackDom.getCurrentMember) {
        resolve();
        return;
      }
      document.addEventListener('memberstack.ready', resolve, { once: true });
      const checkInterval = setInterval(() => {
        if (window.$memberstackDom && window.$memberstackDom.getCurrentMember) {
          clearInterval(checkInterval);
          resolve();
        }
      }, 100);
      setTimeout(() => {
        clearInterval(checkInterval);
        resolve();
      }, 10000);
    });
  }

  let isAdvancing = false;

  function handleFormSuccess(form, tabButtons, tabPanes, tabsContainer) {
    if (isAdvancing) return;
    isAdvancing = true;

    const currentPane = form.closest('.w-tab-pane');
    if (!currentPane) {
      isAdvancing = false;
      return;
    }

    const activeTabButton = tabButtons.find(btn => btn.classList.contains('w--current'));
    const actualCurrentIndex = activeTabButton ? tabButtons.indexOf(activeTabButton) : -1;
    const delay = parseInt(tabsContainer.dataset.msDelay) || CONFIG.DEFAULT_DELAY;
    const shouldReset = form.dataset.msReset !== 'false';

    setTimeout(() => {
      const webflowSuccess = form.parentElement.querySelector('.w-form-done');
      if (webflowSuccess) webflowSuccess.style.display = 'none';
      if (shouldReset) form.reset();

      if (actualCurrentIndex >= 0) {
        const nextTabButton = tabButtons[actualCurrentIndex + 1];
        if (nextTabButton) {
          nextTabButton.click();
        } else {
          const finalRedirect = currentPane.dataset.msFinalRedirect || tabsContainer.dataset.msFinalRedirect;
          if (finalRedirect) {
            window.location.href = finalRedirect;
          } else {
            tabsContainer.dispatchEvent(new CustomEvent('onboarding:complete', {
              detail: { totalSteps: tabPanes.length }
            }));
          }
        }
      }
      setTimeout(() => { isAdvancing = false; }, 1000);
    }, delay);
  }

  function setupSuccessDetection(form, tabButtons, tabPanes, tabsContainer) {
    const formWrapper = form.parentElement;
    const webflowSuccess = formWrapper.querySelector('.w-form-done');
    let hasTriggered = false;

    function triggerSuccess() {
      if (hasTriggered || isAdvancing) return;
      hasTriggered = true;
      clearAllTimers();
      handleFormSuccess(form, tabButtons, tabPanes, tabsContainer);
    }

    if (window.$memberstackDom) {
      const profileUpdateHandler = () => triggerSuccess();
      document.addEventListener('ms:profile:updated', profileUpdateHandler);
      document.addEventListener('memberstack:profile-updated', profileUpdateHandler);
      document.addEventListener('ms:member:updated', profileUpdateHandler);

      const originalUpdateMember = window.$memberstackDom.updateMember;
      if (originalUpdateMember) {
        window.$memberstackDom.updateMember = function(...args) {
          return originalUpdateMember.apply(this, args).then((result) => {
            setTimeout(() => triggerSuccess(), 100);
            return result;
          }).catch((error) => { throw error; });
        };
      }
    }

    let webflowObserver, formObserver, fallbackTimer, memberStackTimer;

    if (webflowSuccess) {
      webflowObserver = new MutationObserver(() => {
        const successStyle = window.getComputedStyle(webflowSuccess);
        const isSuccessVisible = successStyle.display !== 'none' && webflowSuccess.offsetParent !== null;
        if (isSuccessVisible) triggerSuccess();
      });
      webflowObserver.observe(webflowSuccess, { attributes: true, attributeFilter: ['style','tabindex','class'] });
    }

    formObserver = new MutationObserver(() => {
      const hasSuccessClass = formWrapper.classList.contains('w-form-done') || 
                             formWrapper.classList.contains('w--success') ||
                             formWrapper.classList.contains('ms-success');
      if (hasSuccessClass) triggerSuccess();
    });
    formObserver.observe(formWrapper, { attributes: true, attributeFilter: ['class'] });

    function clearAllTimers() {
      if (fallbackTimer) clearTimeout(fallbackTimer);
      if (memberStackTimer) clearTimeout(memberStackTimer);
      if (webflowObserver) webflowObserver.disconnect();
      if (formObserver) formObserver.disconnect();
    }

    form.addEventListener('submit', () => {
      fallbackTimer = setTimeout(() => {
        const submitButton = form.querySelector('[type="submit"]');
        const isSubmitting = submitButton && (
          submitButton.value.includes('wait') || 
          submitButton.disabled ||
          submitButton.classList.contains('w--current')
        );
        if (!isSubmitting) triggerSuccess();
      }, 2000);
    });

    window[`triggerTabAdvance_${form.id || 'form'}`] = () => triggerSuccess();
  }

  function initializeTabNavigator(tabsContainer) {
    const tabButtons = Array.from(tabsContainer.querySelectorAll(CONFIG.TAB_BUTTON_SELECTOR));
    const tabPanes = Array.from(tabsContainer.querySelectorAll(CONFIG.TAB_PANE_SELECTOR));
    const forms = Array.from(tabsContainer.querySelectorAll(CONFIG.FORM_SELECTOR));
    if (!tabButtons.length || !tabPanes.length || !forms.length) return;
    forms.forEach((form) => setupSuccessDetection(form, tabButtons, tabPanes, tabsContainer));
    tabsContainer.dispatchEvent(new CustomEvent('onboarding:initialized', {
      detail: { totalSteps: tabPanes.length, formsCount: forms.length }
    }));
  }

  async function init() {
    await waitForMemberstack();
    const tabsContainers = document.querySelectorAll(CONFIG.TABS_SELECTOR);
    if (!tabsContainers.length) return;
    tabsContainers.forEach(initializeTabNavigator);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  window.MemberScript171 = { init, CONFIG, version: '1.0' };
})();
</script>
v0.1

<!-- 💙 MEMBERSCRIPT #171 v0.1 💙 - MULTI-STEP ONBOARDING WITH AUTO TAB NAVIGATION -->
<script>
(function() {
  'use strict';
  
  // Configuration
  const CONFIG = {
    TABS_SELECTOR: '[data-ms-code="onboarding-tabs"]',
    FORM_SELECTOR: '[data-ms-code="profile-form"]',
    SUCCESS_SELECTOR: '[data-ms-message="success"]',
    WEBFLOW_SUCCESS_SELECTOR: '.w-form-done',
    TAB_BUTTON_SELECTOR: '[data-w-tab]',
    TAB_PANE_SELECTOR: '.w-tab-pane',
    DEFAULT_DELAY: 600 //Customize this delay between tabs
  };

  // Wait for Memberstack to be ready
  function waitForMemberstack() {
    return new Promise((resolve) => {
      if (window.$memberstackDom && window.$memberstackDom.getCurrentMember) {
        resolve();
        return;
      }
      document.addEventListener('memberstack.ready', resolve, { once: true });
      const checkInterval = setInterval(() => {
        if (window.$memberstackDom && window.$memberstackDom.getCurrentMember) {
          clearInterval(checkInterval);
          resolve();
        }
      }, 100);
      setTimeout(() => {
        clearInterval(checkInterval);
        resolve();
      }, 10000);
    });
  }

  let isAdvancing = false;

  function handleFormSuccess(form, tabButtons, tabPanes, tabsContainer) {
    if (isAdvancing) return;
    isAdvancing = true;

    const currentPane = form.closest('.w-tab-pane');
    if (!currentPane) {
      isAdvancing = false;
      return;
    }

    const activeTabButton = tabButtons.find(btn => btn.classList.contains('w--current'));
    const actualCurrentIndex = activeTabButton ? tabButtons.indexOf(activeTabButton) : -1;
    const delay = parseInt(tabsContainer.dataset.msDelay) || CONFIG.DEFAULT_DELAY;
    const shouldReset = form.dataset.msReset !== 'false';

    setTimeout(() => {
      const webflowSuccess = form.parentElement.querySelector('.w-form-done');
      if (webflowSuccess) webflowSuccess.style.display = 'none';
      if (shouldReset) form.reset();

      if (actualCurrentIndex >= 0) {
        const nextTabButton = tabButtons[actualCurrentIndex + 1];
        if (nextTabButton) {
          nextTabButton.click();
        } else {
          const finalRedirect = currentPane.dataset.msFinalRedirect || tabsContainer.dataset.msFinalRedirect;
          if (finalRedirect) {
            window.location.href = finalRedirect;
          } else {
            tabsContainer.dispatchEvent(new CustomEvent('onboarding:complete', {
              detail: { totalSteps: tabPanes.length }
            }));
          }
        }
      }
      setTimeout(() => { isAdvancing = false; }, 1000);
    }, delay);
  }

  function setupSuccessDetection(form, tabButtons, tabPanes, tabsContainer) {
    const formWrapper = form.parentElement;
    const webflowSuccess = formWrapper.querySelector('.w-form-done');
    let hasTriggered = false;

    function triggerSuccess() {
      if (hasTriggered || isAdvancing) return;
      hasTriggered = true;
      clearAllTimers();
      handleFormSuccess(form, tabButtons, tabPanes, tabsContainer);
    }

    if (window.$memberstackDom) {
      const profileUpdateHandler = () => triggerSuccess();
      document.addEventListener('ms:profile:updated', profileUpdateHandler);
      document.addEventListener('memberstack:profile-updated', profileUpdateHandler);
      document.addEventListener('ms:member:updated', profileUpdateHandler);

      const originalUpdateMember = window.$memberstackDom.updateMember;
      if (originalUpdateMember) {
        window.$memberstackDom.updateMember = function(...args) {
          return originalUpdateMember.apply(this, args).then((result) => {
            setTimeout(() => triggerSuccess(), 100);
            return result;
          }).catch((error) => { throw error; });
        };
      }
    }

    let webflowObserver, formObserver, fallbackTimer, memberStackTimer;

    if (webflowSuccess) {
      webflowObserver = new MutationObserver(() => {
        const successStyle = window.getComputedStyle(webflowSuccess);
        const isSuccessVisible = successStyle.display !== 'none' && webflowSuccess.offsetParent !== null;
        if (isSuccessVisible) triggerSuccess();
      });
      webflowObserver.observe(webflowSuccess, { attributes: true, attributeFilter: ['style','tabindex','class'] });
    }

    formObserver = new MutationObserver(() => {
      const hasSuccessClass = formWrapper.classList.contains('w-form-done') || 
                             formWrapper.classList.contains('w--success') ||
                             formWrapper.classList.contains('ms-success');
      if (hasSuccessClass) triggerSuccess();
    });
    formObserver.observe(formWrapper, { attributes: true, attributeFilter: ['class'] });

    function clearAllTimers() {
      if (fallbackTimer) clearTimeout(fallbackTimer);
      if (memberStackTimer) clearTimeout(memberStackTimer);
      if (webflowObserver) webflowObserver.disconnect();
      if (formObserver) formObserver.disconnect();
    }

    form.addEventListener('submit', () => {
      fallbackTimer = setTimeout(() => {
        const submitButton = form.querySelector('[type="submit"]');
        const isSubmitting = submitButton && (
          submitButton.value.includes('wait') || 
          submitButton.disabled ||
          submitButton.classList.contains('w--current')
        );
        if (!isSubmitting) triggerSuccess();
      }, 2000);
    });

    window[`triggerTabAdvance_${form.id || 'form'}`] = () => triggerSuccess();
  }

  function initializeTabNavigator(tabsContainer) {
    const tabButtons = Array.from(tabsContainer.querySelectorAll(CONFIG.TAB_BUTTON_SELECTOR));
    const tabPanes = Array.from(tabsContainer.querySelectorAll(CONFIG.TAB_PANE_SELECTOR));
    const forms = Array.from(tabsContainer.querySelectorAll(CONFIG.FORM_SELECTOR));
    if (!tabButtons.length || !tabPanes.length || !forms.length) return;
    forms.forEach((form) => setupSuccessDetection(form, tabButtons, tabPanes, tabsContainer));
    tabsContainer.dispatchEvent(new CustomEvent('onboarding:initialized', {
      detail: { totalSteps: tabPanes.length, formsCount: forms.length }
    }));
  }

  async function init() {
    await waitForMemberstack();
    const tabsContainers = document.querySelectorAll(CONFIG.TABS_SELECTOR);
    if (!tabsContainers.length) return;
    tabsContainers.forEach(initializeTabNavigator);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  window.MemberScript171 = { init, CONFIG, version: '1.0' };
})();
</script>
Voir le Memberscript
UX
Flux personnalisés

#170 - Pre-fill Stripe Payment Links with Member Email

Redirect logged-in members to a Stripe Payment Link with their email address prefilled


<!-- 💙 MEMBERSCRIPT #170 v0.1 💙 - PREFILL STRIPE PAYMENT LINK WITH A MEMBERS EMAIL -->
<script>
(function() {
  const STRIPE_PAYMENT_LINK = "https://buy.stripe.com/test_00wfZg0W43drdOobsJgIo03";

  function redirectToStripeWithEmail(memberEmail) {
    if (!memberEmail) return;
    try {
      const paymentUrl = `${STRIPE_PAYMENT_LINK}?prefilled_email=${encodeURIComponent(memberEmail)}`;
      window.location.href = paymentUrl;
    } catch (error) {
      console.error("Memberscript #170: Error creating payment URL:", error);
    }
  }

  function handleButtonClick(event) {
    event.preventDefault();
    if (!window.$memberstackReady) return;

    window.$memberstackDom.getCurrentMember().then(({ data: member }) => {
      const userEmail = member?.email || member?.auth?.email || member?.profile?.email || null;
      if (userEmail) {
        redirectToStripeWithEmail(userEmail);
      }
    }).catch(() => {
      // Silent fail if no member data
    });
  }

  function setupButtonListeners() {
    document.querySelectorAll('[data-ms-code="prefill-link"]').forEach((button) => {
      button.addEventListener('click', handleButtonClick);
    });
  }

  function initializeScript() {
    if (window.$memberstackReady && window.$memberstackDom) {
      setTimeout(setupButtonListeners, 500);
    } else {
      document.addEventListener("memberstack.ready", () => {
        setTimeout(setupButtonListeners, 500);
      });
    }
  }

  initializeScript();
})();
</script>
v0.1

<!-- 💙 MEMBERSCRIPT #170 v0.1 💙 - PREFILL STRIPE PAYMENT LINK WITH A MEMBERS EMAIL -->
<script>
(function() {
  const STRIPE_PAYMENT_LINK = "https://buy.stripe.com/test_00wfZg0W43drdOobsJgIo03";

  function redirectToStripeWithEmail(memberEmail) {
    if (!memberEmail) return;
    try {
      const paymentUrl = `${STRIPE_PAYMENT_LINK}?prefilled_email=${encodeURIComponent(memberEmail)}`;
      window.location.href = paymentUrl;
    } catch (error) {
      console.error("Memberscript #170: Error creating payment URL:", error);
    }
  }

  function handleButtonClick(event) {
    event.preventDefault();
    if (!window.$memberstackReady) return;

    window.$memberstackDom.getCurrentMember().then(({ data: member }) => {
      const userEmail = member?.email || member?.auth?.email || member?.profile?.email || null;
      if (userEmail) {
        redirectToStripeWithEmail(userEmail);
      }
    }).catch(() => {
      // Silent fail if no member data
    });
  }

  function setupButtonListeners() {
    document.querySelectorAll('[data-ms-code="prefill-link"]').forEach((button) => {
      button.addEventListener('click', handleButtonClick);
    });
  }

  function initializeScript() {
    if (window.$memberstackReady && window.$memberstackDom) {
      setTimeout(setupButtonListeners, 500);
    } else {
      document.addEventListener("memberstack.ready", () => {
        setTimeout(setupButtonListeners, 500);
      });
    }
  }

  initializeScript();
})();
</script>
Voir le Memberscript
UX

#169 - Autoplay slider with an optional manual selection.

Add on scroll autoplay to your Webflow sliders with optional pause-on-hover, custom slider dots navigation.


<!-- 💙 MEMBERSCRIPT #169 v0.1 💙 - AUTOPLAY SLIDER WITH OPTIONAL MANUAL SELECTION -->
<script>
(function() {
    'use strict';
    
    // Wait for DOM to be ready
    function initSliders() {
        const sliders = document.querySelectorAll('[data-ms-code="auto-slider"]');
        
        sliders.forEach(slider => {
            new AutoSlider(slider);
        });
    }
    
    class AutoSlider {
        constructor(element) {
            this.slider = element;
            this.track = this.slider.querySelector('[data-ms-code="slider-track"]');
            this.slides = this.slider.querySelectorAll('[data-ms-code="slider-slide"]');
            this.dotsContainer = this.slider.querySelector('[data-ms-code="slider-dots"]');
            this.dots = this.slider.querySelectorAll('[data-ms-code="slider-dot"]');
            this.collectDots();
            
            // Configuration
            this.currentSlide = 0;
            this.interval = parseInt(this.slider.dataset.msInterval) || 3000;
            this.pauseOnHover = this.slider.dataset.msPauseOnHover !== 'false';
            this.resumeDelay = parseInt(this.slider.dataset.msResumeDelay) || 3000;
            this.autoplayOnVisible = this.slider.dataset.msAutoplayOnVisible === 'true';
            this.visibleThreshold = Number.isNaN(parseFloat(this.slider.dataset.msVisibleThreshold))
                ? 0.3
                : Math.min(1, Math.max(0, parseFloat(this.slider.dataset.msVisibleThreshold)));
            this.dotsActiveClass = this.dotsContainer?.dataset.msDotActiveClass || '';
            this.dotsInactiveClass = this.dotsContainer?.dataset.msDotInactiveClass || '';
            this.defaultActiveClass = '';
            this.defaultInactiveClass = '';
            
            // State
            this.autoplayTimer = null;
            this.resumeTimer = null;
            this.isUserInteracting = false;
            this.isPaused = false;
            this.isInView = false;
            this.visibilityObserver = null;
            
            // Validate required elements
            if (!this.track || this.slides.length === 0) {
                console.warn('AutoSlider: Required elements not found');
                return;
            }
            
            this.init();
        }
        
        init() {
            // Set up initial styles
            this.setupStyles();
            
            // Detect default dot classes from markup if no attributes provided
            this.detectDotClasses();

            // Sync with Webflow's current state
            this.syncWithWebflow();
            
            // Bind event listeners
            this.bindEvents();
            
            // Start autoplay (optionally only when visible)
            if (this.autoplayOnVisible) {
                this.setupVisibilityObserver();
            } else {
                this.startAutoplay();
            }
            
            console.log('AutoSlider initialized with', this.slides.length, 'slides');
        }
        
        setupStyles() {
            // No CSS modifications - work with existing Webflow slider styles
            // Only add data attributes to slides for tracking
            this.slides.forEach((slide, index) => {
                slide.dataset.slideIndex = index;
            });

            // Improve accessibility for custom dots without altering styles
            if (this.dots && this.dots.length) {
                this.dots.forEach((dot, index) => {
                    if (!dot.hasAttribute('role')) dot.setAttribute('role', 'button');
                    if (!dot.hasAttribute('tabindex')) dot.setAttribute('tabindex', '0');
                    if (!dot.hasAttribute('aria-label')) dot.setAttribute('aria-label', `Show slide ${index + 1}`);
                    // If data-ms-slide is missing, infer from position
                    if (!dot.dataset.msSlide) dot.dataset.msSlide = String(index);
                });
            }
        }
        
        bindEvents() {
            // No custom prev/next controls
            
            // Custom dot navigation (data-ms-code dots). Use event delegation if container exists.
            if (this.dotsContainer) {
                this.dotsContainer.addEventListener('click', (e) => {
                    const dot = e.target.closest('[data-ms-code="slider-dot"]');
                    if (!dot || !this.dotsContainer.contains(dot)) return;
                    e.preventDefault();
                    let slideIndex = parseInt(dot.dataset.msSlide);
                    if (Number.isNaN(slideIndex)) {
                        // Recollect in case DOM changed
                        this.dots = this.dotsContainer.querySelectorAll('[data-ms-code="slider-dot"]');
                        slideIndex = Array.from(this.dots).indexOf(dot);
                    }
                    if (!Number.isNaN(slideIndex)) {
                        this.handleUserInteraction();
                        this.goToSlide(slideIndex);
                    }
                });
            }

            // Also attach direct listeners to cover cases without a container
            this.dots.forEach(dot => {
                dot.addEventListener('click', (e) => {
                    e.preventDefault();
                    let slideIndex = parseInt(dot.dataset.msSlide);
                    if (Number.isNaN(slideIndex)) {
                        slideIndex = Array.from(this.dots).indexOf(dot);
                    }
                    if (!Number.isNaN(slideIndex)) {
                        this.handleUserInteraction();
                        this.goToSlide(slideIndex);
                    }
                });

                // Keyboard support for custom dots
                dot.addEventListener('keydown', (e) => {
                    const key = e.key;
                    if (key === 'Enter' || key === ' ') {
                        e.preventDefault();
                        let slideIndex = parseInt(dot.dataset.msSlide);
                        if (Number.isNaN(slideIndex)) {
                            slideIndex = Array.from(this.dots).indexOf(dot);
                        }
                        if (!Number.isNaN(slideIndex)) {
                            this.handleUserInteraction();
                            this.goToSlide(slideIndex);
                        }
                    }
                });
            });
            
            // Listen for Webflow slider interactions to pause autoplay
            const webflowDots = this.slider.querySelectorAll('.w-slider-dot');
            const webflowArrows = this.slider.querySelectorAll('.w-slider-arrow-left, .w-slider-arrow-right');
            
            webflowDots.forEach(dot => {
                dot.addEventListener('click', () => {
                    this.handleUserInteraction();
                    // Update our current slide based on Webflow's active dot
                    const activeDotIndex = Array.from(webflowDots).indexOf(dot);
                    if (activeDotIndex !== -1) {
                        this.currentSlide = activeDotIndex;
                        this.updateActiveStates();
                    }
                    // Schedule resume after inactivity
                    clearTimeout(this.resumeTimer);
                    this.resumeTimer = setTimeout(() => {
                        this.isUserInteracting = false;
                        this.resumeAutoplay();
                    }, this.resumeDelay);
                });
            });
            
            webflowArrows.forEach(arrow => {
                arrow.addEventListener('click', () => {
                    this.handleUserInteraction();
                    // Let Webflow handle the navigation, then sync our state
                    setTimeout(() => {
                        this.syncWithWebflow();
                        // Schedule resume after inactivity
                        clearTimeout(this.resumeTimer);
                        this.resumeTimer = setTimeout(() => {
                            this.isUserInteracting = false;
                            this.resumeAutoplay();
                        }, this.resumeDelay);
                    }, 100);
                });
            });
            
            // Hover events
            if (this.pauseOnHover) {
                this.slider.addEventListener('mouseenter', () => {
                    this.pauseAutoplay();
                });
                this.slider.addEventListener('mouseleave', () => {
                    this.isUserInteracting = false;
                    this.resumeAutoplay();
                });
            }
            
            // Touch/swipe support (only if not handled by Webflow)
            this.setupTouchEvents();
            
            // Keyboard navigation
            this.slider.addEventListener('keydown', (e) => {
                if (e.key === 'ArrowLeft') {
                    this.handleUserInteraction();
                    this.previousSlide();
                } else if (e.key === 'ArrowRight') {
                    this.handleUserInteraction();
                    this.nextSlide();
                }
            });
            
            // Focus management
            this.slider.addEventListener('focus', () => {
                this.pauseAutoplay();
            }, true);
            
            this.slider.addEventListener('blur', () => {
                if (!this.isUserInteracting) {
                    this.resumeAutoplay();
                }
            }, true);
        }
        
        setupTouchEvents() {
            let startX = 0;
            let currentX = 0;
            let isDragging = false;
            
            this.slider.addEventListener('touchstart', (e) => {
                startX = e.touches[0].clientX;
                isDragging = true;
                this.pauseAutoplay();
            });
            
            this.slider.addEventListener('touchmove', (e) => {
                if (!isDragging) return;
                currentX = e.touches[0].clientX;
            });
            
            this.slider.addEventListener('touchend', () => {
                if (!isDragging) return;
                isDragging = false;
                
                const deltaX = startX - currentX;
                const threshold = 50;
                
                if (Math.abs(deltaX) > threshold) {
                    this.handleUserInteraction();
                    if (deltaX > 0) {
                        this.nextSlide();
                    } else {
                        this.previousSlide();
                    }
                }
            });
        }
        
        handleUserInteraction() {
            this.isUserInteracting = true;
            this.pauseAutoplay();
            
            // Clear any existing resume timer
            clearTimeout(this.resumeTimer);
            
            // Set timer to resume autoplay after period of inactivity
            this.resumeTimer = setTimeout(() => {
                this.isUserInteracting = false;
                this.resumeAutoplay();
            }, this.resumeDelay);
        }
        
        startAutoplay() {
            if (this.slides.length <= 1) return;
            if (this.autoplayTimer) return; // already running
            if (this.autoplayOnVisible && !this.isInView) return; // respect visibility
            
            this.autoplayTimer = setInterval(() => {
                this.nextSlide();
            }, this.interval);
            
            this.isPaused = false;
        }
        
        pauseAutoplay() {
            if (this.autoplayTimer) {
                clearInterval(this.autoplayTimer);
                this.autoplayTimer = null;
            }
            this.isPaused = true;
        }
        
        resumeAutoplay() {
            if (!this.isPaused || this.isUserInteracting) return;
            this.startAutoplay();
        }
        
        goToSlide(index) {
            // Ensure index is within bounds
            if (index < 0) {
                this.currentSlide = this.slides.length - 1;
            } else if (index >= this.slides.length) {
                this.currentSlide = 0;
            } else {
                this.currentSlide = index;
            }
            
            // Use Webflow's native slider navigation if available
            const webflowDots = this.slider.querySelectorAll('.w-slider-dot');
            const webflowRight = this.slider.querySelector('.w-slider-arrow-right');
            const webflowLeft = this.slider.querySelector('.w-slider-arrow-left');
            if (webflowDots.length > 0) {
                // Clicking dots is reliable for direct index navigation
                const target = webflowDots[this.currentSlide];
                if (target) target.click();
            } else if (webflowRight && webflowLeft) {
                // Fallback: use arrows to move stepwise toward target
                const direction = this.currentSlide > 0 ? 1 : -1;
                (direction > 0 ? webflowRight : webflowLeft).click();
            } else {
                // Fallback: calculate slide position manually
                const slideWidth = this.slides[0].offsetWidth;
                const translateX = -(this.currentSlide * slideWidth);
                this.track.style.transform = `translateX(${translateX}px)`;
            }
            
            // Update active states
            this.updateActiveStates();
            
            // Trigger custom event
            this.slider.dispatchEvent(new CustomEvent('slideChanged', {
                detail: {
                    currentSlide: this.currentSlide,
                    totalSlides: this.slides.length
                }
            }));

            // If the user has left the dots/nav area, ensure autoplay resumes after delay
            if (!this.pauseOnHover && !this.isUserInteracting && !this.autoplayTimer) {
                this.startAutoplay();
            }
        }
        
        nextSlide() {
            this.goToSlide(this.currentSlide + 1);
            // If autoplay is running, keep it seamless after manual advance
            if (!this.autoplayTimer && !this.isUserInteracting) {
                this.startAutoplay();
            }
        }
        
        previousSlide() {
            this.goToSlide(this.currentSlide - 1);
            if (!this.autoplayTimer && !this.isUserInteracting) {
                this.startAutoplay();
            }
        }
        
        updateActiveStates() {
            // Update slides
            this.slides.forEach((slide, index) => {
                slide.classList.toggle('active', index === this.currentSlide);
                slide.setAttribute('aria-hidden', index !== this.currentSlide);
            });
            
            // Update dots
            this.dots.forEach((dot, index) => {
                let slideIndex = parseInt(dot.dataset.msSlide);
                if (Number.isNaN(slideIndex)) slideIndex = index;
                const isActive = slideIndex === this.currentSlide;

                // ARIA and data state
                dot.setAttribute('aria-pressed', String(isActive));
                if (isActive) {
                    dot.setAttribute('data-active', 'true');
                } else {
                    dot.removeAttribute('data-active');
                }

                // Generic active class toggle (if they style it)
                dot.classList.toggle('active', isActive);

                // Optional custom classes provided via attributes
                const activeClass = dot.dataset.msActiveClass || this.dotsActiveClass || this.defaultActiveClass;
                const inactiveClass = dot.dataset.msInactiveClass || this.dotsInactiveClass || this.defaultInactiveClass;
                if (activeClass) dot.classList.toggle(activeClass, isActive);
                if (inactiveClass) dot.classList.toggle(inactiveClass, !isActive);
            });
        }

        detectDotClasses() {
            if (!this.dots || this.dots.length === 0) return;
            // If classes are already provided via attributes, skip detection
            if (this.dotsActiveClass || this.dotsInactiveClass) return;
            // Find a class containing 'active' and 'inactive' among dot elements
            const classCounts = new Map();
            this.dots.forEach((dot) => {
                dot.classList.forEach((cls) => {
                    classCounts.set(cls, (classCounts.get(cls) || 0) + 1);
                });
            });
            // Prefer classes that explicitly include 'active'/'inactive'
            const allClasses = Array.from(classCounts.keys());
            const activeCandidate = allClasses.find((c) => /active/i.test(c));
            const inactiveCandidate = allClasses.find((c) => /inactive/i.test(c));
            if (activeCandidate) this.defaultActiveClass = activeCandidate;
            if (inactiveCandidate) this.defaultInactiveClass = inactiveCandidate;
        }
        
        syncWithWebflow() {
            // Sync our current slide with Webflow's active slide
            const activeWebflowDot = this.slider.querySelector('.w-slider-dot.w-active');
            if (activeWebflowDot) {
                const webflowDots = this.slider.querySelectorAll('.w-slider-dot');
                const activeIndex = Array.from(webflowDots).indexOf(activeWebflowDot);
                if (activeIndex !== -1 && activeIndex !== this.currentSlide) {
                    this.currentSlide = activeIndex;
                    this.updateActiveStates();
                }
            }
        }

        collectDots() {
            // If dots are not inside the slider, look for a sibling container in the same wrapper
            if (!this.dots || this.dots.length === 0) {
                let container = this.dotsContainer;
                if (!container && this.slider.parentElement) {
                    container = this.slider.parentElement.querySelector('[data-ms-code="slider-dots"]');
                }
                if (!container) {
                    // Try the closest ancestor wrapper then find dots within it that are siblings
                    const wrapper = this.slider.closest('[data-ms-slider-wrapper], .feature-slider-wrapper, section, div');
                    if (wrapper) {
                        // Prefer immediate sibling dots container
                        const siblingDots = Array.from(wrapper.querySelectorAll('[data-ms-code="slider-dots"]'))
                            .find((el) => el !== this.slider);
                        if (siblingDots) container = siblingDots;
                    }
                }
                if (container) {
                    this.dotsContainer = container;
                    this.dots = container.querySelectorAll('[data-ms-code="slider-dot"]');
                }
            }
        }

        // No custom nav buttons
        
        // Public methods for external control
        pause() {
            this.pauseAutoplay();
        }
        
        resume() {
            this.isUserInteracting = false;
            this.resumeAutoplay();
        }
        
        destroy() {
            this.pauseAutoplay();
            clearTimeout(this.resumeTimer);
            if (this.visibilityObserver) {
                try { this.visibilityObserver.disconnect(); } catch (e) {}
                this.visibilityObserver = null;
            }
            
            // Remove event listeners would go here if needed
            // This is a simplified version
        }

        setupVisibilityObserver() {
            if (!('IntersectionObserver' in window)) {
                // Fallback: start immediately
                this.startAutoplay();
                return;
            }
            const thresholds = [];
            const step = 0.1;
            for (let t = 0; t <= 1; t += step) thresholds.push(parseFloat(t.toFixed(1)));
            if (!thresholds.includes(this.visibleThreshold)) thresholds.push(this.visibleThreshold);
            thresholds.sort((a, b) => a - b);

            this.visibilityObserver = new IntersectionObserver((entries) => {
                entries.forEach((entry) => {
                    this.isInView = entry.isIntersecting && entry.intersectionRatio >= this.visibleThreshold;
                    if (this.isInView) {
                        // Resume/start autoplay only if not interacting
                        if (!this.isUserInteracting) {
                            this.startAutoplay();
                        }
                    } else {
                        this.pauseAutoplay();
                    }
                });
            }, { threshold: thresholds });

            this.visibilityObserver.observe(this.slider);
        }
    }
    
    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSliders);
    } else {
        initSliders();
    }
    
    // Expose the class globally for external access if needed
    window.MemberScript169 = {
        AutoSlider: AutoSlider,
        init: initSliders
    };
})();

</script>
v0.1

<!-- 💙 MEMBERSCRIPT #169 v0.1 💙 - AUTOPLAY SLIDER WITH OPTIONAL MANUAL SELECTION -->
<script>
(function() {
    'use strict';
    
    // Wait for DOM to be ready
    function initSliders() {
        const sliders = document.querySelectorAll('[data-ms-code="auto-slider"]');
        
        sliders.forEach(slider => {
            new AutoSlider(slider);
        });
    }
    
    class AutoSlider {
        constructor(element) {
            this.slider = element;
            this.track = this.slider.querySelector('[data-ms-code="slider-track"]');
            this.slides = this.slider.querySelectorAll('[data-ms-code="slider-slide"]');
            this.dotsContainer = this.slider.querySelector('[data-ms-code="slider-dots"]');
            this.dots = this.slider.querySelectorAll('[data-ms-code="slider-dot"]');
            this.collectDots();
            
            // Configuration
            this.currentSlide = 0;
            this.interval = parseInt(this.slider.dataset.msInterval) || 3000;
            this.pauseOnHover = this.slider.dataset.msPauseOnHover !== 'false';
            this.resumeDelay = parseInt(this.slider.dataset.msResumeDelay) || 3000;
            this.autoplayOnVisible = this.slider.dataset.msAutoplayOnVisible === 'true';
            this.visibleThreshold = Number.isNaN(parseFloat(this.slider.dataset.msVisibleThreshold))
                ? 0.3
                : Math.min(1, Math.max(0, parseFloat(this.slider.dataset.msVisibleThreshold)));
            this.dotsActiveClass = this.dotsContainer?.dataset.msDotActiveClass || '';
            this.dotsInactiveClass = this.dotsContainer?.dataset.msDotInactiveClass || '';
            this.defaultActiveClass = '';
            this.defaultInactiveClass = '';
            
            // State
            this.autoplayTimer = null;
            this.resumeTimer = null;
            this.isUserInteracting = false;
            this.isPaused = false;
            this.isInView = false;
            this.visibilityObserver = null;
            
            // Validate required elements
            if (!this.track || this.slides.length === 0) {
                console.warn('AutoSlider: Required elements not found');
                return;
            }
            
            this.init();
        }
        
        init() {
            // Set up initial styles
            this.setupStyles();
            
            // Detect default dot classes from markup if no attributes provided
            this.detectDotClasses();

            // Sync with Webflow's current state
            this.syncWithWebflow();
            
            // Bind event listeners
            this.bindEvents();
            
            // Start autoplay (optionally only when visible)
            if (this.autoplayOnVisible) {
                this.setupVisibilityObserver();
            } else {
                this.startAutoplay();
            }
            
            console.log('AutoSlider initialized with', this.slides.length, 'slides');
        }
        
        setupStyles() {
            // No CSS modifications - work with existing Webflow slider styles
            // Only add data attributes to slides for tracking
            this.slides.forEach((slide, index) => {
                slide.dataset.slideIndex = index;
            });

            // Improve accessibility for custom dots without altering styles
            if (this.dots && this.dots.length) {
                this.dots.forEach((dot, index) => {
                    if (!dot.hasAttribute('role')) dot.setAttribute('role', 'button');
                    if (!dot.hasAttribute('tabindex')) dot.setAttribute('tabindex', '0');
                    if (!dot.hasAttribute('aria-label')) dot.setAttribute('aria-label', `Show slide ${index + 1}`);
                    // If data-ms-slide is missing, infer from position
                    if (!dot.dataset.msSlide) dot.dataset.msSlide = String(index);
                });
            }
        }
        
        bindEvents() {
            // No custom prev/next controls
            
            // Custom dot navigation (data-ms-code dots). Use event delegation if container exists.
            if (this.dotsContainer) {
                this.dotsContainer.addEventListener('click', (e) => {
                    const dot = e.target.closest('[data-ms-code="slider-dot"]');
                    if (!dot || !this.dotsContainer.contains(dot)) return;
                    e.preventDefault();
                    let slideIndex = parseInt(dot.dataset.msSlide);
                    if (Number.isNaN(slideIndex)) {
                        // Recollect in case DOM changed
                        this.dots = this.dotsContainer.querySelectorAll('[data-ms-code="slider-dot"]');
                        slideIndex = Array.from(this.dots).indexOf(dot);
                    }
                    if (!Number.isNaN(slideIndex)) {
                        this.handleUserInteraction();
                        this.goToSlide(slideIndex);
                    }
                });
            }

            // Also attach direct listeners to cover cases without a container
            this.dots.forEach(dot => {
                dot.addEventListener('click', (e) => {
                    e.preventDefault();
                    let slideIndex = parseInt(dot.dataset.msSlide);
                    if (Number.isNaN(slideIndex)) {
                        slideIndex = Array.from(this.dots).indexOf(dot);
                    }
                    if (!Number.isNaN(slideIndex)) {
                        this.handleUserInteraction();
                        this.goToSlide(slideIndex);
                    }
                });

                // Keyboard support for custom dots
                dot.addEventListener('keydown', (e) => {
                    const key = e.key;
                    if (key === 'Enter' || key === ' ') {
                        e.preventDefault();
                        let slideIndex = parseInt(dot.dataset.msSlide);
                        if (Number.isNaN(slideIndex)) {
                            slideIndex = Array.from(this.dots).indexOf(dot);
                        }
                        if (!Number.isNaN(slideIndex)) {
                            this.handleUserInteraction();
                            this.goToSlide(slideIndex);
                        }
                    }
                });
            });
            
            // Listen for Webflow slider interactions to pause autoplay
            const webflowDots = this.slider.querySelectorAll('.w-slider-dot');
            const webflowArrows = this.slider.querySelectorAll('.w-slider-arrow-left, .w-slider-arrow-right');
            
            webflowDots.forEach(dot => {
                dot.addEventListener('click', () => {
                    this.handleUserInteraction();
                    // Update our current slide based on Webflow's active dot
                    const activeDotIndex = Array.from(webflowDots).indexOf(dot);
                    if (activeDotIndex !== -1) {
                        this.currentSlide = activeDotIndex;
                        this.updateActiveStates();
                    }
                    // Schedule resume after inactivity
                    clearTimeout(this.resumeTimer);
                    this.resumeTimer = setTimeout(() => {
                        this.isUserInteracting = false;
                        this.resumeAutoplay();
                    }, this.resumeDelay);
                });
            });
            
            webflowArrows.forEach(arrow => {
                arrow.addEventListener('click', () => {
                    this.handleUserInteraction();
                    // Let Webflow handle the navigation, then sync our state
                    setTimeout(() => {
                        this.syncWithWebflow();
                        // Schedule resume after inactivity
                        clearTimeout(this.resumeTimer);
                        this.resumeTimer = setTimeout(() => {
                            this.isUserInteracting = false;
                            this.resumeAutoplay();
                        }, this.resumeDelay);
                    }, 100);
                });
            });
            
            // Hover events
            if (this.pauseOnHover) {
                this.slider.addEventListener('mouseenter', () => {
                    this.pauseAutoplay();
                });
                this.slider.addEventListener('mouseleave', () => {
                    this.isUserInteracting = false;
                    this.resumeAutoplay();
                });
            }
            
            // Touch/swipe support (only if not handled by Webflow)
            this.setupTouchEvents();
            
            // Keyboard navigation
            this.slider.addEventListener('keydown', (e) => {
                if (e.key === 'ArrowLeft') {
                    this.handleUserInteraction();
                    this.previousSlide();
                } else if (e.key === 'ArrowRight') {
                    this.handleUserInteraction();
                    this.nextSlide();
                }
            });
            
            // Focus management
            this.slider.addEventListener('focus', () => {
                this.pauseAutoplay();
            }, true);
            
            this.slider.addEventListener('blur', () => {
                if (!this.isUserInteracting) {
                    this.resumeAutoplay();
                }
            }, true);
        }
        
        setupTouchEvents() {
            let startX = 0;
            let currentX = 0;
            let isDragging = false;
            
            this.slider.addEventListener('touchstart', (e) => {
                startX = e.touches[0].clientX;
                isDragging = true;
                this.pauseAutoplay();
            });
            
            this.slider.addEventListener('touchmove', (e) => {
                if (!isDragging) return;
                currentX = e.touches[0].clientX;
            });
            
            this.slider.addEventListener('touchend', () => {
                if (!isDragging) return;
                isDragging = false;
                
                const deltaX = startX - currentX;
                const threshold = 50;
                
                if (Math.abs(deltaX) > threshold) {
                    this.handleUserInteraction();
                    if (deltaX > 0) {
                        this.nextSlide();
                    } else {
                        this.previousSlide();
                    }
                }
            });
        }
        
        handleUserInteraction() {
            this.isUserInteracting = true;
            this.pauseAutoplay();
            
            // Clear any existing resume timer
            clearTimeout(this.resumeTimer);
            
            // Set timer to resume autoplay after period of inactivity
            this.resumeTimer = setTimeout(() => {
                this.isUserInteracting = false;
                this.resumeAutoplay();
            }, this.resumeDelay);
        }
        
        startAutoplay() {
            if (this.slides.length <= 1) return;
            if (this.autoplayTimer) return; // already running
            if (this.autoplayOnVisible && !this.isInView) return; // respect visibility
            
            this.autoplayTimer = setInterval(() => {
                this.nextSlide();
            }, this.interval);
            
            this.isPaused = false;
        }
        
        pauseAutoplay() {
            if (this.autoplayTimer) {
                clearInterval(this.autoplayTimer);
                this.autoplayTimer = null;
            }
            this.isPaused = true;
        }
        
        resumeAutoplay() {
            if (!this.isPaused || this.isUserInteracting) return;
            this.startAutoplay();
        }
        
        goToSlide(index) {
            // Ensure index is within bounds
            if (index < 0) {
                this.currentSlide = this.slides.length - 1;
            } else if (index >= this.slides.length) {
                this.currentSlide = 0;
            } else {
                this.currentSlide = index;
            }
            
            // Use Webflow's native slider navigation if available
            const webflowDots = this.slider.querySelectorAll('.w-slider-dot');
            const webflowRight = this.slider.querySelector('.w-slider-arrow-right');
            const webflowLeft = this.slider.querySelector('.w-slider-arrow-left');
            if (webflowDots.length > 0) {
                // Clicking dots is reliable for direct index navigation
                const target = webflowDots[this.currentSlide];
                if (target) target.click();
            } else if (webflowRight && webflowLeft) {
                // Fallback: use arrows to move stepwise toward target
                const direction = this.currentSlide > 0 ? 1 : -1;
                (direction > 0 ? webflowRight : webflowLeft).click();
            } else {
                // Fallback: calculate slide position manually
                const slideWidth = this.slides[0].offsetWidth;
                const translateX = -(this.currentSlide * slideWidth);
                this.track.style.transform = `translateX(${translateX}px)`;
            }
            
            // Update active states
            this.updateActiveStates();
            
            // Trigger custom event
            this.slider.dispatchEvent(new CustomEvent('slideChanged', {
                detail: {
                    currentSlide: this.currentSlide,
                    totalSlides: this.slides.length
                }
            }));

            // If the user has left the dots/nav area, ensure autoplay resumes after delay
            if (!this.pauseOnHover && !this.isUserInteracting && !this.autoplayTimer) {
                this.startAutoplay();
            }
        }
        
        nextSlide() {
            this.goToSlide(this.currentSlide + 1);
            // If autoplay is running, keep it seamless after manual advance
            if (!this.autoplayTimer && !this.isUserInteracting) {
                this.startAutoplay();
            }
        }
        
        previousSlide() {
            this.goToSlide(this.currentSlide - 1);
            if (!this.autoplayTimer && !this.isUserInteracting) {
                this.startAutoplay();
            }
        }
        
        updateActiveStates() {
            // Update slides
            this.slides.forEach((slide, index) => {
                slide.classList.toggle('active', index === this.currentSlide);
                slide.setAttribute('aria-hidden', index !== this.currentSlide);
            });
            
            // Update dots
            this.dots.forEach((dot, index) => {
                let slideIndex = parseInt(dot.dataset.msSlide);
                if (Number.isNaN(slideIndex)) slideIndex = index;
                const isActive = slideIndex === this.currentSlide;

                // ARIA and data state
                dot.setAttribute('aria-pressed', String(isActive));
                if (isActive) {
                    dot.setAttribute('data-active', 'true');
                } else {
                    dot.removeAttribute('data-active');
                }

                // Generic active class toggle (if they style it)
                dot.classList.toggle('active', isActive);

                // Optional custom classes provided via attributes
                const activeClass = dot.dataset.msActiveClass || this.dotsActiveClass || this.defaultActiveClass;
                const inactiveClass = dot.dataset.msInactiveClass || this.dotsInactiveClass || this.defaultInactiveClass;
                if (activeClass) dot.classList.toggle(activeClass, isActive);
                if (inactiveClass) dot.classList.toggle(inactiveClass, !isActive);
            });
        }

        detectDotClasses() {
            if (!this.dots || this.dots.length === 0) return;
            // If classes are already provided via attributes, skip detection
            if (this.dotsActiveClass || this.dotsInactiveClass) return;
            // Find a class containing 'active' and 'inactive' among dot elements
            const classCounts = new Map();
            this.dots.forEach((dot) => {
                dot.classList.forEach((cls) => {
                    classCounts.set(cls, (classCounts.get(cls) || 0) + 1);
                });
            });
            // Prefer classes that explicitly include 'active'/'inactive'
            const allClasses = Array.from(classCounts.keys());
            const activeCandidate = allClasses.find((c) => /active/i.test(c));
            const inactiveCandidate = allClasses.find((c) => /inactive/i.test(c));
            if (activeCandidate) this.defaultActiveClass = activeCandidate;
            if (inactiveCandidate) this.defaultInactiveClass = inactiveCandidate;
        }
        
        syncWithWebflow() {
            // Sync our current slide with Webflow's active slide
            const activeWebflowDot = this.slider.querySelector('.w-slider-dot.w-active');
            if (activeWebflowDot) {
                const webflowDots = this.slider.querySelectorAll('.w-slider-dot');
                const activeIndex = Array.from(webflowDots).indexOf(activeWebflowDot);
                if (activeIndex !== -1 && activeIndex !== this.currentSlide) {
                    this.currentSlide = activeIndex;
                    this.updateActiveStates();
                }
            }
        }

        collectDots() {
            // If dots are not inside the slider, look for a sibling container in the same wrapper
            if (!this.dots || this.dots.length === 0) {
                let container = this.dotsContainer;
                if (!container && this.slider.parentElement) {
                    container = this.slider.parentElement.querySelector('[data-ms-code="slider-dots"]');
                }
                if (!container) {
                    // Try the closest ancestor wrapper then find dots within it that are siblings
                    const wrapper = this.slider.closest('[data-ms-slider-wrapper], .feature-slider-wrapper, section, div');
                    if (wrapper) {
                        // Prefer immediate sibling dots container
                        const siblingDots = Array.from(wrapper.querySelectorAll('[data-ms-code="slider-dots"]'))
                            .find((el) => el !== this.slider);
                        if (siblingDots) container = siblingDots;
                    }
                }
                if (container) {
                    this.dotsContainer = container;
                    this.dots = container.querySelectorAll('[data-ms-code="slider-dot"]');
                }
            }
        }

        // No custom nav buttons
        
        // Public methods for external control
        pause() {
            this.pauseAutoplay();
        }
        
        resume() {
            this.isUserInteracting = false;
            this.resumeAutoplay();
        }
        
        destroy() {
            this.pauseAutoplay();
            clearTimeout(this.resumeTimer);
            if (this.visibilityObserver) {
                try { this.visibilityObserver.disconnect(); } catch (e) {}
                this.visibilityObserver = null;
            }
            
            // Remove event listeners would go here if needed
            // This is a simplified version
        }

        setupVisibilityObserver() {
            if (!('IntersectionObserver' in window)) {
                // Fallback: start immediately
                this.startAutoplay();
                return;
            }
            const thresholds = [];
            const step = 0.1;
            for (let t = 0; t <= 1; t += step) thresholds.push(parseFloat(t.toFixed(1)));
            if (!thresholds.includes(this.visibleThreshold)) thresholds.push(this.visibleThreshold);
            thresholds.sort((a, b) => a - b);

            this.visibilityObserver = new IntersectionObserver((entries) => {
                entries.forEach((entry) => {
                    this.isInView = entry.isIntersecting && entry.intersectionRatio >= this.visibleThreshold;
                    if (this.isInView) {
                        // Resume/start autoplay only if not interacting
                        if (!this.isUserInteracting) {
                            this.startAutoplay();
                        }
                    } else {
                        this.pauseAutoplay();
                    }
                });
            }, { threshold: thresholds });

            this.visibilityObserver.observe(this.slider);
        }
    }
    
    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSliders);
    } else {
        initSliders();
    }
    
    // Expose the class globally for external access if needed
    window.MemberScript169 = {
        AutoSlider: AutoSlider,
        init: initSliders
    };
})();

</script>
Voir le Memberscript
JSON
Visibilité conditionnelle

#168 - Save Trusted Devices

Save trusted devices to extend user sessions and reduce repeated logins on your sites.


<!-- 💙 MEMBERSCRIPT #168 v0.1 💙 - SAVE TRUSTED DEVICE -->
<script>
(function() {
    const TRUST_EXPIRY_DAYS = 90;
    const MAX_TRUSTED_DEVICES = 5;
    const EXTENDED_SESSION_DAYS = 30;
  
    function generateDeviceIdentifier() {
      let id = localStorage.getItem('ms_device_id');
      if (id) return id;
      const info = {
        ua: navigator.userAgent,
        w: screen.width,
        h: screen.height,
        tz: Intl.DateTimeFormat().resolvedOptions().timeZone,
        plat: navigator.platform
      };
      id = btoa(JSON.stringify(info)).slice(0, 32);
      localStorage.setItem('ms_device_id', id);
      return id;
    }
  
    async function getTrustedDevices() {
      const ms = window.$memberstackDom;
      const memberJson = await ms.getMemberJSON();
      return Array.isArray(memberJson?.data?.trustedDevices) ? memberJson.data.trustedDevices : [];
    }
  
    async function saveTrustedDevices(devices) {
      const ms = window.$memberstackDom;
      const memberJson = await ms.getMemberJSON();
      memberJson.data = memberJson.data || {};
      memberJson.data.trustedDevices = devices;
      await ms.updateMemberJSON({ json: memberJson });
    }
  
    async function addTrustedDevice(id, name) {
      const now = new Date();
      const expires = new Date(now.getTime() + TRUST_EXPIRY_DAYS * 864e5).toISOString();
      const devices = await getTrustedDevices();
      const existing = devices.find(d => d.id === id);
  
      if (existing) {
        existing.trustedAt = now.toISOString();
        existing.expiresAt = expires;
      } else {
        if (devices.length >= MAX_TRUSTED_DEVICES) devices.shift();
        devices.push({
          id,
          trustedAt: now.toISOString(),
          expiresAt: expires,
          ua: navigator.userAgent.slice(0, 100),
          name: name
        });
      }
  
      await saveTrustedDevices(devices);
    }
  
    function getDeviceName() {
      const ua = navigator.userAgent;
      if (ua.includes('iPhone')) return 'iPhone';
      if (ua.includes('iPad')) return 'iPad';
      if (ua.includes('Android')) return 'Android';
      if (ua.includes('Mac')) return 'Mac';
      if (ua.includes('Windows')) return 'Windows';
      return 'Device';
    }
  
    function setExtendedSession() {
      const exp = new Date();
      exp.setDate(exp.getDate() + EXTENDED_SESSION_DAYS);
      document.cookie = `trustedDevice=true; expires=${exp.toUTCString()}; path=/; SameSite=Strict`;
    }
  
    function showNotice() {
      const el = document.querySelector('[data-ms-code="trust-device-notice"]');
      if (!el) return;
      el.style.display = 'block';
      sessionStorage.setItem('ms_new_device_detected', '1');
      sessionStorage.removeItem('ms_device_trusted');
    }
  
    function hideNotice() {
      const el = document.querySelector('[data-ms-code="trust-device-notice"]');
      if (el) el.style.display = 'none';
      sessionStorage.removeItem('ms_new_device_detected');
      sessionStorage.setItem('ms_device_trusted', '1');
    }
  
    function setupTrustBtn() {
      document.addEventListener('click', async e => {
        const btn = e.target.closest('[data-ms-code="trust-device-btn"]');
        if (!btn) return;
        e.preventDefault();
        btn.disabled = true;
        btn.innerText = 'Trusting Device...';
  
        const member = await window.$memberstackDom.getCurrentMember();
        if (!member?.data) {
          alert('Please log in first.');
          btn.disabled = false;
          btn.innerText = 'Trust This Device';
          return;
        }
  
        const id = generateDeviceIdentifier();
        const name = getDeviceName();
        await addTrustedDevice(id, name);
        setExtendedSession();
  
        btn.innerText = 'Device Trusted!';
        setTimeout(hideNotice, 1000);
      });
    }
  
    async function checkTrust() {
      const member = await window.$memberstackDom.getCurrentMember();
      if (!member) {
        hideNotice();
        return;
      }

      const id = generateDeviceIdentifier();
      const devices = await getTrustedDevices();
      
      // Check if current device is trusted
      const trusted = devices.some(d => {
        // Check if device ID matches and hasn't expired
        if (d.id === id && new Date(d.expiresAt) > new Date()) {
          return true;
        }
        // Also check by user agent for better matching
        if (d.ua && d.ua.includes(navigator.userAgent.slice(0, 50)) && new Date(d.expiresAt) > new Date()) {
          return true;
        }
        return false;
      });

      if (trusted) {
        hideNotice();
        setExtendedSession();
        // Also store in sessionStorage to prevent showing on refresh
        sessionStorage.setItem('ms_device_trusted', '1');
      } else {
        // Check if we already showed the notice in this session or have the cookie
        if (sessionStorage.getItem('ms_device_trusted') === '1' || 
            document.cookie.includes('trustedDevice=true')) {
          hideNotice();
        } else {
          showNotice();
        }
      }
    }
  
    function preventRedirect() {
      window.addEventListener('ms:member:will-redirect', e => {
        if (sessionStorage.getItem('ms_new_device_detected') === '1') {
          e.preventDefault();
        }
      });
    }
  
    function init() {
      // Immediately hide notice if device is already trusted in this session
      if (sessionStorage.getItem('ms_device_trusted') === '1' || 
          document.cookie.includes('trustedDevice=true')) {
        hideNotice();
      }
      
      if (window.$memberstackDom?.getCurrentMember) {
        setupTrustBtn();
        preventRedirect();
        window.addEventListener('ms:member:login', () => setTimeout(checkTrust, 1000));
        window.addEventListener('ms:member:info-changed', checkTrust);
        checkTrust();
      } else {
        setTimeout(init, 500);
      }
    }
  
    document.addEventListener('DOMContentLoaded', init);
  })();
</script>
v0.1

<!-- 💙 MEMBERSCRIPT #168 v0.1 💙 - SAVE TRUSTED DEVICE -->
<script>
(function() {
    const TRUST_EXPIRY_DAYS = 90;
    const MAX_TRUSTED_DEVICES = 5;
    const EXTENDED_SESSION_DAYS = 30;
  
    function generateDeviceIdentifier() {
      let id = localStorage.getItem('ms_device_id');
      if (id) return id;
      const info = {
        ua: navigator.userAgent,
        w: screen.width,
        h: screen.height,
        tz: Intl.DateTimeFormat().resolvedOptions().timeZone,
        plat: navigator.platform
      };
      id = btoa(JSON.stringify(info)).slice(0, 32);
      localStorage.setItem('ms_device_id', id);
      return id;
    }
  
    async function getTrustedDevices() {
      const ms = window.$memberstackDom;
      const memberJson = await ms.getMemberJSON();
      return Array.isArray(memberJson?.data?.trustedDevices) ? memberJson.data.trustedDevices : [];
    }
  
    async function saveTrustedDevices(devices) {
      const ms = window.$memberstackDom;
      const memberJson = await ms.getMemberJSON();
      memberJson.data = memberJson.data || {};
      memberJson.data.trustedDevices = devices;
      await ms.updateMemberJSON({ json: memberJson });
    }
  
    async function addTrustedDevice(id, name) {
      const now = new Date();
      const expires = new Date(now.getTime() + TRUST_EXPIRY_DAYS * 864e5).toISOString();
      const devices = await getTrustedDevices();
      const existing = devices.find(d => d.id === id);
  
      if (existing) {
        existing.trustedAt = now.toISOString();
        existing.expiresAt = expires;
      } else {
        if (devices.length >= MAX_TRUSTED_DEVICES) devices.shift();
        devices.push({
          id,
          trustedAt: now.toISOString(),
          expiresAt: expires,
          ua: navigator.userAgent.slice(0, 100),
          name: name
        });
      }
  
      await saveTrustedDevices(devices);
    }
  
    function getDeviceName() {
      const ua = navigator.userAgent;
      if (ua.includes('iPhone')) return 'iPhone';
      if (ua.includes('iPad')) return 'iPad';
      if (ua.includes('Android')) return 'Android';
      if (ua.includes('Mac')) return 'Mac';
      if (ua.includes('Windows')) return 'Windows';
      return 'Device';
    }
  
    function setExtendedSession() {
      const exp = new Date();
      exp.setDate(exp.getDate() + EXTENDED_SESSION_DAYS);
      document.cookie = `trustedDevice=true; expires=${exp.toUTCString()}; path=/; SameSite=Strict`;
    }
  
    function showNotice() {
      const el = document.querySelector('[data-ms-code="trust-device-notice"]');
      if (!el) return;
      el.style.display = 'block';
      sessionStorage.setItem('ms_new_device_detected', '1');
      sessionStorage.removeItem('ms_device_trusted');
    }
  
    function hideNotice() {
      const el = document.querySelector('[data-ms-code="trust-device-notice"]');
      if (el) el.style.display = 'none';
      sessionStorage.removeItem('ms_new_device_detected');
      sessionStorage.setItem('ms_device_trusted', '1');
    }
  
    function setupTrustBtn() {
      document.addEventListener('click', async e => {
        const btn = e.target.closest('[data-ms-code="trust-device-btn"]');
        if (!btn) return;
        e.preventDefault();
        btn.disabled = true;
        btn.innerText = 'Trusting Device...';
  
        const member = await window.$memberstackDom.getCurrentMember();
        if (!member?.data) {
          alert('Please log in first.');
          btn.disabled = false;
          btn.innerText = 'Trust This Device';
          return;
        }
  
        const id = generateDeviceIdentifier();
        const name = getDeviceName();
        await addTrustedDevice(id, name);
        setExtendedSession();
  
        btn.innerText = 'Device Trusted!';
        setTimeout(hideNotice, 1000);
      });
    }
  
    async function checkTrust() {
      const member = await window.$memberstackDom.getCurrentMember();
      if (!member) {
        hideNotice();
        return;
      }

      const id = generateDeviceIdentifier();
      const devices = await getTrustedDevices();
      
      // Check if current device is trusted
      const trusted = devices.some(d => {
        // Check if device ID matches and hasn't expired
        if (d.id === id && new Date(d.expiresAt) > new Date()) {
          return true;
        }
        // Also check by user agent for better matching
        if (d.ua && d.ua.includes(navigator.userAgent.slice(0, 50)) && new Date(d.expiresAt) > new Date()) {
          return true;
        }
        return false;
      });

      if (trusted) {
        hideNotice();
        setExtendedSession();
        // Also store in sessionStorage to prevent showing on refresh
        sessionStorage.setItem('ms_device_trusted', '1');
      } else {
        // Check if we already showed the notice in this session or have the cookie
        if (sessionStorage.getItem('ms_device_trusted') === '1' || 
            document.cookie.includes('trustedDevice=true')) {
          hideNotice();
        } else {
          showNotice();
        }
      }
    }
  
    function preventRedirect() {
      window.addEventListener('ms:member:will-redirect', e => {
        if (sessionStorage.getItem('ms_new_device_detected') === '1') {
          e.preventDefault();
        }
      });
    }
  
    function init() {
      // Immediately hide notice if device is already trusted in this session
      if (sessionStorage.getItem('ms_device_trusted') === '1' || 
          document.cookie.includes('trustedDevice=true')) {
        hideNotice();
      }
      
      if (window.$memberstackDom?.getCurrentMember) {
        setupTrustBtn();
        preventRedirect();
        window.addEventListener('ms:member:login', () => setTimeout(checkTrust, 1000));
        window.addEventListener('ms:member:info-changed', checkTrust);
        checkTrust();
      } else {
        setTimeout(init, 500);
      }
    }
  
    document.addEventListener('DOMContentLoaded', init);
  })();
</script>
Voir le Memberscript
Sécurité

#167 - Login Form Throttle With Security Check

Limit failed login attempts and trigger a timed security check to prevent brute force attacks.


<!-- 💙 MEMBERSCRIPT #167 v0.1 💙 - LOGIN THROTTLE WITH SECURITY CHECK -->
<script>
(function() {
  const MAX_ATTEMPTS = 3;
  const STORAGE_KEY = 'ms_login_attempts';
  const SECURITY_DELAY = 30; // seconds
  
  const formWrapper = document.querySelector('[data-ms-code="login-throttle-form"]');
  const submitButton = document.querySelector('[data-ms-code="throttle-submit"]');
  const errorMessage = document.querySelector('[data-ms-code="throttle-error"]');
  const attemptCounter = document.querySelector('[data-ms-code="attempt-counter"]');
  const loginForm = formWrapper?.querySelector('[data-ms-form="login"]');
  
  if (!formWrapper || !submitButton || !loginForm) {
    console.warn('MemberScript #167: Required elements not found.');
    return;
  }

  function getAttemptData() {
    const stored = sessionStorage.getItem(STORAGE_KEY);
    if (!stored) return { count: 0, timestamp: 0 };
    
    try {
      return JSON.parse(stored);
    } catch {
      return { count: 0, timestamp: 0 };
    }
  }

  function setAttemptData(count, timestamp = Date.now()) {
    sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ count, timestamp }));
  }

  let attemptData = getAttemptData();
  let securityTimer = null;

  function updateUIState() {
    const remainingAttempts = MAX_ATTEMPTS - attemptData.count;
    
    // Don't update UI if security timer is running
    if (securityTimer) {
      return;
    }
    
    if (attemptData.count >= MAX_ATTEMPTS) {
      showSecurityCheck();
      showError('Too many failed attempts. Please wait for security verification.');
    } else {
      hideSecurityCheck();
      if (attemptData.count > 0) {
        showError(`Login failed. ${remainingAttempts} attempt${remainingAttempts === 1 ? '' : 's'} remaining.`);
      } else {
        hideError();
      }
    }
    
    if (attemptCounter) {
      if (attemptData.count >= MAX_ATTEMPTS) {
        attemptCounter.textContent = 'Security verification required';
        attemptCounter.style.color = '#e74c3c';
      } else if (attemptData.count > 0) {
        attemptCounter.textContent = `${remainingAttempts} attempt${remainingAttempts === 1 ? '' : 's'} remaining`;
        attemptCounter.style.color = attemptData.count >= 2 ? '#e67e22' : '#95a5a6';
      } else {
        attemptCounter.textContent = '';
      }
    }
    
    console.log(`UI State: ${attemptData.count}/${MAX_ATTEMPTS} attempts, security timer: ${securityTimer ? 'active' : 'inactive'}`);
  }

  function showSecurityCheck() {
    let securityBox = formWrapper.querySelector('[data-ms-security-check]');
    
    if (!securityBox) {
      securityBox = document.createElement('div');
      securityBox.setAttribute('data-ms-security-check', 'true');
      securityBox.style.cssText = `
        width: 100%;
        margin: 15px 0;
        padding: 20px;
        border: 2px solid #ff6b6b;
        border-radius: 8px;
        background: #fff5f5;
        text-align: center;
        box-sizing: border-box;
      `;
      
      submitButton.parentNode.insertBefore(securityBox, submitButton);
    }
    
    securityBox.innerHTML = `
      <strong>Security Check</strong><br>
      <small>Please wait ${SECURITY_DELAY} seconds before trying again</small><br>
      <div id="security-countdown" style="margin-top: 10px; font-size: 24px; font-weight: bold; color: #ff6b6b;">${SECURITY_DELAY}</div>
    `;
    
    // Disable submit button
    submitButton.disabled = true;
    submitButton.style.opacity = '0.5';
    
    // Clear any existing timer
    if (securityTimer) {
      clearInterval(securityTimer);
    }
    
    // Start countdown
    let timeLeft = SECURITY_DELAY;
    securityTimer = setInterval(() => {
      timeLeft--;
      const countdown = securityBox.querySelector('#security-countdown');
      if (countdown) {
        countdown.textContent = timeLeft;
      }
      
      if (timeLeft <= 0) {
        clearInterval(securityTimer);
        securityTimer = null;
        
        securityBox.innerHTML = `
          <strong style="color: #27ae60;">✓ Security Check Complete</strong><br>
          <small>You may now try logging in again</small>
        `;
        
        // Re-enable submit button
        submitButton.disabled = false;
        submitButton.style.opacity = '1';
        
        // Reset attempt count so user gets fresh attempts
        attemptData.count = 0;
        setAttemptData(0);
        
        // Update UI to reflect fresh state
        updateUIState();
        
        // Hide security box after 5 seconds (longer so user sees message)
        setTimeout(() => {
          if (securityBox) {
            securityBox.style.display = 'none';
          }
        }, 5000);
      }
    }, 1000);
  }

  function hideSecurityCheck() {
    const securityBox = formWrapper.querySelector('[data-ms-security-check]');
    if (securityBox && !securityTimer) {
      securityBox.remove();
    }
    
    if (securityTimer) {
      clearInterval(securityTimer);
      securityTimer = null;
    }
    
    // Only enable button if we're not in security check mode
    if (attemptData.count < MAX_ATTEMPTS) {
      submitButton.disabled = false;
      submitButton.style.opacity = '1';
    }
  }

  function showError(message) {
    if (errorMessage) {
      errorMessage.textContent = message;
      errorMessage.style.display = 'block';
    }
  }

  function hideError() {
    if (errorMessage) {
      errorMessage.style.display = 'none';
    }
  }

  function handleSubmit(event) {
    // Prevent submission if security check is active
    if (attemptData.count >= MAX_ATTEMPTS && securityTimer) {
      event.preventDefault();
      showError('Please wait for the security check to complete.');
      return false;
    }
    
    const currentAttemptCount = attemptData.count;
    
    setTimeout(() => {
      checkLoginResult(currentAttemptCount);
    }, 1500);
  }

  function checkLoginResult(previousAttemptCount) {
    const hasError = document.querySelector('[data-ms-error]') || 
                    document.querySelector('.w-form-fail:not([style*="display: none"])') ||
                    formWrapper.querySelector('.w-form-fail:not([style*="display: none"])') ||
                    loginForm.querySelector('[data-ms-error]');

    if (window.$memberstackDom) {
      window.$memberstackDom.getCurrentMember().then(member => {
        if (member && member.id) {
          // Success! Reset everything
          sessionStorage.removeItem(STORAGE_KEY);
          attemptData = { count: 0, timestamp: 0 };
          hideError();
          hideSecurityCheck();
          
          if (attemptCounter) {
            attemptCounter.textContent = 'Login successful!';
            attemptCounter.style.color = '#27ae60';
          }
          
        } else if (hasError) {
          handleFailedLogin(previousAttemptCount);
        }
      }).catch(() => {
        if (hasError) {
          handleFailedLogin(previousAttemptCount);
        }
      });
    } else {
      if (hasError) {
        handleFailedLogin(previousAttemptCount);
      } else {
        const successElement = document.querySelector('.w-form-done:not([style*="display: none"])');
        if (successElement) {
          sessionStorage.removeItem(STORAGE_KEY);
          attemptData = { count: 0, timestamp: 0 };
          hideError();
          hideSecurityCheck();
        }
      }
    }
  }

  function handleFailedLogin(previousAttemptCount) {
    attemptData.count = previousAttemptCount + 1;
    setAttemptData(attemptData.count);
    
    console.log(`Failed login attempt ${attemptData.count}/${MAX_ATTEMPTS}`);
    
    // Force UI update after a brief delay to ensure DOM is ready
    setTimeout(() => {
      updateUIState();
    }, 100);
  }

  function init() {
    loginForm.addEventListener('submit', handleSubmit);
    updateUIState();
    
    if (window.$memberstackDom) {
      window.$memberstackDom.getCurrentMember().then(member => {
        if (member && member.id) {
          sessionStorage.removeItem(STORAGE_KEY);
          attemptData = { count: 0, timestamp: 0 };
        }
      }).catch(() => {
        // No user logged in
      });
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

})();
</script>
v0.1

<!-- 💙 MEMBERSCRIPT #167 v0.1 💙 - LOGIN THROTTLE WITH SECURITY CHECK -->
<script>
(function() {
  const MAX_ATTEMPTS = 3;
  const STORAGE_KEY = 'ms_login_attempts';
  const SECURITY_DELAY = 30; // seconds
  
  const formWrapper = document.querySelector('[data-ms-code="login-throttle-form"]');
  const submitButton = document.querySelector('[data-ms-code="throttle-submit"]');
  const errorMessage = document.querySelector('[data-ms-code="throttle-error"]');
  const attemptCounter = document.querySelector('[data-ms-code="attempt-counter"]');
  const loginForm = formWrapper?.querySelector('[data-ms-form="login"]');
  
  if (!formWrapper || !submitButton || !loginForm) {
    console.warn('MemberScript #167: Required elements not found.');
    return;
  }

  function getAttemptData() {
    const stored = sessionStorage.getItem(STORAGE_KEY);
    if (!stored) return { count: 0, timestamp: 0 };
    
    try {
      return JSON.parse(stored);
    } catch {
      return { count: 0, timestamp: 0 };
    }
  }

  function setAttemptData(count, timestamp = Date.now()) {
    sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ count, timestamp }));
  }

  let attemptData = getAttemptData();
  let securityTimer = null;

  function updateUIState() {
    const remainingAttempts = MAX_ATTEMPTS - attemptData.count;
    
    // Don't update UI if security timer is running
    if (securityTimer) {
      return;
    }
    
    if (attemptData.count >= MAX_ATTEMPTS) {
      showSecurityCheck();
      showError('Too many failed attempts. Please wait for security verification.');
    } else {
      hideSecurityCheck();
      if (attemptData.count > 0) {
        showError(`Login failed. ${remainingAttempts} attempt${remainingAttempts === 1 ? '' : 's'} remaining.`);
      } else {
        hideError();
      }
    }
    
    if (attemptCounter) {
      if (attemptData.count >= MAX_ATTEMPTS) {
        attemptCounter.textContent = 'Security verification required';
        attemptCounter.style.color = '#e74c3c';
      } else if (attemptData.count > 0) {
        attemptCounter.textContent = `${remainingAttempts} attempt${remainingAttempts === 1 ? '' : 's'} remaining`;
        attemptCounter.style.color = attemptData.count >= 2 ? '#e67e22' : '#95a5a6';
      } else {
        attemptCounter.textContent = '';
      }
    }
    
    console.log(`UI State: ${attemptData.count}/${MAX_ATTEMPTS} attempts, security timer: ${securityTimer ? 'active' : 'inactive'}`);
  }

  function showSecurityCheck() {
    let securityBox = formWrapper.querySelector('[data-ms-security-check]');
    
    if (!securityBox) {
      securityBox = document.createElement('div');
      securityBox.setAttribute('data-ms-security-check', 'true');
      securityBox.style.cssText = `
        width: 100%;
        margin: 15px 0;
        padding: 20px;
        border: 2px solid #ff6b6b;
        border-radius: 8px;
        background: #fff5f5;
        text-align: center;
        box-sizing: border-box;
      `;
      
      submitButton.parentNode.insertBefore(securityBox, submitButton);
    }
    
    securityBox.innerHTML = `
      <strong>Security Check</strong><br>
      <small>Please wait ${SECURITY_DELAY} seconds before trying again</small><br>
      <div id="security-countdown" style="margin-top: 10px; font-size: 24px; font-weight: bold; color: #ff6b6b;">${SECURITY_DELAY}</div>
    `;
    
    // Disable submit button
    submitButton.disabled = true;
    submitButton.style.opacity = '0.5';
    
    // Clear any existing timer
    if (securityTimer) {
      clearInterval(securityTimer);
    }
    
    // Start countdown
    let timeLeft = SECURITY_DELAY;
    securityTimer = setInterval(() => {
      timeLeft--;
      const countdown = securityBox.querySelector('#security-countdown');
      if (countdown) {
        countdown.textContent = timeLeft;
      }
      
      if (timeLeft <= 0) {
        clearInterval(securityTimer);
        securityTimer = null;
        
        securityBox.innerHTML = `
          <strong style="color: #27ae60;">✓ Security Check Complete</strong><br>
          <small>You may now try logging in again</small>
        `;
        
        // Re-enable submit button
        submitButton.disabled = false;
        submitButton.style.opacity = '1';
        
        // Reset attempt count so user gets fresh attempts
        attemptData.count = 0;
        setAttemptData(0);
        
        // Update UI to reflect fresh state
        updateUIState();
        
        // Hide security box after 5 seconds (longer so user sees message)
        setTimeout(() => {
          if (securityBox) {
            securityBox.style.display = 'none';
          }
        }, 5000);
      }
    }, 1000);
  }

  function hideSecurityCheck() {
    const securityBox = formWrapper.querySelector('[data-ms-security-check]');
    if (securityBox && !securityTimer) {
      securityBox.remove();
    }
    
    if (securityTimer) {
      clearInterval(securityTimer);
      securityTimer = null;
    }
    
    // Only enable button if we're not in security check mode
    if (attemptData.count < MAX_ATTEMPTS) {
      submitButton.disabled = false;
      submitButton.style.opacity = '1';
    }
  }

  function showError(message) {
    if (errorMessage) {
      errorMessage.textContent = message;
      errorMessage.style.display = 'block';
    }
  }

  function hideError() {
    if (errorMessage) {
      errorMessage.style.display = 'none';
    }
  }

  function handleSubmit(event) {
    // Prevent submission if security check is active
    if (attemptData.count >= MAX_ATTEMPTS && securityTimer) {
      event.preventDefault();
      showError('Please wait for the security check to complete.');
      return false;
    }
    
    const currentAttemptCount = attemptData.count;
    
    setTimeout(() => {
      checkLoginResult(currentAttemptCount);
    }, 1500);
  }

  function checkLoginResult(previousAttemptCount) {
    const hasError = document.querySelector('[data-ms-error]') || 
                    document.querySelector('.w-form-fail:not([style*="display: none"])') ||
                    formWrapper.querySelector('.w-form-fail:not([style*="display: none"])') ||
                    loginForm.querySelector('[data-ms-error]');

    if (window.$memberstackDom) {
      window.$memberstackDom.getCurrentMember().then(member => {
        if (member && member.id) {
          // Success! Reset everything
          sessionStorage.removeItem(STORAGE_KEY);
          attemptData = { count: 0, timestamp: 0 };
          hideError();
          hideSecurityCheck();
          
          if (attemptCounter) {
            attemptCounter.textContent = 'Login successful!';
            attemptCounter.style.color = '#27ae60';
          }
          
        } else if (hasError) {
          handleFailedLogin(previousAttemptCount);
        }
      }).catch(() => {
        if (hasError) {
          handleFailedLogin(previousAttemptCount);
        }
      });
    } else {
      if (hasError) {
        handleFailedLogin(previousAttemptCount);
      } else {
        const successElement = document.querySelector('.w-form-done:not([style*="display: none"])');
        if (successElement) {
          sessionStorage.removeItem(STORAGE_KEY);
          attemptData = { count: 0, timestamp: 0 };
          hideError();
          hideSecurityCheck();
        }
      }
    }
  }

  function handleFailedLogin(previousAttemptCount) {
    attemptData.count = previousAttemptCount + 1;
    setAttemptData(attemptData.count);
    
    console.log(`Failed login attempt ${attemptData.count}/${MAX_ATTEMPTS}`);
    
    // Force UI update after a brief delay to ensure DOM is ready
    setTimeout(() => {
      updateUIState();
    }, 100);
  }

  function init() {
    loginForm.addEventListener('submit', handleSubmit);
    updateUIState();
    
    if (window.$memberstackDom) {
      window.$memberstackDom.getCurrentMember().then(member => {
        if (member && member.id) {
          sessionStorage.removeItem(STORAGE_KEY);
          attemptData = { count: 0, timestamp: 0 };
        }
      }).catch(() => {
        // No user logged in
      });
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

})();
</script>
Voir le Memberscript
Visibilité conditionnelle

#166 - Show or Hide Content Based on Regions

Show or hide Webflow content based on a visitor’s country using simple data attributes.


<!-- 💙 MEMBERSCRIPT #166 v0.1 💙 - GEO‑GATED REGION BLOCKER (Stable Version) -->

<script>
(function () {
  // STEP 1: Store and remove locale-show elements
  const localeShowElements = [];
  document.querySelectorAll('[data-ms-code="locale-show"]').forEach(el => {
    localeShowElements.push({
      el,
      parent: el.parentNode,
      next: el.nextSibling
    });
    el.remove();
  });

  // STEP 2: Store and remove locale-hide elements
  const localeHideElements = [];
  document.querySelectorAll('[data-ms-code="locale-hide"]').forEach(el => {
    localeHideElements.push({
      el,
      parent: el.parentNode,
      next: el.nextSibling
    });
    el.remove();
  });

  // STEP 3: Safe DOM reinsertion
  function safeInsert(parent, el, next) {
    if (next && parent.contains(next)) {
      parent.insertBefore(el, next);
    } else {
      parent.appendChild(el);
    }
  }

  // STEP 4: Get country using two fallback-safe APIs
  async function getUserCountry() {
    try {
      const res = await fetch('https://api.country.is/');
      const data = await res.json();
      if (data && data.country) return data.country.toUpperCase();
    } catch (err1) {
      try {
        const res = await fetch('https://ipwho.is/');
        const data = await res.json();
        if (data && data.success && data.country_code) {
          return data.country_code.toUpperCase();
        }
      } catch (err2) {
        console.error('Geolocation failed:', err2);
      }
    }
    return null;
  }

  // STEP 5: Run logic after detecting country
  getUserCountry().then(userCountry => {
    if (!userCountry) return;

    // Show if user's country is allowed
    localeShowElements.forEach(({ el, parent, next }) => {
      const allowed = (el.getAttribute('data-ms-countries') || '')
        .split(',')
        .map(c => c.trim().toUpperCase());
      if (allowed.includes(userCountry)) {
        safeInsert(parent, el, next);
      }
    });

    // Hide if user's country is blocked
    localeHideElements.forEach(({ el, parent, next }) => {
      const blocked = (el.getAttribute('data-ms-countries') || '')
        .split(',')
        .map(c => c.trim().toUpperCase());
      if (!blocked.includes(userCountry)) {
        safeInsert(parent, el, next);
      }
    });
  });
})();
</script>
v0.1

<!-- 💙 MEMBERSCRIPT #166 v0.1 💙 - GEO‑GATED REGION BLOCKER (Stable Version) -->

<script>
(function () {
  // STEP 1: Store and remove locale-show elements
  const localeShowElements = [];
  document.querySelectorAll('[data-ms-code="locale-show"]').forEach(el => {
    localeShowElements.push({
      el,
      parent: el.parentNode,
      next: el.nextSibling
    });
    el.remove();
  });

  // STEP 2: Store and remove locale-hide elements
  const localeHideElements = [];
  document.querySelectorAll('[data-ms-code="locale-hide"]').forEach(el => {
    localeHideElements.push({
      el,
      parent: el.parentNode,
      next: el.nextSibling
    });
    el.remove();
  });

  // STEP 3: Safe DOM reinsertion
  function safeInsert(parent, el, next) {
    if (next && parent.contains(next)) {
      parent.insertBefore(el, next);
    } else {
      parent.appendChild(el);
    }
  }

  // STEP 4: Get country using two fallback-safe APIs
  async function getUserCountry() {
    try {
      const res = await fetch('https://api.country.is/');
      const data = await res.json();
      if (data && data.country) return data.country.toUpperCase();
    } catch (err1) {
      try {
        const res = await fetch('https://ipwho.is/');
        const data = await res.json();
        if (data && data.success && data.country_code) {
          return data.country_code.toUpperCase();
        }
      } catch (err2) {
        console.error('Geolocation failed:', err2);
      }
    }
    return null;
  }

  // STEP 5: Run logic after detecting country
  getUserCountry().then(userCountry => {
    if (!userCountry) return;

    // Show if user's country is allowed
    localeShowElements.forEach(({ el, parent, next }) => {
      const allowed = (el.getAttribute('data-ms-countries') || '')
        .split(',')
        .map(c => c.trim().toUpperCase());
      if (allowed.includes(userCountry)) {
        safeInsert(parent, el, next);
      }
    });

    // Hide if user's country is blocked
    localeHideElements.forEach(({ el, parent, next }) => {
      const blocked = (el.getAttribute('data-ms-countries') || '')
        .split(',')
        .map(c => c.trim().toUpperCase());
      if (!blocked.includes(userCountry)) {
        safeInsert(parent, el, next);
      }
    });
  });
})();
</script>
Voir le Memberscript
UX

#165 - Typing Animation in a Search Bar

Create an animated typing effect in search bar placeholders that cycles through custom suggestions.


<!-- 💙 MEMBERSCRIPT #165 v0.1 💙 - TYPING ANIMATION IN A FUNCTIONAL SEARCH BAR -->
<script>

(function() {
  const searchInput = document.querySelector('[data-ms-code="search-bar"]');
  if (!searchInput) return;

  const suggestions = [];
  for (let i = 1; i <= 5; i++) {
    const suggestion = searchInput.getAttribute(`data-ms-suggestion-${i}`);
    if (suggestion) suggestions.push(suggestion);
  }
  if (suggestions.length === 0) return;

  let suggestionIndex = 0;
  let charIndex = 0;
  let typing;
  let isAnimating = false;
  let originalPlaceholder = searchInput.placeholder || '';

  function typeSuggestion() {
    if (!isAnimating) return;
    
    const current = suggestions[suggestionIndex];
    searchInput.placeholder = current.slice(0, charIndex++);
    
    if (charIndex <= current.length) {
      typing = setTimeout(typeSuggestion, 80);
    } else {
      setTimeout(eraseSuggestion, 1200);
    }
  }

  function eraseSuggestion() {
    if (!isAnimating) return;
    
    const current = suggestions[suggestionIndex];
    searchInput.placeholder = current.slice(0, --charIndex);
    
    if (charIndex > 0) {
      typing = setTimeout(eraseSuggestion, 40);
    } else {
      suggestionIndex = (suggestionIndex + 1) % suggestions.length;
      setTimeout(typeSuggestion, 500);
    }
  }

  function stopAnimation() {
    isAnimating = false;
    clearTimeout(typing);
    searchInput.placeholder = originalPlaceholder;
  }

  function startAnimation() {
    if (searchInput.value.trim() !== '') return;
    
    isAnimating = true;
    charIndex = 0;
    typeSuggestion();
  }

  // Event listeners
  searchInput.addEventListener("focus", stopAnimation);
  searchInput.addEventListener("blur", () => {
    if (searchInput.value.trim() === '') {
      setTimeout(startAnimation, 500);
    }
  });
  searchInput.addEventListener("input", () => {
    if (isAnimating) stopAnimation();
  });

  // Start animation after delay
  setTimeout(() => {
    if (searchInput.value.trim() === '' && document.activeElement !== searchInput) {
      startAnimation();
    }
  }, 2000);
})();

</script>
v0.1

<!-- 💙 MEMBERSCRIPT #165 v0.1 💙 - TYPING ANIMATION IN A FUNCTIONAL SEARCH BAR -->
<script>

(function() {
  const searchInput = document.querySelector('[data-ms-code="search-bar"]');
  if (!searchInput) return;

  const suggestions = [];
  for (let i = 1; i <= 5; i++) {
    const suggestion = searchInput.getAttribute(`data-ms-suggestion-${i}`);
    if (suggestion) suggestions.push(suggestion);
  }
  if (suggestions.length === 0) return;

  let suggestionIndex = 0;
  let charIndex = 0;
  let typing;
  let isAnimating = false;
  let originalPlaceholder = searchInput.placeholder || '';

  function typeSuggestion() {
    if (!isAnimating) return;
    
    const current = suggestions[suggestionIndex];
    searchInput.placeholder = current.slice(0, charIndex++);
    
    if (charIndex <= current.length) {
      typing = setTimeout(typeSuggestion, 80);
    } else {
      setTimeout(eraseSuggestion, 1200);
    }
  }

  function eraseSuggestion() {
    if (!isAnimating) return;
    
    const current = suggestions[suggestionIndex];
    searchInput.placeholder = current.slice(0, --charIndex);
    
    if (charIndex > 0) {
      typing = setTimeout(eraseSuggestion, 40);
    } else {
      suggestionIndex = (suggestionIndex + 1) % suggestions.length;
      setTimeout(typeSuggestion, 500);
    }
  }

  function stopAnimation() {
    isAnimating = false;
    clearTimeout(typing);
    searchInput.placeholder = originalPlaceholder;
  }

  function startAnimation() {
    if (searchInput.value.trim() !== '') return;
    
    isAnimating = true;
    charIndex = 0;
    typeSuggestion();
  }

  // Event listeners
  searchInput.addEventListener("focus", stopAnimation);
  searchInput.addEventListener("blur", () => {
    if (searchInput.value.trim() === '') {
      setTimeout(startAnimation, 500);
    }
  });
  searchInput.addEventListener("input", () => {
    if (isAnimating) stopAnimation();
  });

  // Start animation after delay
  setTimeout(() => {
    if (searchInput.value.trim() === '' && document.activeElement !== searchInput) {
      startAnimation();
    }
  }, 2000);
})();

</script>
Voir le Memberscript
Visibilité conditionnelle
UX

#164 - Animated Chat Conversation Layout

This script adds an engaging animated chat layout in Webflow, sequentially displaying messages.


<!-- 💙 MEMBERSCRIPT #164 v0.1 💙 - ANIMATED CHAT CONVERSATION LAYOUT -->

<script>
(function() {
  // Main animation function
  function animateChat() {
    const container = document.querySelector('[data-ms-code="chat-container"]');
    if (!container) return;

    const messages = Array.from(container.querySelectorAll('[data-ms-code="chat-message"]'));
    const button = container.querySelector('[data-ms-code="chat-button"]');
    let i = 0;

    // Reset any previous visibility
    messages.forEach(msg => msg.classList.remove('visible'));
    if (button) button.classList.remove('visible');

    function showNext() {
      if (i < messages.length) {
        messages[i].classList.add('visible');
        i++;
        setTimeout(showNext, 500); // next message in 500ms
      } else {
        if (button) button.classList.add('visible');

        /* ➕ LOOPING CODE BEGINS HERE */
        setTimeout(() => {
          messages.forEach(msg => msg.classList.remove('visible'));
          if (button) button.classList.remove('visible');
          animateChat(); // 👈 Recursive call to restart the animation
        }, 2000);
        /* To STOP looping: remove or comment out everything from this setTimeout block */
      }
    }

    showNext();
  }

  // Start animation as soon as DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', animateChat);
  } else {
    animateChat();
  }
})();
</script>
v0.1

<!-- 💙 MEMBERSCRIPT #164 v0.1 💙 - ANIMATED CHAT CONVERSATION LAYOUT -->

<script>
(function() {
  // Main animation function
  function animateChat() {
    const container = document.querySelector('[data-ms-code="chat-container"]');
    if (!container) return;

    const messages = Array.from(container.querySelectorAll('[data-ms-code="chat-message"]'));
    const button = container.querySelector('[data-ms-code="chat-button"]');
    let i = 0;

    // Reset any previous visibility
    messages.forEach(msg => msg.classList.remove('visible'));
    if (button) button.classList.remove('visible');

    function showNext() {
      if (i < messages.length) {
        messages[i].classList.add('visible');
        i++;
        setTimeout(showNext, 500); // next message in 500ms
      } else {
        if (button) button.classList.add('visible');

        /* ➕ LOOPING CODE BEGINS HERE */
        setTimeout(() => {
          messages.forEach(msg => msg.classList.remove('visible'));
          if (button) button.classList.remove('visible');
          animateChat(); // 👈 Recursive call to restart the animation
        }, 2000);
        /* To STOP looping: remove or comment out everything from this setTimeout block */
      }
    }

    showNext();
  }

  // Start animation as soon as DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', animateChat);
  } else {
    animateChat();
  }
})();
</script>
Voir le Memberscript
UX

#163 - Text Shuffle On Hover

Adds a playful text shuffle animation on hover—scrambling letters briefly before snapping back.


<!-- 💙 MEMBERSCRIPT #163 v0.1 💙 - TEXT SHUFFLE ON HOVER -->

<script>
(function() {
  // Helper: Shuffle the characters in a string
  function shuffle(str) {
    var arr = str.split('');
    for (let i = arr.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [arr[i], arr[j]] = [arr[j], arr[i]];
    }
    return arr.join('');
  }

  // Find all elements with data-ms-code="shuffle-text"
  var elements = document.querySelectorAll('[data-ms-code="shuffle-text"]');

  elements.forEach(function(el) {
    var originalText = el.textContent;
    var interval = null;
    var duration = 600; // ms
    var shuffleSpeed = 50; // ms

    el.addEventListener('mouseenter', function() {
      var start = Date.now();
      clearInterval(interval);
      interval = setInterval(function() {
        if (Date.now() - start > duration) {
          clearInterval(interval);
          el.textContent = originalText;
        } else {
          el.textContent = shuffle(originalText);
        }
      }, shuffleSpeed);
    });

    el.addEventListener('mouseleave', function() {
      clearInterval(interval);
      el.textContent = originalText;
    });
  });
})();
</script>
v0.1

<!-- 💙 MEMBERSCRIPT #163 v0.1 💙 - TEXT SHUFFLE ON HOVER -->

<script>
(function() {
  // Helper: Shuffle the characters in a string
  function shuffle(str) {
    var arr = str.split('');
    for (let i = arr.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [arr[i], arr[j]] = [arr[j], arr[i]];
    }
    return arr.join('');
  }

  // Find all elements with data-ms-code="shuffle-text"
  var elements = document.querySelectorAll('[data-ms-code="shuffle-text"]');

  elements.forEach(function(el) {
    var originalText = el.textContent;
    var interval = null;
    var duration = 600; // ms
    var shuffleSpeed = 50; // ms

    el.addEventListener('mouseenter', function() {
      var start = Date.now();
      clearInterval(interval);
      interval = setInterval(function() {
        if (Date.now() - start > duration) {
          clearInterval(interval);
          el.textContent = originalText;
        } else {
          el.textContent = shuffle(originalText);
        }
      }, shuffleSpeed);
    });

    el.addEventListener('mouseleave', function() {
      clearInterval(interval);
      el.textContent = originalText;
    });
  });
})();
</script>
Voir le Memberscript
Nous n'avons pas trouvé de scripts pour cette recherche... veuillez réessayer.
Slack

Besoin d'aide avec MemberScripts ? Rejoignez notre communauté Slack de plus de 5 500 membres ! 🙌

Les MemberScripts sont une ressource communautaire de Memberstack - si vous avez besoin d'aide pour les faire fonctionner avec votre projet, rejoignez le Slack de Memberstack 2.0 et demandez de l'aide !

Rejoignez notre Slack
Vitrine

Découvrez les entreprises qui ont réussi avec Memberstack

Ne vous contentez pas de nous croire sur parole, consultez les entreprises de toutes tailles qui font confiance à Memberstack pour leur authentification et leurs paiements.

Voir tous les exemples de réussite
Même Webflow utilise Memberstack !
Commencer à construire

Commencez à construire vos rêves

Memberstack est 100% gratuit jusqu'à ce que vous soyez prêt à vous lancer - alors, qu'attendez-vous ? Créez votre première application et commencez à construire dès aujourd'hui.