Voxel Sign-Up Screen and Preselect a Role Using URL Parameters

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

You cannot use different URLs for "login" and "sign up"
You cannot link directly to a role selection like "Provider"
You must simulate user interactions (clicks) with JavaScript after the page loads

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

Detects query parameters in the URL (?auth=signup or ?type=provider)
Waits for the page to finish loading (even if content is delayed)
Clicks the "Sign Up" button if needed
Optionally clicks a specific user role based on the ?type parameter

Example URLs You Can UseDefault login - https://yourdomain.com/auth/Open Sign-Up form only - https://yourdomain.com/auth/?auth=signupOpen Sign-Up and select "Provider" - https://yourdomain.com/auth/?type=providerOpen 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:

Build smoother onboarding flows
Link directly from email campaigns, landing pages, and ads
Pre-fill and pre-select roles for specific user groups
 

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.

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