# Issue getting access groups

**URL:** <https://sygnal-attr.discourse.group/t/issue-getting-access-groups/178>\
**Category:** Support\
**Created:** [March 22, 2024, 12:48pm UTC](https://sygnal-attr.discourse.group/t/issue-getting-access-groups/178 "2024-03-22T12:48:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rosario](https://avatars.discourse-cdn.com/v4/letter/r/b487fb/32.png) [@Rosario](https://sygnal-attr.discourse.group/u/Rosario)\
**Post date:** [March 22, 2024, 12:48pm UTC](https://sygnal-attr.discourse.group/t/issue-getting-access-groups/178/1 "2024-03-22T12:48:20Z")

</div>

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:

```auto
<!-- 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](https://preview.webflow.com/preview/udi-labs?utm_medium=preview_link&utm_source=designer&utm_content=udi-labs&preview=9eba7efa8a25211d7327d82935b80178&workflow=preview) and [published site](https://udi-labs.webflow.io/).

Would really love to get some help with this!

---

<div class="post-metadata">

**Author:** ![memetican](https://yyz2.discourse-cdn.com/free1/user_avatar/sygnal-attr.discourse.group/memetican/32/9_2.png) [@memetican](https://sygnal-attr.discourse.group/u/memetican)\
**Post date:** [April 2, 2024, 4:27am UTC](https://sygnal-attr.discourse.group/t/issue-getting-access-groups/178/2 "2024-04-02T04:27:16Z")

</div>

https://www.loom.com/embed/848dc9e75e5c44d7ac7c57db35ec8ce5

---

<div class="post-metadata">

**Author:** ![Rosario](https://avatars.discourse-cdn.com/v4/letter/r/b487fb/32.png) [@Rosario](https://sygnal-attr.discourse.group/u/Rosario)\
**Post date:** [April 2, 2024, 1:02pm UTC](https://sygnal-attr.discourse.group/t/issue-getting-access-groups/178/3 "2024-04-02T13:02:02Z")

</div>

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 🥲:

 ![Captura de Pantalla 2024-04-02 a la(s) 09.56.59](https://global.discourse-cdn.com/free1/uploads/sygnal_attr/original/1X/63be0d762a8064e97a3e21a1fe5b09f7d1934841.png)

**New page footer code:**

```auto
<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:**

```auto
<!-- 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 ☹

---

<div class="post-metadata">

**Author:** ![memetican](https://yyz2.discourse-cdn.com/free1/user_avatar/sygnal-attr.discourse.group/memetican/32/9_2.png) [@memetican](https://sygnal-attr.discourse.group/u/memetican)\
**Post date:** [April 2, 2024, 8:29pm UTC](https://sygnal-attr.discourse.group/t/issue-getting-access-groups/178/4 "2024-04-02T20:29:50Z")

</div>

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.

> **[Access Groups | Sygnal Attributes | Designed for Webflow](https://attr.sygnal.com/sa5-user-accounts/logged-in-user-info/access-groups#setting-up-access-groups)**
>
> Get the Access Groups of the Currently Logged-In User

---

<div class="post-metadata">

**Author:** ![Rosario](https://avatars.discourse-cdn.com/v4/letter/r/b487fb/32.png) [@Rosario](https://sygnal-attr.discourse.group/u/Rosario)\
**Post date:** [April 3, 2024, 5:13pm UTC](https://sygnal-attr.discourse.group/t/issue-getting-access-groups/178/5 "2024-04-03T17:13:03Z")

</div>

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:**

```auto
<!-- 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:**

 ![Captura de Pantalla 2024-04-03 a la(s) 14.14.10](https://global.discourse-cdn.com/free1/uploads/sygnal_attr/original/1X/e486f80c735f08e47a5be35f0ba0bd51cf6eb9cd.png)

I don’t understand what I’m missing from the set up…

---

<div class="post-metadata">

**Author:** ![memetican](https://yyz2.discourse-cdn.com/free1/user_avatar/sygnal-attr.discourse.group/memetican/32/9_2.png) [@memetican](https://sygnal-attr.discourse.group/u/memetican)\
**Post date:** [April 3, 2024, 6:14pm UTC](https://sygnal-attr.discourse.group/t/issue-getting-access-groups/178/6 "2024-04-03T18:14:50Z")

</div>

https://www.loom.com/embed/efcc888b4ddf4ec0ac3424a3c6b0486c