> 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/customizacao.md).

# Customização

## Tema e idioma — Webphone

### Tema

Valores: `"light"`, `"dark"`, `"system"`.

```typescript
render({ theme: "system" });

// runtime
wp.setTheme("dark");
```

`system` segue `prefers-color-scheme` do SO.

### Idioma

Suportados: **pt**, **en**, **es**.

```typescript
render({ lang: "pt" });
wp.setLang("en");
```

Strings da UI (discador, botões, diagnóstico) traduzem automaticamente.

### Preferências na UI

Aba **Configurações → Preferências** permite trocar tema/idioma sem código.

### Sincronizar com CRM

Quando o Izing (ou outro host) mudar tema:

```typescript
watch(darkMode, (v) => wp.setTheme(v ? "dark" : "light"));
```

### Customização de cores

O widget usa CSS compilado no bundle (Shadow DOM). **Paleta custom** exige fork/build do pacote `@digitalsac/digicalls-widget` — não há variáveis CSS expostas em runtime como no concorrente.

Para branding forte, prefira:

1. SDK puro + sua UI, ou
2. Widget + logo do CRM ao redor (fora do Shadow DOM).

### Posição

O botão flutuante fica no **canto inferior direito** por padrão. Posicionamento custom via CSS externo no container `#digicalls-webphone` é limitado pelo Shadow DOM — use SDK se precisar layout livre.