Hi! Really loving sygnal library 
So, I have a webflow site with several access groups to manage a multi-step approval process, where each access group gives access to new content.
What I’m trying to do for the homepage is to make the welcome message in the homepage different for each access group, by only showing the div associated with the highest access they have (access is managed through webflow logic, so I’m unable to remove groups automatically).
However, I’m not really a developer, just a very stubborn designer trying to get things to work, so I just can’t get the code to work.
I’m using this script in the page footer code section, aside from the site-wide script for access groups:
<!-- Sygnal Attributes 5 | Memberships BETA -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.3.4/dist/css/webflow-membership.css">
<script defer src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.3.4/dist/nocode/webflow-membership.js"></script>
<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['getMembershipConfig',
(config) => {
config.accessGroupsFolder = '/sa5-ag';
config.accessGroups = [
'rechazado', 'pre-candidato', 'candidato', 'postulante', 'admin' // Orden de prioridad: Admin > Rechazado > Candidato > Pre-Candidato > Postulante
];
return config;
}]);
// Callback para manipular los datos del usuario a nivel de página
async function userInfoUpdatedPageCallback(user) {
const accessGroups = ['admin', 'rechazado', 'candidato', 'pre-candidato', 'postulante'];
let visibleGroup = null;
// Determinar el grupo de acceso más alto al que pertenece el usuario
for (let i = 0; i < accessGroups.length; i++) {
if (user.access_groups.includes(accessGroups[i])) {
visibleGroup = accessGroups[i];
break; // Prioridad: Admin > Rechazado > Candidato > Pre-Candidato > Postulante
}
}
// Mostrar el div correspondiente al grupo de acceso más alto y ocultar los demás
const elements = document.querySelectorAll('.access-group');
elements.forEach(element => {
if (element.classList.contains(`access-group-${visibleGroup}`)) {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
});
}
// Callback para manejar cambios en los datos del usuario a nivel de sitio
window.sa5.push(['userInfoChanged',
(user) => {
console.log("USER INFO CHANGED", user);
userInfoUpdatedPageCallback(user);
}
]);
</script>
Here is my view link and published site.
Would really love to get some help with this!
Thank you for your reply Micheal!
You guessed right, copy-paste and chat gpt is basically how I’m trying to code, plus a lot of reading to learn a bit.
So I changed up the page footer code a bit, and it SOMETIMES works, but in the console I mostly see that in the user_data_loaded item, access groups appear as FALSE 
:
New page footer code:
<script>
window.sa5.push(['userInfoChanged',
(user) => {
// Check to see if access_groups info is loaded
if(user.user_data_loaded.access_groups) {
// Find all elements tagged [access-group]
// and set the inner text to YES | NO
const elements = document.querySelectorAll('.access-group-postulante, .access-group-rechazado, .access-group-pre-candidato, .access-group-candidato, .access-group-admin');
elements.forEach(element => {
if(user.access_groups.includes('admin')) {
// If the user is in the 'admin' access group, remove hidden class only for access-group-admin
if (element.classList.contains('access-group-admin')) {
element.classList.remove('hidden-access');
}
} else if (user.access_groups.includes('candidato')) {
// If the user is in the 'candidato' access group, remove hidden class only for access-group-candidato
if (element.classList.contains('access-group-candidato')) {
element.classList.remove('hidden-access');
}
} else if (user.access_groups.includes('pre-candidato')) {
// If the user is in the 'pre-candidato' access group, remove hidden class only for access-group-pre-candidato
if (element.classList.contains('access-group-pre-candidato')) {
element.classList.remove('hidden-access');
}
} else if (user.access_groups.includes('rechazado')) {
// If the user is in the 'rechazado' access group, remove hidden class only for access-group-rechazado
if (element.classList.contains('access-group-rechazado')) {
element.classList.remove('hidden-access');
}
} else if (user.access_groups.includes('postulante')) {
// If the user is in the 'postulante' access group, remove hidden class only for access-group-postulante
if (element.classList.contains('access-group-postulante')) {
element.classList.remove('hidden-access');
}
}
});
}
}]);
</script>
And I do have the site-wide code for the groups to work:
<!-- Sygnal Attributes 5 | Memberships BETA -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.3.4/dist/css/webflow-membership.css">
<script defer src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.3.4/dist/nocode/webflow-membership.js"></script>
<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['getMembershipConfig',
(config) => {
config.accessGroupsFolder = '/sa5-ag';
config.accessGroups = [
'rechazado', 'pre-candidato', 'admin', 'candidato', 'postulante'
];
return config;
}]);
window.sa5.push(['userInfoChanged',
(user) => {
console.log("USER INFO CHANGED", user);
}]);
</script>
And I would love learning more through micro-consulting, but sadly I have no budget for this right now 
I’m not seeing any of the setup needed to support the access groups feature.
You’ll want to read through the setup guide again.
Hey Micheal, I did put this code site wide (in head code) and created the pages inside the /sa5-ag folder in my project.
Site wide code:
<!-- Sygnal Attributes 5 | Memberships BETA -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.3.4/dist/css/webflow-membership.css">
<script defer src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.3.4/dist/nocode/webflow-membership.js"></script>
<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['getMembershipConfig',
(config) => {
config.accessGroupsFolder = '/sa5-ag';
config.accessGroups = [
'rechazado', 'pre-candidato', 'admin', 'candidato', 'postulante'
];
return config;
}]);
window.sa5.push(['userInfoChanged',
(user) => {
console.log("USER INFO CHANGED", user);
}]);
</script>
Page Set-Up:
I don’t understand what I’m missing from the set up…
