How to make a Button that only Admins can see or click on Part 50 Million?

Ask the community
1

I have tried and tried and tried. I’ve read dozens of threads on this and nothing works. Certainly because I’m not doing it correctly.

Can someone please provide step by step instructions on how to accomplish this instead of just posting a generic code without explaining where it actually goes, how to turn it on, etc etc.

Please give instructions assuming I know zero about coding or how to put custom code in my Wix site.

I made a button that simply links to My Admin Only Page. I only what that button visible to actual logged in Admins.

I have this code inserted into the Custom Code page on dashboard into the head section. In DEV mode I have the button set to hidden on load. However button is not showing:

Is this code missing something?
Did I not put it in correct place?
Please help.

import wixUsers from ‘wix-users’;
$w.onReady(function(){
const currentUser = wixUsers.currentUser;
if (currentUser.loggedIn && currentUser.role === ‘Admin’){
//Show components:
$w(‘#button63’).show();
};
});

2

Hey @S2112ify!

I’d recommend checking out the Getting Started guide, and specifically the section about Coding with Wix Studio. The resources there should set you on the right path - About the Getting started category

In the meantime, Velo code is added to a site via Dev Mode in the site editor. It’s worth noting that wix-users is a deprecated API and may no longer work. I’d recommend updating it to use the wix-members-frontend API - Introduction - Velo API Reference - Wix.com.

This answer here should set you on the right path - show a button based on member role - #2 by jonatandor35

Hope it helps :slight_smile:

3

100% unhelpful but than you for trying nevertheless.

4

This should get you started:

import { authentication, currentMember } from 'wix-members-frontend';

$w.onReady(async function () {
    let isLoggedIn = authentication.loggedIn();

    $w("#button1").hide();
    if (isLoggedIn) {
        let member = await currentMember.getRoles()

        if (member.some(r => r.title === "Admin")) {
            $w("#button1").show();
        } else {
            $w("#button1").hide();
        }
    }
})

Here’s what it does:

  1. Imports 2 API’s. One for check current member details, and one for authenticating the member.
  2. When the page is ready, create a variable to see if the member is logged in.
  3. Set the button as hidden by default.
  4. If the member is logged in, run the code in between the {}
  5. If the member is logged in, check to get their roles
  6. Check all the members roles and see if one of them is “Admin”. If it is, show the button. If it’s not, hide the button.

Let me know if you have any questions :slight_smile:

2 Likes
5

THANK YOU!!!

Worked 100%

2 Likes