How can I access the details of a logged-in user on a Webflow page to track items they have seen in a collection and exclude them next time they open the page?
TL;DR
- Use Memberstack or similar to enable user login and retrieve unique user IDs.
- Track viewed CMS items via localStorage or a backend using JavaScript.
- On page load, use JavaScript to compare viewed items and hide matches from the Collection list.
To track which Collection items a logged-in user has seen and exclude them on repeat visits, you’ll need to combine Webflow’s CMS, User Authentication tools, and custom logic via JavaScript and a backend/database or local storage. Webflow doesn’t natively provide per-user tracking in the Designer.
1. Enable User Login with a Third-Party Tool
- Webflow doesn’t currently support native user login features.
- Use a tool like Webflow Memberships (beta), Memberstack, Outseta, or Firebase Auth to associate visitors with unique user accounts.
- This allows you to securely identify a user across sessions.
2. Identify the Logged-In User
- With Memberstack or similar, once a user logs in, you can access their user ID or custom fields (e.g., via
window.MemberStack.onReady()). - Store this user ID in a JavaScript variable to link with viewed items.
3. Track Viewed Collection Items
- When a user views a Collection item (e.g., clicks a link or visits detail page), push the item ID or slug to local storage or a backend database tied to the user ID.
- Use
localStorage.setItem('viewedItems', JSON.stringify([...]))for local storage. - Alternatively, use Firebase or Supabase to store viewed item IDs server-side per user.
4. Exclude Viewed Items on the Page
- Use JavaScript to filter which Collection items are visible on page load.
- Loop through Collection items rendered by Webflow (e.g., using
document.querySelectorAll('[data-collection-item]')). - Compare each item’s unique identifier (like its slug or ID stored in a custom attribute) to the list of viewed items.
- Hide elements that match using element.style.display = 'none'.
Note: Webflow CMS items appear statically on the page, so dynamic filtering must occur on the front end.
5. Optionally Use a Backend for Persistent Tracking
- If localStorage is not enough (e.g., multiple devices), sync viewed items to a backend (e.g., Firebase, Supabase).
- On page load, fetch the user's viewed IDs and apply the same filtering.
Summary
To track and exclude previously viewed CMS items for logged-in users in Webflow, use a member management tool like Memberstack, log seen items to localStorage or a backend, and filter Collection items on load using custom JavaScript. Webflow’s CMS and Designer alone do not support this use case without custom logic.