> For the complete documentation index, see [llms.txt](https://wavoip.gitbook.io/api/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wavoip.gitbook.io/api/webphone/primeiros-passos/instalacao.md).
# Instalação
Como instalar o Wavoip Webphone via gerenciador de pacotes ou CDN.
O Wavoip Webphone é distribuído como o pacote npm [`@wavoip/wavoip-webphone`](https://www.npmjs.com/package/@wavoip/wavoip-webphone). Escolha entre instalar via gerenciador de pacotes (projetos com bundler) ou via CDN (HTML estático, prototipagem rápida).
## Gerenciador de pacotes
{% tabs %}
{% tab title="npm" %}
```bash
npm install @wavoip/wavoip-webphone
```
{% endtab %}
{% tab title="pnpm" %}
```bash
pnpm add @wavoip/wavoip-webphone
```
{% endtab %}
{% tab title="yarn" %}
```bash
yarn add @wavoip/wavoip-webphone
```
{% endtab %}
{% endtabs %}
Depois de instalar, importe o módulo padrão:
```ts
import webphone from "@wavoip/wavoip-webphone";
await webphone.render();
```
{% hint style="info" %}
Pacote já vem com tipos TypeScript (`dist/index.d.ts`). Sem necessidade de instalar `@types/*` separado.
{% endhint %}
## CDN (jsDelivr)
Para HTML estático ou prototipagem rápida, carregue o bundle ESM direto via jsDelivr. Página do pacote: [jsdelivr.com/package/npm/@wavoip/wavoip-webphone](https://www.jsdelivr.com/package/npm/@wavoip/wavoip-webphone@latest).
```html
```
### Fixar versão
`@latest` resolve sempre para a versão mais recente publicada. Em produção, fixe uma versão específica para evitar quebras inesperadas:
```html
```
{% hint style="warning" %}
Fixar a versão na URL **não basta** para builds UMD. O webphone verifica o jsDelivr a cada `render()` e troca para a `latest` publicada mesmo com a URL apontando para versão exata. Para travar, adicione `data-auto-update="false"` na tag `
```
### Build UMD (sem `type="module"`)
Para ambientes que não suportam ESM, use o bundle UMD. Ele expõe o webphone em `window.wavoipWebphone`:
```html
```
### Auto-atualização
Quando carregado via `
```
## Próximo passo
Com o pacote instalado, prossiga para [Inicializando o Webphone](/api/webphone/primeiros-passos/inicializacao.md) para entender `render()`, `destroy()` e as opções de configuração.