Troubleshooting //
Adding Badge to the User Depending on the Profile Completeness

Adding Badge to the User Depending on the Profile Completeness

In this tutorial, we uncover how to notify the user about the level of their profile completeness by using JetEngine and its Custom visibility conditions add-on.

We’ll do it by triggering badges that signal the user whether their info is completely filled out on the website. So, let’s begin the process.

Tutorial requirements:

Install the Add-on

Open the Crocoblock DevTools page and find the Custom visibility conditions add-on. Press the “Download” button to save the file on your computer.

custom visibility conditions addon on the crocoblock website

Go to your website, open the Plugins > Add New page, and press the “Choose File” button.

Once you find the needed file on your computer, click the “Install Now” button.

Then, don’t forget to activate the add-on.

add plugins wordpress directory

Enable Dynamic Visibility

Besides, ensure that the Dynamic Visibility for Widgets and Sections is activated in the WordPress Dashboard > JetEngine > Modules tab.

Please pay attention that we have Profile Builder activated as well.

Don’t forget to press the “Save” button.

dynamic visibility for widgets and sections module activated

Edit the Account Template

Proceed to the Elementor template (WordPress Dashboard > Templates > Saved Templates) you have attached to the account page in the Profile Builder settings.

After opening the editor, we add the JetForm widget to display the form for editing the WordPress user.

Next, search for the widget that has the “Dynamic Visibility” feature. For instance, we use the Alert one. 

Drag-n-drop it to the desired place on the page.

alert widget

In the Content tab, set the Type of alert as “Success,” and mind changing Title & Description values into the ones you find appropriate.

Define whether you want to show or hide Dismiss Icon and pick this Icon in case you decide to leave it.

success alert content settings

Open the Advanced tab and move to the Dynamic Visibility section.

Switch on the Enable feature, pick the “Show element if condition met” Visibility condition type, and open the first drop-down list. Choose the “User has required fields” Condition and paste the needed meta fields keys into the Fields list bar.

Leave the User context default, “Current user.”

sucess alert dynamic visibility settings

Add one more alert, this time to display it once the user hasn’t completed all fields in the account. Put the new Alert widget under the one you have just added.

Change the Type to “Danger” if you want the badge to be light red. Alter the Title & Description field info and work on the Dismiss Icon and Icon fields if desired.

danger alert content settings

Once again, open the Advanced tab and scroll down to the Dynamic Visibility section.

Here, repeat the same steps as for the “Success” banner but with the “Hide element if condition met” Visibility condition type.

After implementing the final changes, click on the “Update” button.

danger alert dynamic visibility settings

Check the Result

Head to the page on the front end. Let’s look at the badge shown once all profile fields are completed.

success banner

And now, we delete the user profile picture to see another banner.

fail banner

That’s all for the customizations; now you can reproduce a similar system on your WordPress website with the help of the JetEngine plugin and Custom visibility conditions add-on.

Was this article helpful?
YesNo
Still need help?
Submit a request