Quick Start Guide
Library
<script type="module" async src="./virto-connect.minimal.js"></script>Include the virto-connect library, you can follow this link to copy the content but everything you will need is pasted here.
Basic HTML integration
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" async src="./virto-connect.minimal.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">
<title>Login</title>
<style>
:root {
--white: white;
--whitesmoke: whitesmoke;
--darkslategray: darkslategray;
--lightgreen: lightgreen;
--darkseagreen: darkseagreen;
--black: #0000004D;
--green: #24AF37;
--whitish-green: #c6ebc7;
--dark-green: #006B0A;
--extra-light-green: #DDFBE0;
--gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%), radial-gradient(84.04% 109.28% at 10.3% 12.14%, rgba(86, 201, 96, 0.5) 0%, rgba(198, 235, 199, 0) 98.5%);
--font-primary: Outfit, sans-serif;
--font-secondary: Plus Jakarta, sans-serif;
}
</style>
</head>
<body>
<button onclick="virtoConnect.open()">Connect to Virto</button>
<virto-connect id="virtoConnect" server="http://localhost:3000/api"
provider-url="ws://localhost:12281"></virto-connect>
</body>
</html>What happens when...?
When the virto-connect component is opened, there are two possible actions to perform (have into account that you cannot sign in if you havent registered)
When clicking "Register": A dialog opens where the user enters their name and username. Upon confirmation, the browser asks to create a passkey. After confirmation, the backend registers the user and the bot grants them a membership.
When clicking "Connect": A dialog opens where the user enters their username. The browser asks to use the existing passkey. After confirmation, an active session is established for approximately 15 minutes.
When the virto-connect component is opened, there are two possible actions to perform (have into an account that you cannot sign in if you have never registered using virto-connect)
Last updated