> For the complete documentation index, see [llms.txt](https://digitalsac.gitbook.io/digicalls/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://digitalsac.gitbook.io/digicalls/webphone-widget.md).

# Webphone (Widget)

O **`@digitalsac/digicalls-widget`** é um webphone completo empacotado como **Web Component** em Shadow DOM — discador, chamada recebida/ativa, seletor de linha e configurações.

Usa internamente o `@digitalsac/digicalls-sdk`.

> O widget roda em Shadow DOM: estilos da página hospedeira **não interferem** na UI de chamadas.

### Quando usar

| Use widget            | Use SDK puro                |
| --------------------- | --------------------------- |
| Quer UI pronta rápido | UI 100% custom (Izing, CRM) |
| Popup Click to Call   | Controle fino de cada tela  |
| Prototipagem          | Middleware complexo         |

### Início rápido

```typescript
import { render } from "@digitalsac/digicalls-widget";

const wp = render({
  baseUrl: "https://calls.digitalsac.io",
  tokens: ["dev_..."],
  lang: "pt",
  theme: "system",
});
```

### Documentação

| Página        | Conteúdo           |
| ------------- | ------------------ |
| Instalação    | npm / CDN          |
| Inicialização | `render()`, opções |
| API pública   | Handle imperativo  |
| Eventos SSE   | Tempo real         |
| Diagnóstico   | STUN, relatório    |
| Tema e idioma | Personalização     |

### CDN

```html
<script src="https://cdn.jsdelivr.net/npm/@digitalsac/digicalls-widget/dist/index.umd.js"></script>
<script>
  DigiCallsWebphone.render({ baseUrl: "https://calls.digitalsac.io", tokens: ["dev_..."] });
</script>
```

### Global UMD

Após `render()`, funções globais:

* `DigiCallsWebphone.dial(to)`
* `DigiCallsWebphone.setTheme("dark")`
* `DigiCallsWebphone.setLang("en")`
* `DigiCallsWebphone.destroy()`