# 📞 Callix Dialer Widget
Widget de discador telefônico para integração via CDN em qualquer site.
## 🚀 Quick Start (Uso Simples)
Adicione 2 linhas no seu HTML:
```html
```
## 📦 Instalação
### Via CDN (Recomendado)
```html
```
### Via NPM
```bash
npm install @callixbrasil/dialer-widget
# ou
pnpm add @callixbrasil/dialer-widget
```
```javascript
import { CallixDialerWidget } from '@callixbrasil/dialer-widget';
const widget = new CallixDialerWidget({
container: '#callix-dialer',
domain: 'villelabrasil.callix.com.br'
});
widget.init();
```
## ⚙️ Configuração
```javascript
CallixDialer.init({
// Container (obrigatório)
container: '#callix-dialer', // Seletor CSS ou HTMLElement
// Domínio Callix (obrigatório)
domain: 'villelabrasil.callix.com.br',
// URL da API (opcional, detecta automaticamente)
apiUrl: 'https://villelabrasil.callix.com.br',
// Tema (opcional)
theme: 'light', // 'light' ou 'dark'
// Posição (opcional)
position: 'bottom-right', // 'bottom-right' ou 'bottom-left'
// Callbacks (opcional)
onReady: function() {
console.log('Widget pronto!');
},
onError: function(error) {
console.error('Erro:', error);
}
});
```
## 🎨 Exemplos de Uso
### HTML Puro
```html
Meu Site
```
### WordPress
```php
';
}
add_action('wp_footer', 'add_callix_dialer_container');
```
### React/Next.js
```tsx
import { useEffect, useRef } from 'react';
export function CallixDialerWidget() {
const containerRef = useRef(null);
const widgetRef = useRef(null);
useEffect(() => {
// Carregar script dinamicamente
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/@callixbrasil/dialer-widget@1/dist-widget/callix-dialer.umd.js';
script.async = true;
script.onload = () => {
if (containerRef.current && (window as any).CallixDialer) {
widgetRef.current = (window as any).CallixDialer.init({
container: containerRef.current,
domain: 'villelabrasil.callix.com.br'
});
}
};
document.body.appendChild(script);
return () => {
if (widgetRef.current) {
widgetRef.current.destroy();
}
document.body.removeChild(script);
};
}, []);
return ;
}
```
## 🔧 API
### `CallixDialer.init(options)`
Inicializa o widget e retorna uma instância.
**Retorno:** `CallixDialerWidget`
### `widget.destroy()`
Remove o widget do DOM e limpa recursos.
```javascript
const widget = CallixDialer.init({ container: '#dialer' });
// ... usar widget
widget.destroy(); // Remover quando não precisar mais
```
## 🌐 CDN Disponíveis
- **jsDelivr** (Recomendado): `https://cdn.jsdelivr.net/npm/@callixbrasil/dialer-widget@1`
- **unpkg**: `https://unpkg.com/@callixbrasil/dialer-widget@1`
## 📝 Versionamento
Suportamos [Semantic Versioning](https://semver.org/):
- `@1` - Última versão v1.x.x (recomendado)
- `@1.0` - Última versão v1.0.x
- `@1.0.0` - Versão exata (fixar versão)
## 🐛 Troubleshooting
### Widget não aparece
1. Verifique o console do navegador
2. Confirme que o container existe no DOM
3. Verifique se o CSS foi carregado
```javascript
// Debug
console.log('CallixDialer disponível?', typeof CallixDialer);
console.log('Container existe?', document.querySelector('#callix-dialer'));
```
### Conflitos de CSS
Se houver conflitos, use um container isolado:
```html
```
## 📄 Licença
MIT
## 🤝 Suporte
- 📧 Email: suporte@callixbrasil.com.br
- 📚 Docs: https://docs.callixbrasil.com.br
- 🐛 Issues: https://github.com/callixbrasil/dialer-widget/issues