# Script tag

> El botón de Andco en una página sin paso de build, como elemento personalizado.


Cuando no hay bundler —una página estática, un CMS, una plantilla de servidor— `@andco/sdk-script` entrega el botón como elemento personalizado. Se configura con atributos y no hay ningún paso de registro.

```html title="index.html"
<script type="module" src="https://unpkg.com/@andco/sdk-script/andco.js"></script>

<andco-button
  client-id="tu-client-id"
  redirect-to="https://tuapp.com/"
  scopes="openid email profile"
></andco-button>
```

Eso es todo: el elemento se registra solo, monta el iframe de Andco, abre la ventana emergente cuando la persona hace clic e intercambia el código al volver.

## Atributos

| Atributo | Para qué |
| --- | --- |
| `client-id` | tu cliente OAuth. Obligatorio |
| `redirect-to` | la URL registrada de retorno. Obligatorio |
| `scopes` | separados por espacios |
| `flow` | `authorization` o `intent` |
| `locale` | etiqueta BCP 47, por ejemplo `es-CL` |
| `theme-mode` | `light`, `dark` o `system` |
| `disabled`, `busy` | estado visual |
| `endpoint-auth`, `endpoint-api`, `endpoint-widget` | solo para apuntar a otro entorno |

Varios elementos en la misma página que declaren la misma configuración comparten una sola instancia, y por lo tanto una sola sesión.

## Escuchar el resultado

```html
<script type="module">
  const button = document.querySelector("andco-button");

  button.addEventListener("andco-complete", () => location.reload());
  button.addEventListener("andco-error", (event) => console.error(event.detail));
  button.addEventListener("andco-dismiss", () => console.log("closed the window"));
</script>
```

Los eventos llevan prefijo `andco-` para no chocar con los tuyos.

## Leer la sesión

```html
<script type="module">
  import { andcoSessionFor } from "https://unpkg.com/@andco/sdk-script/andco.js";

  const button = document.querySelector("andco-button");
  button.addEventListener("andco-complete", () => {
    const session = andcoSessionFor(button);
    console.log(session?.user.email);
  });
</script>
```

## Valores que no son escalares

Un atributo solo puede llevar texto. Lo que no es escalar —por ejemplo la contribución de autorización de un Resource Server— se asigna como propiedad, que es la división habitual en Web Components:

```html
<script type="module">
  document.querySelector("andco-button").authorization = {
    scopes: ["openid", "email"],
    authorizations: [{ resourceServerId: "bank", resource: "https://bank.andco.cl" }],
  };
</script>
```

## Cuándo no usar esto

Si tu página tiene un bundler, usa `@andco/sdk` directamente o el paquete de tu framework: tendrás tipos, verás los errores al compilar y no cargarás el elemento personalizado.