Step 1: Add the Container

Add the Authyo container in your Vue template:

<template>
  <div id="authyo-sdk"></div>
</template>

Step 2: Load the SDK Script Dynamically

Inject the SDK script when the component mounts:

mounted() {
  const script = document.createElement("script");
  script.src = "https://app.authyo.io/js/v1/auth-sdk.js";
  script.setAttribute("data-appkey", "YOUR_APP_KEY");
  script.async = true;
  document.body.appendChild(script);
}

Step 3: Handle the Response

Use window.authyoResponse to capture success or failure:

mounted() {
  // Load SDK
  const script = document.createElement("script");
  script.src = "https://app.authyo.io/js/v1/auth-sdk.js";
  script.setAttribute("data-appkey", "YOUR_APP_KEY");
  script.async = true;
  document.body.appendChild(script);
// Capture response

window.authyoResponse = (response) => {

if (response.success) {

console.log("✅ Verified:", response.data);

} else {

console.error("❌ Error:", response.message);

}

};

}

Full Component Example

<template>
  <div id="authyo-sdk"></div>
</template>
<script>

export default {

name: "AuthyoWidget",

mounted() {

const script = document.createElement("script");

script.src = "https://app.authyo.io/js/v1/auth-sdk.js";

script.setAttribute("data-appkey", "123456-app-key-xyz");

script.async = true;

document.body.appendChild(script);

window.authyoResponse = (response) => {

if (response.success) {

console.log("✅ User verified:", response.data);

} else {

console.error("❌ Login failed:", response.message);

}

};
}

};
</script>

Customization (Auto-loaded from Dashboard)

• ✅ Logo, Header, Body Text
• ✅ Button Styles & Colors
• ✅ Input Design
• ✅ Social Button Layout
• ✅ Branding & Links

Supported Login Methods

• ✅ Email OTP
• ✅ SMS / WhatsApp / Voicecall
• ✅ QR Code Login
• ✅ Google / Microsoft / LinkedIn / GitHub

Response Structure

{
  "success": true,
  "message": "OTP verified successfully",
  "status": "verified",
  "data": {
    "email": "abc@xyz.com"
  }
}

Troubleshooting