JavaScript widget integration
Live email validation in one script tag.
Syntax regexes catch typos in the format; Verifyre catches typos in the address. The widget talks to the mailbox's own server while the visitor is still on the field.
What it does
Verifyre and JavaScript widget, together.
Drop-in
No build step, no framework dependency. The widget finds every matching input, including ones added later by React, Vue or a modal, and attaches itself.
Helpful, not hostile
A green tick for a confirmed mailbox, an amber "Did you mean gmail.com? Use it" for typos, a red "cannot receive mail" for dead addresses. Copy is overridable for translations.
Honest on the server too
The hidden verifyre_status field tells your backend what the widget saw; confirm it with the API and a secret key for anything that matters.
Setup guide
Set up JavaScript widget in 3 steps.
You will need a Verifyre account (free, 100 credits) and an API key from Settings, then API keys.
Add the script tag
Create a key in your account named after the site (it will be visible in your HTML, so keep it separate from server keys) and add the tag anywhere in the page.
html<script src="https://verifyre.co/widget.js" data-key="vfy_live_YOUR_API_KEY" data-selector="input[type=email]" data-block="true" async></script>
Listen for verdicts (optional)
The widget dispatches a verifyre event on the input with the full verdict, and exposes Verifyre.verify() for your own code, so you can integrate with any form library.
javascript// React, Vue, Svelte, plain HTML: the widget watches the DOM, so fields added later are covered. document.addEventListener("verifyre", (e) => { const { status, reason, reason_text, did_you_mean, score } = e.detail; if (status === "undeliverable") myForm.setError("email", reason_text); }); // Call it yourself (returns the same object, or null if the check failed): const verdict = await Verifyre.verify("someone@example.com"); // The widget also writes a hidden <input name="verifyre_status"> into the form, // so your server sees "deliverable" / "undeliverable" / "risky" / "unknown" on submit.Confirm on the server
Treat the hidden field as a hint. When the form posts, re-check with the API using a server-side key; the second check is free because the verdict is cached for 24 hours.
javascript// Never trust the hidden field alone: confirm on the server with your secret key. const r = await fetch("https://verifyre.co/api/v1/verify?email=" + encodeURIComponent(email), { headers: { Authorization: "Bearer " + process.env.VERIFYRE_KEY }, }).then((x) => x.json()); if (r.status === "undeliverable") return res.status(422).json({ error: r.reason_text });
Write-back
What gets written back to your stack.
Verification only reads. Writing results back is a separate step you trigger after reviewing the counts, and nothing is ever deleted without your say-so.
- A hidden <input name="verifyre_status"> in the form (deliverable, undeliverable, risky, unknown) and a data-verifyre attribute on the input.
- A verifyre CustomEvent with { status, reason, reason_text, did_you_mean, score } on every completed check.
- With data-block="true", a cancelled submit for undeliverable addresses, with focus returned to the field.
JavaScript widget FAQ