<!-- ============================================================
ASSURE VISA: EMPLOYER-SPONSORED VISA RECOMMENDER TOOL
Self-contained HTML/CSS/JavaScript component
Designed to be embedded on the Assure Visa Business Portal page
via a WordPress "Custom HTML" block or page builder.
NOTE: Add <meta charset="utf-8"> in your page head (most themes include
it automatically). If run as a standalone file, paste this file into
a new file that starts with <meta charset="utf-8">.
Brand colours:
Teal : #0E5A63 (Assure Visa primary)
Orange: #E07A4B (Assure Visa accent)
Lead delivery:
- By default the tool emails results using your WordPress
contact-form endpoint. See the JS section at the bottom
marked "LEAD DELIVERY" to connect it to your existing form.
============================================================ -->
<style>
/* ============================================================
SCOPED STYLES — all prefixed with .avrt so they cannot clash
with your WordPress theme.
============================================================ */
.avrt {
--avrt-teal: #0E5A63;
--avrt-teal-d: #093F47;
--avrt-orange: #E07A4B;
--avrt-orange-d:#C4613A;
--avrt-bg: #F7FAFB;
--avrt-grey: #EEF2F3;
--avrt-text: #2E3A3C;
--avrt-muted: #6B7A7D;
font-family: inherit;
color: var(--avrt-text);
max-width: 760px;
margin: 0 auto;
border: 1px solid #DCE4E6;
border-radius: 16px;
overflow: hidden;
background: #FFFFFF;
box-shadow: 0 12px 40px rgba(14, 90, 99, 0.08);
}
/* ---------- Header ---------- */
.avrt__header {
background: linear-gradient(135deg, var(--avrt-teal), var(--avrt-teal-d));
color: #fff;
padding: 34px 36px 28px;
text-align: center;
}
.avrt__header h2 {
margin: 0 0 10px;
font-size: 1.65rem;
font-weight: 700;
line-height: 1.3;
color: #fff;
}
.avrt__header p {
margin: 0;
font-size: 1rem;
opacity: 0.92;
line-height: 1.5;
}
/* ---------- Progress bar ---------- */
.avrt__progress {
display: none; /* hidden on welcome/lead screens */
background: var(--avrt-grey);
height: 6px;
width: 100%;
}
.avrt__progress-bar {
height: 100%;
width: 0;
background: var(--avrt-orange);
transition: width 0.45s ease;
border-radius: 0 3px 3px 0;
}
.avrt__progress__label {
display: none;
padding: 10px 36px 0;
font-size: 0.82rem;
color: var(--avrt-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* ---------- Body ---------- */
.avrt__body {
padding: 36px 36px 40px;
}
/* ---------- Screen (one is visible at a time) ---------- */
.avrt__screen { display: none; animation: avrtFade .35s ease; }
.avrt__screen--active { display: block; }
@keyframes avrtFade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- Welcome screen ---------- */
.avrt__welcome-list {
list-style: none;
margin: 24px 0 28px;
padding: 0;
}
.avrt__welcome-list li {
position: relative;
padding: 10px 0 10px 36px;
font-size: 1rem;
line-height: 1.5;
color: var(--avrt-text);
border-bottom: 1px solid var(--avrt-grey);
}
.avrt__welcome-list li:last-child { border-bottom: none; }
.avrt__welcome-list li::before {
content: "";
position: absolute;
left: 0; top: 14px;
width: 16px; height: 16px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 8.5 6 12.5 14 4.5' stroke='%23E07A4B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.avrt__disclaimer {
font-size: 0.85rem;
color: var(--avrt-muted);
line-height: 1.5;
margin-top: 6px;
}
/* ---------- Buttons ---------- */
.avrt__btn {
display: inline-block;
padding: 15px 34px;
border: none;
border-radius: 999px;
font-size: 1.02rem;
font-weight: 700;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
text-decoration: none;
text-align: center;
width: 100%;
}
.avrt__btn--primary {
background: var(--avrt-orange);
color: #fff;
box-shadow: 0 6px 18px rgba(224, 122, 75, 0.35);
}
.avrt__btn--primary:hover {
background: var(--avrt-orange-d);
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(224, 122, 75, 0.42);
}
.avrt__btn--secondary {
background: #fff;
color: var(--avrt-teal);
border: 2px solid var(--avrt-teal);
box-shadow: none;
}
.avrt__btn--secondary:hover {
background: var(--avrt-teal);
color: #fff;
}
.avrt__btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* ---------- Question screens ---------- */
.avrt__q-counter {
display: inline-block;
background: var(--avrt-teal);
color: #fff;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 999px;
margin-bottom: 16px;
}
.avrt__lead-skip {
margin-top: 14px;
padding: 12px 14px;
background: #f4f7f8;
border-left: 3px solid var(--avrt-teal);
border-radius: 6px;
font-size: 0.92rem;
color: var(--avrt-muted);
}
.avrt__lead-skip a {
color: var(--avrt-teal);
font-weight: 600;
text-decoration: none;
}
.avrt__lead-skip a:hover { text-decoration: underline; }
.avrt__labour-escape {
margin-top: 14px;
padding-top: 10px;
border-top: 1px dashed #dfe6e8;
font-size: 0.88rem;
color: var(--avrt-muted);
text-align: center;
}
.avrt__labour-escape a {
color: var(--avrt-orange);
font-weight: 600;
text-decoration: none;
}
.avrt__labour-escape a:hover { text-decoration: underline; }
.avrt__q-title {
font-size: 1.28rem;
font-weight: 700;
color: var(--avrt-teal);
line-height: 1.4;
margin: 0 0 6px;
}
.avrt__q-sub {
font-size: 0.95rem;
color: var(--avrt-muted);
margin: 0 0 22px;
line-height: 1.5;
}
.avrt__options { display: flex; flex-direction: column; gap: 12px; }
.avrt__option {
position: relative;
background: #fff;
border: 2px solid #DCE4E6;
border-radius: 12px;
padding: 16px 18px 16px 54px;
cursor: pointer;
font-size: 1rem;
line-height: 1.45;
color: var(--avrt-text);
transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.avrt__option:hover {
border-color: var(--avrt-teal);
transform: translateY(-1px);
}
.avrt__option--selected {
border-color: var(--avrt-orange);
background: #FDF3ED;
}
.avrt__option input {
position: absolute;
left: 18px; top: 19px;
width: 18px; height: 18px;
accent-color: var(--avrt-orange);
cursor: pointer;
}
.avrt__nav {
display: flex;
gap: 12px;
margin-top: 26px;
}
.avrt__nav .avrt__btn { width: auto; }
.avrt__nav--back { flex: 1; }
.avrt__nav--next { flex: 2; }
/* ---------- Lead capture screen ---------- */
.avrt__lead-note {
background: var(--avrt-grey);
border-radius: 12px;
padding: 14px 18px;
font-size: 0.92rem;
color: var(--avrt-muted);
line-height: 1.5;
margin-bottom: 22px;
}
.avrt__field { margin-bottom: 16px; }
.avrt__field label {
display: block;
font-size: 0.88rem;
font-weight: 700;
color: var(--avrt-teal);
margin-bottom: 6px;
}
.avrt__field label .avrt__req {
color: var(--avrt-orange);
}
.avrt__field input,
.avrt__field select {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
border: 2px solid #DCE4E6;
border-radius: 10px;
font-size: 1rem;
font-family: inherit;
color: var(--avrt-text);
transition: border-color .15s ease;
}
.avrt__field input:focus,
.avrt__field select:focus {
outline: none;
border-color: var(--avrt-teal);
}
.avrt__error {
color: #B3402B;
font-size: 0.85rem;
margin-top: 6px;
display: none;
}
.avrt__error--visible { display: block; }
/* ---------- Result screen ---------- */
.avrt__result-badge {
display: inline-block;
background: var(--avrt-orange);
color: #fff;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 6px 16px;
border-radius: 999px;
margin-bottom: 14px;
}
.avrt__result-title {
font-size: 1.45rem;
font-weight: 700;
color: var(--avrt-teal);
line-height: 1.35;
margin: 0 0 14px;
}
.avrt__result-body {
font-size: 1rem;
line-height: 1.65;
margin-bottom: 20px;
}
.avrt__result-next {
background: var(--avrt-grey);
border-radius: 12px;
padding: 16px 18px;
font-size: 0.95rem;
line-height: 1.55;
margin-bottom: 24px;
border-left: 4px solid var(--avrt-orange);
}
.avrt__result-next strong { color: var(--avrt-teal); }
.avrt__result-cta { display: flex; flex-direction: column; gap: 12px; }
.avrt__contact-note {
text-align: center;
font-size: 0.88rem;
color: var(--avrt-muted);
margin-top: 4px;
}
/* ---------- Mobile ---------- */
@media (max-width: 560px) {
.avrt__header { padding: 26px 20px 22px; }
.avrt__header h2 { font-size: 1.35rem; }
.avrt__body { padding: 26px 20px 30px; }
.avrt__nav { flex-direction: column; }
.avrt__nav .avrt__btn { width: 100%; }
}
</style>
<div class="avrt" id="avrt" aria-live="polite">
<!-- HEADER (always visible) -->
<div class="avrt__header">
<h2>Which Employer-Sponsored Visa Is Right For Your Business?</h2>
<p>Answer five quick questions and receive a personalised visa pathway recommendation for your candidate.</p>
</div>
<!-- PROGRESS BAR -->
<div class="avrt__progress" id="avrtProgress">
<div class="avrt__progress-bar" id="avrtProgressBar"></div>
</div>
<div class="avrt__progress__label" id="avrtProgressLabel">Question 1 of 5</div>
<div class="avrt__body">
<!-- ================= SCREEN: WELCOME ================= -->
<div class="avrt__screen avrt__screen--active" id="avrtScreenWelcome">
<p style="margin:0 0 6px; font-size:1.02rem;">Find the right visa pathway in under two minutes. This free assessment helps your business determine:</p>
<ul class="avrt__welcome-list">
<li>Whether your role is in a regional area — unlocking the Subclass 494 and its independent PR pathway</li>
<li>Which visa subclass and stream best suits the candidate and the role</li>
<li>Whether the candidate can go straight to Permanent Residency via the Subclass 186, or should start on a temporary visa</li>
<li>If your candidate's salary and specialisation qualify them for a faster stream</li>
</ul>
<button class="avrt__btn avrt__btn--primary" id="avrtBtnStart">Start My Free Assessment</button>
<p class="avrt__disclaimer">This tool only provides general guidance. For immigration advice specific to your circumstances, please contact Assure Visa.</p>
</div>
<!-- ================= SCREEN: NO LONGER USED =================
The personal-details form has been removed per client decision.
The tool now jumps straight from the welcome screen to questions.
-->
<!-- ================= QUESTIONS (rendered by JS) ================= -->
<div class="avrt__screen" id="avrtScreenQuestions"></div>
<!-- ================= SCREEN: LOADING ================= -->
<div class="avrt__screen" id="avrtScreenLoading" style="text-align:center; padding:30px 0;">
<p style="font-size:1.05rem; color:var(--avrt-teal); font-weight:600;">Analysing your answers…</p>
<p style="font-size:0.95rem; color:var(--avrt-muted);">Matching your business profile to the right visa pathway.</p>
</div>
<!-- ================= SCREEN: RESULT ================= -->
<div class="avrt__screen" id="avrtScreenResult"></div>
</div>
</div>
<script>
(function () {
"use strict";
/* ============================================================
QUESTIONS — edit the text freely; the logic stays intact.
conditional: function(answers) => whether to show this question.
============================================================ */
const QUESTIONS = [
{
id: "q1",
title: "Is the position located in a Designated Regional Area?",
sub: "Regional areas include everywhere outside Sydney, Melbourne and Brisbane — such as Canberra, Adelaide, Perth, Hobart and rural locations.",
options: [
{ id: "yes", label: "Yes — the role is in a regional area (e.g. Canberra, Adelaide, rural Australia)" },
{ id: "no", label: "No — the role is in Sydney, Melbourne or Brisbane" },
{ id: "unsure", label: "I'm not sure whether the location qualifies as regional" }
]
},
{
id: "q2",
title: "Do you want to offer Permanent Residency from day one?",
sub: "If you are happy to start the candidate on a temporary visa with a pathway to PR later, choose the second option.",
options: [
{ id: "pr_now", label: "We want to offer Permanent Residency (PR) immediately" },
{ id: "temp", label: "We prefer a temporary visa first, transitioning to PR later" },
{ id: "either", label: "We are open to either — whatever is easiest and fastest for our business" }
]
},
{
id: "q3",
title: "Is the candidate already working for your business?",
sub: "This matters because someone already on a Subclass 482 with you is on a settled pathway, whereas a candidate on any other visa — a working holiday visa, a graduate visa, a 407 training visa, or an older 457 visa — needs sponsorship from scratch and qualifies for different streams.",
options: [
{ id: "existing", label: "Yes — they are currently employed by us on another visa (working holiday, graduate, 407, 457, or similar)" },
{ id: "new", label: "No — this is a brand-new candidate from overseas or within Australia" }
],
conditional: () => true
},
{
id: "q4",
title: "For this regional role, how would you like the candidate's PR pathway to work?",
sub: "This is the key difference between the two regional visas. The 494 visa leads to the Subclass 191 PR visa after three years — completely independent of your business. The 482 visa keeps the candidate tied to you, with PR through the 186 TRT stream later.",
options: [
{ id: "independent", label: "A clear pathway to PR that doesn't tie the worker to us long-term (they become independent after 3 years via the 191 visa)" },
{ id: "tied", label: "We want the worker tied to our business, transitioning to PR with us later via the 186 TRT stream" },
{ id: "unsure", label: "We're not sure which approach is right for our business" }
],
conditional: (a) => a.q3 === "new" && a.q2 === "temp" && (a.q1 === "yes" || a.q1 === "unsure")
},
{
id: "q5",
title: "Does the role meet the salary threshold for the 482 Core Skills visa?",
sub: "From 1 July 2026 the Core Skills Income Threshold (CSIT) is $79,423 per year. The role must also be on the Core Skills Occupation List.",
options: [
{ id: "yes", label: "Yes — the salary is above $79,423 and the occupation looks eligible" },
{ id: "no", label: "No — the salary is below $79,423, or we are unsure if the occupation qualifies" }
],
conditional: (a) => a.q3 === "new" && (a.q2 === "pr_now" || a.q2 === "either")
},
{
id: "q6",
title: "Is the role highly specialised, with a salary above $146,717?",
sub: "The Subclass 482 Specialist Skills Stream is reserved for highly specialised roles paying above the Specialist Skills Income Threshold (SSIT) of $146,717.",
options: [
{ id: "yes", label: "Yes — the role is highly specialised and pays above $146,717" },
{ id: "no", label: "No — the role does not meet that salary level or specialisation" }
],
conditional: (a) => a.q3 === "new" && a.q2 === "temp" && a.q1 === "no"
}
];
/* ============================================================
RESULTS — one per visa pathway.
compute: function(answers) => boolean
============================================================ */
const RESULTS = [
{
id: "186-trt",
badge: "Permanent Residency Pathway",
title: "Subclass 186 — Temporary Residence Transition (TRT) Stream",
body: "Because your candidate is already working for you (usually on a Subclass 482 visa), the most direct pathway is the <strong>Subclass 186 TRT Stream</strong>. This lets you sponsor them for Permanent Residency once they have completed the required period of employment with your business, typically at least two years.",
next: "<strong>Next step:</strong> Ask Assure Visa to review your candidate's employment history to confirm the exact timing for their TRT nomination. The nomination stage carries the highest refusal risk in the three-step process, so robust Genuine Position and Market Salary evidence is essential.",
cta: "Discuss the 186 TRT Pathway",
ctaLink: "https://assurevisa.com.au/services/employer-sponsored-visas/visa-186/",
contact: true
},
{
id: "186-de",
badge: "Permanent Residency Pathway",
title: "Subclass 186 — Direct Entry (DE) Stream",
body: "Based on your answers, your business is best suited to the <strong>Subclass 186 Employer Nomination Scheme, Direct Entry Stream</strong>. This allows you to offer the candidate Permanent Residency from day one, without a preceding temporary visa. Please note the candidate will need a positive skills assessment and at least three years of relevant work experience.",
next: "<strong>Next step:</strong> Before lodging, Assure Visa will confirm the occupation is on the relevant list, arrange the skills assessment, and prepare the nomination — the step with the highest refusal risk in the process.",
cta: "Read More About the 186 Direct Entry Stream",
ctaLink: "https://assurevisa.com.au/services/employer-sponsored-visas/visa-186/",
contact: true
},
{
id: "482-specialist",
badge: "Temporary Visa with PR Pathway",
title: "Subclass 482 — Skills in Demand, Specialist Skills Stream",
body: "Because the role is highly specialised and the salary exceeds the Specialist Skills Income Threshold of <strong>$146,717</strong>, your business qualifies for the <strong>Subclass 482 Specialist Skills Stream</strong>. This stream offers priority processing for elite talent and does not require Labour Market Testing in most cases.",
next: "<strong>Next step:</strong> Confirm the role genuinely meets the specialisation and salary requirements — the Department scrutinises Specialist Skills nominations closely. Assure Visa can prepare the nomination and advise on the later transition to PR.",
cta: "Read More About the 482 Specialist Skills Stream",
ctaLink: "https://assurevisa.com.au/services/employer-sponsored-visas/visa-482/",
contact: true
},
{
id: "482-core",
badge: "Temporary Visa with PR Pathway",
title: "Subclass 482 — Skills in Demand, Core Skills Stream",
body: "Your business is best suited to the <strong>Subclass 482 Core Skills Stream</strong>. This is the most common pathway for hiring skilled overseas workers on a temporary basis. The candidate can stay for up to four years per grant, and the stream offers a clear pathway to Permanent Residency through the Subclass 186 TRT stream later.",
next: "<strong>Next step:</strong> Complete Standard Business Sponsorship, pass Labour Market Testing on approved platforms, and lodge a robust nomination. Assure Visa handles all three steps with fixed-fee quotes.",
},
{
id: "482-core-regional",
badge: "Temporary Visa Tied to Your Business",
title: "Subclass 482 — Skills in Demand, Core Skills Stream",
body: "Because you prefer the candidate to remain tied to your business while transitioning to PR, the <strong>Subclass 482 Core Skills Stream</strong> fits your goals better than the 494. The candidate can stay up to four years per grant, and Permanent Residency later comes through the <strong>Subclass 186 TRT stream</strong> — a pathway that runs through your sponsorship. Note that unlike the 494, the 191 independent PR visa does not apply here.",
next: "<strong>Next step:</strong> Confirm the role meets the CSIT of $79,423 and pass Labour Market Testing. If you would also like to discuss whether the 494 → 191 pathway could benefit your retention strategy, Assure Visa can walk you through both options.",
next: "<strong>Next step:</strong> Complete Standard Business Sponsorship, pass Labour Market Testing on approved platforms, and lodge a robust nomination. Assure Visa handles all three steps with fixed-fee quotes.",
cta: "Read More About the 482 Core Skills Stream",
ctaLink: "https://assurevisa.com.au/services/employer-sponsored-visas/visa-482/",
contact: true
},
{
id: "494-es",
badge: "Regional Pathway to PR",
title: "Subclass 494 — Skilled Employer Sponsored Regional, Employer Sponsored Stream",
body: "Because your business is located in a designated regional area, the <strong>Subclass 494 Employer Sponsored Stream</strong> is the best fit for a new hire. This provides a five-year provisional visa with a clear pathway to Permanent Residency via the <strong>Subclass 191 visa</strong> after three years of regional work — and unlike the 482 → 186 TRT route, the 191 is employer-independent, meaning you have no further sponsorship obligations once the candidate qualifies.",
next: "<strong>Next step:</strong> Confirm the position meets the regional genuine position requirements and the CSIT of $79,423. Assure Visa will prepare the nomination with the regional-specific evidence the Department expects.",
cta: "Read More About the 494 Visa",
ctaLink: "https://assurevisa.com.au/services/employer-sponsored-visas/visa-494/",
contact: true
},
{
id: "labour-agreement",
badge: "Labour Agreement Stream",
title: "Subclass 186 / 482 / 494 — Labour Agreement Stream",
body: "Because your business holds (or is considering) a <strong>Labour Agreement</strong>, you have access to tailored concessions not available through standard sponsorship — these can include lower salary thresholds, age concessions, or priority pathways to Permanent Residency. Depending on your agreement's terms, sponsorship runs through the <strong>Subclass 186 (DE or TRT)</strong>, the <strong>Subclass 482</strong>, or the <strong>Subclass 494 Labour Agreement stream</strong> for regional businesses. DAMA (Designated Area Migration Agreement) arrangements work similarly for regional employers.",
next: "<strong>Next step:</strong> Labour Agreement terms vary significantly, so the right subclass and stream depend on what your agreement covers. An Assure Visa agent can review your agreement and map the compliant pathway for this role.",
cta: "Discuss Your Labour Agreement",
ctaLink: "https://assurevisa.com.au/contact/",
contact: true
},
{
id: "contact-advice",
badge: "Tailored Advice Needed",
title: "Let's Find a Tailored Pathway Together",
body: "Based on your answers, the standard sponsorship pathways may not apply cleanly to your situation — and that is completely normal. Options such as a <strong>Labour Agreement</strong>, a <strong>DAMA</strong> (Designated Area Migration Agreement), or a carefully structured temporary visa may be exactly what your business needs.",
next: "<strong>Next step:</strong> Book a corporate consultation. An Assure Visa agent will review your business structure, the role, and the candidate's circumstances to map a compliant, tailored pathway.",
cta: "Book a Corporate Consultation",
ctaLink: "https://assurevisa.com.au/contact/",
contact: false
}
];
/* ============================================================
ROUTING LOGIC — executed after lead capture is submitted.
============================================================ */
function computeResult(a) {
// Existing employee wanting PR -> 186 TRT
if (a.q3 === "existing" && (a.q2 === "pr_now" || a.q2 === "either")) return "186-trt";
// Existing employee wanting temp first -> 482 core (most common), with TRT option noted
if (a.q3 === "existing" && a.q2 === "temp") return "482-core";
// New hire, wants PR now
if (a.q2 === "pr_now" || a.q2 === "either") {
// q5 only shown in this branch; default if hidden = unsure
if (a.q5 === "yes") return "186-de";
// Salary/occupation below threshold
if (a.q1 === "yes" || a.q1 === "unsure") return "494-es";
// Not regional and below threshold -> custom advice
return "contact-advice";
}
// Labour Agreement escape taken at any point during the questions
if (labourAgreementSkip) return "labour-agreement";
// New hire, wants temp visa first
if (a.q2 === "temp") {
// Regional (or possibly regional) new hires are asked how they
// want the PR pathway to work — 494 → 191 (employer-independent)
// versus 482 → 186 TRT (tied to the sponsor).
if (a.q1 === "yes" || a.q1 === "unsure") {
if (a.q4 === "tied") return "482-core-regional";
return "494-es"; // independent or unsure → 494, strongest regional PR pathway
}
// Metro new hires: q6 only shown in this branch
if (a.q6 === "yes") return "482-specialist";
return "482-core";
}
return "contact-advice";
}
/* ============================================================
STATE
============================================================ */
const answers = {};
let currentScreen = "welcome"; // welcome | questions | loading | result
let currentQuestion = 0;
const $ = (id) => document.getElementById(id);
const screens = {
welcome: $("avrtScreenWelcome"),
questions: $("avrtScreenQuestions"),
loading: $("avrtScreenLoading"),
result: $("avrtScreenResult")
};
function showScreen(name) {
currentScreen = name;
Object.values(screens).forEach((s) => s.classList.remove("avrt__screen--active"));
screens[name].classList.add("avrt__screen--active");
// progress bar only during questions
const showProgress = name === "questions";
$("avrtProgress").style.display = showProgress ? "block" : "none";
$("avrtProgressLabel").style.display = showProgress ? "block" : "none";
}
function updateProgress() {
// count only visible questions
const visible = QUESTIONS.filter((q) => !q.conditional || q.conditional(answers));
const idx = visible.findIndex((q) => q.id === QUESTIONS[currentQuestion].id);
const pct = ((idx + 1) / visible.length) * 100;
$("avrtProgressBar").style.width = pct + "%";
$("avrtProgressLabel").textContent = `Question ${idx + 1} of ${visible.length}`;
}
/* ============================================================
WELCOME -> QUESTIONS (no lead capture, per client decision)
============================================================ */
$("avrtBtnStart").addEventListener("click", () => {
currentQuestion = 0;
renderQuestion();
showScreen("questions");
});
// --- LABOUR AGREEMENT ESCAPE: jump straight to LA advice ---
document.addEventListener("click", (e) => {
const target = e.target.closest && e.target.closest("#avrtLabourSkip");
if (target) {
e.preventDefault();
labourAgreementSkip = true;
showScreen("loading");
setTimeout(() => {
renderResult(computeResult(answers));
}, 700);
}
});
/* ============================================================
QUESTIONS — rendered dynamically
============================================================ */
function isLastVisibleQuestion() {
const visible = QUESTIONS.filter((x) => !x.conditional || x.conditional(answers));
const lastId = visible[visible.length - 1].id;
return QUESTIONS[currentQuestion].id === lastId;
}
function renderQuestion() {
const q = QUESTIONS[currentQuestion];
const selected = answers[q.id];
const qBody = $("avrtScreenQuestions");
qBody.innerHTML = `
<span class="avrt__q-counter">Question</span>
<h3 class="avrt__q-title">${q.title}</h3>
${q.sub ? `<p class="avrt__q-sub">${q.sub}</p>` : ""}
<div class="avrt__options">
${q.options.map((o) => `
<label class="avrt__option ${selected === o.id ? "avrt__option--selected" : ""}">
<input type="radio" name="${q.id}" value="${o.id}" ${selected === o.id ? "checked" : ""}>
${o.label}
</label>
`).join("")}
</div>
<div class="avrt__nav">
<button class="avrt__btn avrt__btn--secondary avrt__nav--back" id="avrtBtnPrev">Back</button>
<button class="avrt__btn avrt__btn--primary avrt__nav--next" id="avrtBtnNext" ${!selected ? "disabled" : ""}>
${isLastVisibleQuestion() ? "See My Recommendation" : "Next"}
</button>
</div>
<div class="avrt__labour-escape">
Is your business a signatory to an industry-specific <strong>Labour Agreement</strong>? <a href="#" id="avrtLabourSkip">Get tailored advice →</a>
</div>
`;
updateProgress();
// option selection
qBody.querySelectorAll("input[type=radio]").forEach((input) => {
input.addEventListener("change", () => {
answers[q.id] = input.value;
qBody.querySelectorAll(".avrt__option").forEach((el) => el.classList.remove("avrt__option--selected"));
input.closest(".avrt__option").classList.add("avrt__option--selected");
$("avrtBtnNext").disabled = false;
});
});
$("avrtBtnPrev").addEventListener("click", () => goBack());
$("avrtBtnNext").addEventListener("click", () => goForward());
}
function startQuestions() {
showScreen("questions");
currentQuestion = 0;
renderQuestion();
}
function nextVisibleQuestion(from, direction) {
// Build list of questions that should be shown given current answers.
// Any answer to a question that has become hidden (e.g. the user
// went back and changed Q1/Q2) is discarded so it can never affect
// routing or the lead summary.
const visible = [];
for (let i = 0; i < QUESTIONS.length; i++) {
const q = QUESTIONS[i];
if (q.conditional && !q.conditional(answers)) {
delete answers[q.id];
continue;
}
visible.push(i);
}
const pos = visible.indexOf(from);
if (direction === "forward") {
return pos < visible.length - 1 ? visible[pos + 1] : null;
}
return pos > 0 ? visible[pos - 1] : null;
}
function goForward() {
const nextIdx = nextVisibleQuestion(currentQuestion, "forward");
if (nextIdx !== null) {
currentQuestion = nextIdx;
renderQuestion();
} else {
submitLead();
}
}
function goBack() {
const prevIdx = nextVisibleQuestion(currentQuestion, "back");
if (prevIdx !== null) {
currentQuestion = prevIdx;
renderQuestion();
} else {
showScreen("lead");
}
}
/* ============================================================
LABOUR AGREEMENT ESCAPE — shown on every question screen for
employers already operating (or considering) a Labour Agreement.
============================================================ */
let labourAgreementSkip = false;
/* ============================================================
LEAD DELIVERY — hook into your WordPress form endpoint.
Currently builds a mailto link and proceeds to the result.
Ask Wonder Web Works to point this at your existing contact
form handler (e.g. a CF7 / Forminator endpoint) if preferred.
============================================================ */
function submitLead() {
showScreen("loading");
const summary = Object.entries(answers)
.map(([k, v]) => {
const q = QUESTIONS.find((x) => x.id === k);
const o = q.options.find((x) => x.id === v);
return `${q.title} → ${o ? o.label : v}`;
})
.join("\n");
// Payload retained for reference if lead capture is re-enabled later.
const payload = {
name: "Anonymous",
company: "—",
email: "—",
phone: "—",
answers: summary
};
// --- OPTION A (default): silent mailto so the lead lands
// in the employer's email client addressed to you.
// Skipped for anonymous users who chose not to share details. ---
const subject = encodeURIComponent(`Visa Recommender Lead — ${payload.name} (${payload.company})`);
const body = encodeURIComponent(
`New lead from the Business Portal Visa Recommender Tool\n\n` +
`Name: ${payload.name}\nCompany: ${payload.company}\nEmail: ${payload.email}\nPhone: ${payload.phone || "—"}\n\n` +
`ANSWERS:\n${summary}`
);
// Note: this opens a pre-filled email to your mailbox. If your
// site uses a form handler, replace this block with a fetch()
// POST to that endpoint.
const mailtoLink = `mailto:info@assurevisa.com.au?subject=${subject}&body=${body}`;
// --- Show the result after a short "analysing" pause ---
// Note: with lead capture removed, this mailto no longer fires
// automatically. Keep the mailtoLink construction above as a
// reference if you re-enable lead capture later.
setTimeout(() => {
const resultId = computeResult(answers);
renderResult(resultId);
}, 900);
}
/* ============================================================
RESULT SCREEN
============================================================ */
function renderResult(resultId) {
const r = RESULTS.find((x) => x.id === resultId) || RESULTS[RESULTS.length - 1];
$("avrtScreenResult").innerHTML = `
<span class="avrt__result-badge">${r.badge}</span>
<h3 class="avrt__result-title">${r.title}</h3>
<p class="avrt__result-body">${r.body}</p>
<div class="avrt__result-next">${r.next}</div>
<div class="avrt__result-cta">
<a class="avrt__btn avrt__btn--primary" href="${r.ctaLink}" target="_blank" rel="noopener">${r.cta}</a>
${r.contact
? `<a class="avrt__btn avrt__btn--secondary" href="https://assurevisa.com.au/contact/">Contact Assure Visa to Start the Process</a>`
: ""}
</div>
<p class="avrt__contact-note">Prefer to speak to us directly? Call us or use the contact form on the Assure Visa website.</p>
`;
showScreen("result");
}
})();
</script>
