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é.
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.

#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>
<!-- 💙 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>

#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>
<!-- 💙 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>

#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>
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>

#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>
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>

#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>
<!-- 💙 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>

#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>
<!-- 💙 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>

#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>
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>

#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.

#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>
<!-- 💙 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>

#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>
<!-- 💙 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>

#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>
<!-- 💙 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>

#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>
<!-- 💙 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>

#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>
<!-- 💙 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>

#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>
<!-- 💙 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>

#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>
<!-- 💙 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>

#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>
<!-- 💙 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>

#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>
<!-- 💙 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>

#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>
<!-- 💙 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>

#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>
<!-- 💙 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>

#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>
<!-- 💙 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>
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 SlackDé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.
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.