Can I use custom roles in code?

Is there a trick to show/hide certain elements depending on user roles?
I’ve set some custom roles via the Wix Dashboard which I’d like to use in code.

import wixUsers from 'wix-users';

$w.onReady(function(){
 const currentUser = wixUsers.currentUser;
 if (currentUser.loggedIn && currentUser.role === 'Custom Role'){
 //Show components:
        $w('#buttonCustomRole').show();
    }
});

There a reason this won’t work? The only way I can get the #buttonCustomRole to show is by setting the currentUser.role to ‘Members’… Nothing else seems to work exactly… If I set the role to ‘Admin’, it works (but only for site owner… no other Admins). I don’t want it to show for just any site member.

Currently There are three types of users: (https://www.wix.com/code/reference/wix-users.html)

  • Visitor - A user who is not logged into your site.

  • Member - A user who is logged into your site.

  • Admin - The owner of the site.
    You can maintain list of emails that you approving them to see those field and check by email.
    GL, Erez

$w.onReady(() => {
let ktos = wixUsers.currentUser;
if (ktos.loggedIn) setupPage();
wixUsers.onLogin((user) => {
setupPage();
});
});

export function setupPage() {
let user = wixUsers.currentUser;
user.getRoles()
.then((roles) => {

if (roles.length === 0){
$w(“#menu”).show();
$w(“#menuobsluga”).hide();
$w(“#klientgroup”).hide();
}
else {
let firstRole = roles[0];
let roleName = firstRole.name;
//console.log(roles);
//console.log = (roleName); // “Role Name”
let roleDescription = firstRole.description; // “Role Description”

if (roleName === “obsluga” && user.loggedIn) {
$w(“#menu”).hide();
$w(“#menuobsluga”).show();
$w(“#klientgroup”).hide();
}
if (roleName === “Klient” && user.loggedIn) {
$w(“#menu”).hide();
$w(“#klientgroup”).show();
$w(“#menuobsluga”).hide();
}
else {
$w(“#menu”).show();
$w(“#klientgroup”).hide();
$w(“#menuobsluga”).hide();
}
}})
}