# Quick Start

ALTCHA protects your forms from bots with an invisible, privacy-friendly proof-of-work challenge — no CAPTCHAs, no tracking, no user friction. This guide gets a working integration in place in a few minutes. It covers the moving pieces at a high level; each step links out to a dedicated page with the full details.

An ALTCHA integration has three parts:

1. **Widget** — embedded in your form, computes the proof-of-work challenge in the browser.
2. **Challenge generation** — your server (or [ALTCHA Sentinel](/docs/sentinel/)) issues a fresh challenge to the widget.
3. **Verification** — your server checks the solved challenge before accepting the submission.

## Before you begin

You'll need:

- A website or application served over **HTTPS** — the widget requires a secure context.
- A way to generate challenges: either [ALTCHA Sentinel](/docs/sentinel/) or [ALTCHA Cloud](/docs/cloud/) (no backend code required), or your own server using one of the official [libraries](/docs/integration/server/).

## Step 1 — Add the widget

Install via npm:

```bash
npm install altcha
```

```js
import "altcha";
```

Or load it from a script tag:

```html
<script async defer src="https://cdn.jsdelivr.net/gh/altcha-org/altcha/dist/main/altcha.min.js" type="module"></script>
```

Then add the `<altcha-widget>` element to your form, pointing `challenge` at your challenge endpoint:

```html
<form method="POST" action="/submit">
<!-- your form fields -->

<altcha-widget challenge="{YOUR_SERVER_HERE}"></altcha-widget>

<button type="submit">Send</button>
</form>
```

The widget renders as a lightweight, accessible verification element and adds a hidden `altcha` field to your form with the verification payload. See the [Widget Integration](/docs/integration/widget/) page for configuration, theming, and internationalization.

## Step 2 — Generate challenges

Your server must return a fresh, single-use challenge whenever the widget requests one.

- **Using ALTCHA Sentinel or Cloud** — challenges are generated for you. Point the widget's `challenge` attribute directly at your Sentinel/Cloud endpoint URL, no backend code needed.
- **Using your own server** — expose an endpoint that returns a new challenge on each request, using one of the official [server libraries](/docs/integration/server/).

## Step 3 — Verify submissions

Every submission must be verified server-side — the widget alone doesn't protect you. In your form handler, read the `altcha` field and verify it:

- **With Sentinel or Cloud** — verify the payload using `verifyServerSignature` from a [library](/docs/integration/server/), or call the verification endpoint directly.
- **Without Sentinel** — verify the payload using `verifySolution` from a [library](/docs/integration/server/).

See the [Server Integration](/docs/integration/server/) page for library-specific examples.

## Step 4 — Test it

1. Load your page and confirm the widget renders inside the form.
2. Submit without completing verification — your server should reject it.
3. Complete verification and submit — it should succeed.

## Next steps

- **[Widget Integration](/docs/integration/widget/)** — configuration, theming, algorithms, events
- **[Server Integration](/docs/integration/server/)** — libraries and verification details
- **[Diagrams](/docs/integration/diagrams/)** — visual overview of the verification flow
- **[Troubleshooting](/docs/integration/troubleshooting/)** — common issues and fixes