The button script creates a session with your publishable key and sends the user to it. No server-side code or secret key is involved.
link Add a button
Create the button
In the dashboard, open Developers → Verify buttons and create one. Choose its label, colours, corner radius, size and font, and see it change as you go.
Copy the snippet into your page
<script async src="https://www.kaywhysee.com/embed/v1/verify-button.js"></script>
<kaywhysee-verify-button
button-id="vb_..."
publishable-key="pk_live_..."
client-reference-id="user_1042">
</kaywhysee-verify-button>Set client-reference-id to your ID for the customer who is signed in, so you can match the result to them. It arrives as the session's reference with web: in front (web:user_1042): anyone can change an attribute in a web page, so references from buttons are kept apart from the ones you create over the API. Leave it out and we make one up, starting web-.
Limit it to your websites
Under Allowed websites, list the origins the button may run on, such as https://shop.example. Anywhere else, it refuses to start, and so does its hosted link, which can't show where it was opened. With an empty list it works on any website, which is handy while you build and not what you want in production.
link Attributes
Only the first two are required. The rest override the style you saved in the dashboard, for this one button.
button-id
string
attribute
required
The button's ID, starting vb_.
publishable-key
string
attribute
required
Your publishable key, starting pk_live_. See Authentication.
client-reference-id
string
attribute
Your reference for the customer, up to 200 characters. Becomes the session's reference, prefixed web:.
label
string
attribute
The button's text.
background
string
attribute
Background colour, as #RRGGBB.
color
string
attribute
Text colour, as #RRGGBB.
radius
number
attribute
Corner radius in pixels.
size
string
attribute
sm, md or lg.
full-width
boolean
attribute
true to fill the width of its container.
font
string
attribute
inherit to use your page's font, or system.
open-in
string
attribute
same_tab or new_tab.
link Events
When a verification starts, the button fires kaywhysee:started, which bubbles up through your page:
document.addEventListener("kaywhysee:started", (event) => {
console.log("Verification started:", event.detail.startUrl);
});link How it's built
- The button draws itself inside a shadow root, so your page's CSS can't break it and its styles can't leak into your page.
- It reads its look from our public button endpoint, so changes you save in the dashboard show up without touching your page.
- Starting a verification is rate-limited per visitor, so a button can't be used to run up sessions on your account.
No website?
Every button also has a hosted link you can send by email or message.