This site is running Voxel Theme Version: 1.5.5.1 | Elementor Plugin Version: 3.28.4
Join the Voxel Guide Community!
Get Involved
Get Involved
Voxel uses a single URL (/auth/) to handle both login and sign-up functionality. While this keeps things streamlined for users, it presents a challenge when trying to send someone directly to the Sign-Up screen or preselect a specific user role, such as “Provider” or “Client.”
By default, there’s no built-in way to create separate URLs for each user type or action. However, with a simple JavaScript snippet, you can control what happens when someone lands on the /auth/ page using query parameters in the URL.
This guide explains exactly how to do that.
Why This is Necessary in Voxel
Voxel dynamically loads the login and sign-up forms on the same /auth/ URL using JavaScript. There is no page reload or URL change when switching between login and sign-up views, and no direct link to a specific role type.
Because of this:
This guide shows you how to do that using custom URL parameters and a script that clicks the correct buttons automatically.
What This Script Does
Example URLs You Can Use
Default login – https://yourdomain.com/auth/
Open Sign-Up form only – https://yourdomain.com/auth/?auth=signup
Open Sign-Up and select “Provider” – https://yourdomain.com/auth/?type=provider
Open Sign-Up and select “Studio Manager” -https://yourdomain.com/auth/?type=studio-manager
Note: You can use lowercase words and dashes in the type parameter. The script will automatically convert them to match your role label (e.g., studio-manager becomes “Studio Manager”).
Copy the script.
Paste it into your site’s footer (via the WordPress Theme Editor, WPCode plugin, or an HTML widget inside Elementor if you’re editing the /auth/ page).
Make sure the .elementor-element-21f9b54d a.ts-btn.ts-btn-large selector matches the “Sign Up” button on your site. Adjust if needed using your browser’s Inspector tool.
This approach allows you to:
Because Voxel handles everything on one URL, this workaround is the most reliable way to provide direct access to different parts of the auth flow.
Let users land exactly where you want them to — without extra clicks or confusion.
You can add as many roles as you like by updating the URLs with different ?type= values. Just make sure the label in your URL matches the exact label displayed on your role selection screen. For example:
?type=care-seeker → selects "Care Seeker"
?type=freelancer → selects "Freelancer"
?type=clinic-manager → selects "Clinic Manager"
If your button selector changes, update the following line in the script:
const signupBtn = document.querySelector('.elementor-element-21f9b54d a.ts-btn.ts-btn-large');
You can find your exact button class by right-clicking the Sign Up button and selecting "Inspect" in your browser.
<script>
document.addEventListener('DOMContentLoaded', function () {
const params = new URLSearchParams(window.location.search);
const authIntent = params.get('auth'); // detects ?auth=signup
const roleType = params.get('type'); // detects ?type=provider etc.function clickSignupBtn(callback) {
const signupBtn = document.querySelector('.elementor-element-21f9b54d a.ts-btn.ts-btn-large');
if (signupBtn) {
signupBtn.click();
setTimeout(() => {
window.scrollTo({ top: 0, behavior: 'smooth' });
if (typeof callback === 'function') callback();
}, 300);
} else {
setTimeout(() => clickSignupBtn(callback), 200);
}
}function selectRole(roleLabel) {
const trySelect = () => {
const roleLinks = document.querySelectorAll('.role-selection a');
const match = Array.from(roleLinks).find(link =>
link.textContent.trim().toLowerCase() === roleLabel.toLowerCase()
);if (match && !match.classList.contains('selected-role')) {
match.click();
setTimeout(() => window.scrollTo({ top: 0, behavior: 'smooth' }), 100);
} else {
setTimeout(trySelect, 200);
}
};
trySelect();
}if (roleType) {
clickSignupBtn(() => selectRole(roleType.replace(/-/g, ' '')));
} else if (authIntent === 'signup') {
clickSignupBtn();
}
});
</script>
