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, payment checkout, and member self-service features (profile management, registration history, and a member directory). 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

Note: Seva also provides modal-based member self-service components — <seva-my-profile>, <seva-my-registrations>, and <seva-member-directory>. These are covered in their own reference pages. This guide focuses on the core registration flow.

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”