virto-connect
  • GETTING STARTED
    • Introduction
    • Requirements and Infrastructure
    • Quick Start Guide
    • Local Testing
  • Basics
    • virto-connect Component
    • Low-level SDK
  • API
    • Vos Mock
  • Resources
    • Adittional resources
Powered by GitBook
On this page
  • Library
  • Basic HTML integration
  • What happens when...?
  1. GETTING STARTED

Quick Start Guide

PreviousRequirements and InfrastructureNextLocal Testing

Last updated 21 days ago

Library

index.html
<script type="module" async src="./virto-connect.minimal.js"></script>

Include the virto-connect library, you can follow 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)

this link