Skip to content
Seva Docs

Getting Started with Seva Components

Seva provides a set of web components (custom HTML elements) that you can drop into any website to add event registration, authentication, and payment checkout. They work with any CMS, static site, or framework — no build tools required.

What you’ll build

Section titled “What you’ll build”

By the end of this guide you’ll have a working page with:

  • <seva-auth> — sign-in / sign-up form
  • <seva-event-register> — event details and registration flow
  • <seva-cart> — cart and Stripe checkout

Prerequisites

Section titled “Prerequisites”

You need two pieces of information from your Seva admin:

ValueExampleWhere to find it
Tenant slugmy-clubSettings page in the admin dashboard
Event slugannual-galaThe event detail page in admin

Your Seva API must be deployed and reachable. The default production URL is https://api.seva.tools.

Step 1 — Add the script tags

Section titled “Step 1 — Add the script tags”

Each component ships as a standalone ES module. Load them from your Seva Components CDN (replace YOUR_COMPONENTS_URL with the URL where your components are deployed):

<script type="module" src="YOUR_COMPONENTS_URL/seva-auth.js"></script>
<script type="module" src="YOUR_COMPONENTS_URL/seva-event-register.js"></script>
<script type="module" src="YOUR_COMPONENTS_URL/seva-cart.js"></script>

Tip: Because type="module" scripts are deferred automatically, you can place these tags in the <head> or at the end of the <body>.

Step 2 — Drop in the HTML elements

Section titled “Step 2 — Drop in the HTML elements”
<seva-auth id="auth" tenant-slug="my-club" api-url="https://api.seva.tools"></seva-auth>


<seva-event-register id="register"
  tenant-slug="my-club"
  event-slug="annual-gala"
  api-url="https://api.seva.tools">
</seva-event-register>


<seva-cart id="cart" tenant-slug="my-club" api-url="https://api.seva.tools"></seva-cart>

Every component needs tenant-slug and api-url. The registration component also needs event-slug.

Step 3 — Wire authentication to the other components

Section titled “Step 3 — Wire authentication to the other components”

When a user signs in, <seva-auth> fires a seva:authenticated event. You need to pass the auth token to the registration and cart components so they can make authenticated API calls.

Add this script after the component elements:

<script>
  const auth = document.getElementById('auth');
  const register = document.getElementById('register');
  const cart = document.getElementById('cart');


  function propagateAuth() {
    const token = auth.getToken();
    if (token) {
      register.setAttribute('auth-token', token);
      cart.setAttribute('auth-token', token);
    } else {
      register.removeAttribute('auth-token');
      cart.removeAttribute('auth-token');
    }
  }


  auth.addEventListener('seva:authenticated', propagateAuth);
  auth.addEventListener('seva:signed-out', propagateAuth);
</script>

That’s it — the cart already listens for seva:add-to-cart events from the registration component automatically via DOM event bubbling.

Step 4 — Complete page

Section titled “Step 4 — Complete page”

Here’s a minimal but complete page you can copy, paste, and open in a browser:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Registration</title>
  <script type="module" src="YOUR_COMPONENTS_URL/seva-auth.js"></script>
  <script type="module" src="YOUR_COMPONENTS_URL/seva-event-register.js"></script>
  <script type="module" src="YOUR_COMPONENTS_URL/seva-cart.js"></script>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 600px; margin: 2rem auto; padding: 0 1rem; }
    section { margin-bottom: 2rem; }
    h2 { font-size: 1.1rem; color: #555; }
  </style>
</head>
<body>
  <h1>Event Registration</h1>


  <section>
    <h2>1. Sign In</h2>
    <seva-auth id="auth"
      tenant-slug="my-club"
      api-url="https://api.seva.tools">
    </seva-auth>
  </section>


  <section>
    <h2>2. Register</h2>
    <seva-event-register id="register"
      tenant-slug="my-club"
      event-slug="annual-gala"
      api-url="https://api.seva.tools">
    </seva-event-register>
  </section>


  <section>
    <h2>3. Cart & Checkout</h2>
    <seva-cart id="cart"
      tenant-slug="my-club"
      api-url="https://api.seva.tools">
    </seva-cart>
  </section>


  <script>
    const auth = document.getElementById('auth');
    const register = document.getElementById('register');
    const cart = document.getElementById('cart');


    function propagateAuth() {
      const token = auth.getToken();
      if (token) {
        register.setAttribute('auth-token', token);
        cart.setAttribute('auth-token', token);
      } else {
        register.removeAttribute('auth-token');
        cart.removeAttribute('auth-token');
      }
    }


    auth.addEventListener('seva:authenticated', propagateAuth);
    auth.addEventListener('seva:signed-out', propagateAuth);
  </script>
</body>
</html>

Replace YOUR_COMPONENTS_URL, my-club, and annual-gala with your real values.

What happens next

Section titled “What happens next”
  1. The <seva-auth> component renders a sign-in form. When the user authenticates, the script passes the token to the other components.
  2. The <seva-event-register> component fetches event details from the API and walks the user through ticket selection and attendee entry. When the user clicks Add to Cart, it fires a seva:add-to-cart event.
  3. The <seva-cart> component automatically picks up that event, displays the cart, and handles Stripe checkout.

Next steps

Section titled “Next steps”