callix-dialer-widget 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/WIDGET-README.md
ADDED
|
@@ -0,0 +1,251 @@
|
|
|
1
|
+
# 📞 Callix Dialer Widget
|
|
2
|
+
|
|
3
|
+
Widget de discador telefônico para integração via CDN em qualquer site.
|
|
4
|
+
|
|
5
|
+
## 🚀 Quick Start (Uso Simples)
|
|
6
|
+
|
|
7
|
+
Adicione 2 linhas no seu HTML:
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<!-- 1. CSS do widget -->
|
|
11
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@callixbrasil/dialer-widget@1/dist-widget/callix-dialer.css">
|
|
12
|
+
|
|
13
|
+
<!-- 2. Container onde o widget vai aparecer -->
|
|
14
|
+
<div id="callix-dialer"></div>
|
|
15
|
+
|
|
16
|
+
<!-- 3. Script do widget -->
|
|
17
|
+
<script src="https://cdn.jsdelivr.net/npm/@callixbrasil/dialer-widget@1/dist-widget/callix-dialer.umd.js"></script>
|
|
18
|
+
|
|
19
|
+
<!-- 4. Inicialização -->
|
|
20
|
+
<script>
|
|
21
|
+
CallixDialer.init({
|
|
22
|
+
container: '#callix-dialer',
|
|
23
|
+
domain: 'villelabrasil.callix.com.br'
|
|
24
|
+
});
|
|
25
|
+
</script>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## 📦 Instalação
|
|
29
|
+
|
|
30
|
+
### Via CDN (Recomendado)
|
|
31
|
+
|
|
32
|
+
```html
|
|
33
|
+
<script src="https://cdn.jsdelivr.net/npm/@callixbrasil/dialer-widget@1.0.0/dist-widget/callix-dialer.umd.js"></script>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Via NPM
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
npm install @callixbrasil/dialer-widget
|
|
40
|
+
# ou
|
|
41
|
+
pnpm add @callixbrasil/dialer-widget
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
```javascript
|
|
45
|
+
import { CallixDialerWidget } from '@callixbrasil/dialer-widget';
|
|
46
|
+
|
|
47
|
+
const widget = new CallixDialerWidget({
|
|
48
|
+
container: '#callix-dialer',
|
|
49
|
+
domain: 'villelabrasil.callix.com.br'
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
widget.init();
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## ⚙️ Configuração
|
|
56
|
+
|
|
57
|
+
```javascript
|
|
58
|
+
CallixDialer.init({
|
|
59
|
+
// Container (obrigatório)
|
|
60
|
+
container: '#callix-dialer', // Seletor CSS ou HTMLElement
|
|
61
|
+
|
|
62
|
+
// Domínio Callix (obrigatório)
|
|
63
|
+
domain: 'villelabrasil.callix.com.br',
|
|
64
|
+
|
|
65
|
+
// URL da API (opcional, detecta automaticamente)
|
|
66
|
+
apiUrl: 'https://villelabrasil.callix.com.br',
|
|
67
|
+
|
|
68
|
+
// Tema (opcional)
|
|
69
|
+
theme: 'light', // 'light' ou 'dark'
|
|
70
|
+
|
|
71
|
+
// Posição (opcional)
|
|
72
|
+
position: 'bottom-right', // 'bottom-right' ou 'bottom-left'
|
|
73
|
+
|
|
74
|
+
// Callbacks (opcional)
|
|
75
|
+
onReady: function() {
|
|
76
|
+
console.log('Widget pronto!');
|
|
77
|
+
},
|
|
78
|
+
|
|
79
|
+
onError: function(error) {
|
|
80
|
+
console.error('Erro:', error);
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## 🎨 Exemplos de Uso
|
|
86
|
+
|
|
87
|
+
### HTML Puro
|
|
88
|
+
|
|
89
|
+
```html
|
|
90
|
+
<!DOCTYPE html>
|
|
91
|
+
<html>
|
|
92
|
+
<head>
|
|
93
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@callixbrasil/dialer-widget@1/dist-widget/callix-dialer.css">
|
|
94
|
+
</head>
|
|
95
|
+
<body>
|
|
96
|
+
<h1>Meu Site</h1>
|
|
97
|
+
<div id="dialer"></div>
|
|
98
|
+
|
|
99
|
+
<script src="https://cdn.jsdelivr.net/npm/@callixbrasil/dialer-widget@1/dist-widget/callix-dialer.umd.js"></script>
|
|
100
|
+
<script>
|
|
101
|
+
CallixDialer.init({
|
|
102
|
+
container: '#dialer',
|
|
103
|
+
domain: 'villelabrasil.callix.com.br'
|
|
104
|
+
});
|
|
105
|
+
</script>
|
|
106
|
+
</body>
|
|
107
|
+
</html>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### WordPress
|
|
111
|
+
|
|
112
|
+
```php
|
|
113
|
+
<?php
|
|
114
|
+
// functions.php ou plugin
|
|
115
|
+
|
|
116
|
+
function add_callix_dialer() {
|
|
117
|
+
// Adicionar CSS
|
|
118
|
+
wp_enqueue_style(
|
|
119
|
+
'callix-dialer',
|
|
120
|
+
'https://cdn.jsdelivr.net/npm/@callixbrasil/dialer-widget@1/dist-widget/callix-dialer.css'
|
|
121
|
+
);
|
|
122
|
+
|
|
123
|
+
// Adicionar JS
|
|
124
|
+
wp_enqueue_script(
|
|
125
|
+
'callix-dialer',
|
|
126
|
+
'https://cdn.jsdelivr.net/npm/@callixbrasil/dialer-widget@1/dist-widget/callix-dialer.umd.js',
|
|
127
|
+
array(),
|
|
128
|
+
'1.0.0',
|
|
129
|
+
true
|
|
130
|
+
);
|
|
131
|
+
|
|
132
|
+
// Inicializar
|
|
133
|
+
wp_add_inline_script('callix-dialer', '
|
|
134
|
+
CallixDialer.init({
|
|
135
|
+
container: "#callix-dialer-container",
|
|
136
|
+
domain: "' . get_option('callix_domain') . '"
|
|
137
|
+
});
|
|
138
|
+
');
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
add_action('wp_enqueue_scripts', 'add_callix_dialer');
|
|
142
|
+
|
|
143
|
+
// Adicionar container no footer
|
|
144
|
+
function add_callix_dialer_container() {
|
|
145
|
+
echo '<div id="callix-dialer-container"></div>';
|
|
146
|
+
}
|
|
147
|
+
add_action('wp_footer', 'add_callix_dialer_container');
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
### React/Next.js
|
|
151
|
+
|
|
152
|
+
```tsx
|
|
153
|
+
import { useEffect, useRef } from 'react';
|
|
154
|
+
|
|
155
|
+
export function CallixDialerWidget() {
|
|
156
|
+
const containerRef = useRef<HTMLDivElement>(null);
|
|
157
|
+
const widgetRef = useRef<any>(null);
|
|
158
|
+
|
|
159
|
+
useEffect(() => {
|
|
160
|
+
// Carregar script dinamicamente
|
|
161
|
+
const script = document.createElement('script');
|
|
162
|
+
script.src = 'https://cdn.jsdelivr.net/npm/@callixbrasil/dialer-widget@1/dist-widget/callix-dialer.umd.js';
|
|
163
|
+
script.async = true;
|
|
164
|
+
|
|
165
|
+
script.onload = () => {
|
|
166
|
+
if (containerRef.current && (window as any).CallixDialer) {
|
|
167
|
+
widgetRef.current = (window as any).CallixDialer.init({
|
|
168
|
+
container: containerRef.current,
|
|
169
|
+
domain: 'villelabrasil.callix.com.br'
|
|
170
|
+
});
|
|
171
|
+
}
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
document.body.appendChild(script);
|
|
175
|
+
|
|
176
|
+
return () => {
|
|
177
|
+
if (widgetRef.current) {
|
|
178
|
+
widgetRef.current.destroy();
|
|
179
|
+
}
|
|
180
|
+
document.body.removeChild(script);
|
|
181
|
+
};
|
|
182
|
+
}, []);
|
|
183
|
+
|
|
184
|
+
return <div ref={containerRef} />;
|
|
185
|
+
}
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
## 🔧 API
|
|
189
|
+
|
|
190
|
+
### `CallixDialer.init(options)`
|
|
191
|
+
|
|
192
|
+
Inicializa o widget e retorna uma instância.
|
|
193
|
+
|
|
194
|
+
**Retorno:** `CallixDialerWidget`
|
|
195
|
+
|
|
196
|
+
### `widget.destroy()`
|
|
197
|
+
|
|
198
|
+
Remove o widget do DOM e limpa recursos.
|
|
199
|
+
|
|
200
|
+
```javascript
|
|
201
|
+
const widget = CallixDialer.init({ container: '#dialer' });
|
|
202
|
+
// ... usar widget
|
|
203
|
+
widget.destroy(); // Remover quando não precisar mais
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
## 🌐 CDN Disponíveis
|
|
207
|
+
|
|
208
|
+
- **jsDelivr** (Recomendado): `https://cdn.jsdelivr.net/npm/@callixbrasil/dialer-widget@1`
|
|
209
|
+
- **unpkg**: `https://unpkg.com/@callixbrasil/dialer-widget@1`
|
|
210
|
+
|
|
211
|
+
## 📝 Versionamento
|
|
212
|
+
|
|
213
|
+
Suportamos [Semantic Versioning](https://semver.org/):
|
|
214
|
+
|
|
215
|
+
- `@1` - Última versão v1.x.x (recomendado)
|
|
216
|
+
- `@1.0` - Última versão v1.0.x
|
|
217
|
+
- `@1.0.0` - Versão exata (fixar versão)
|
|
218
|
+
|
|
219
|
+
## 🐛 Troubleshooting
|
|
220
|
+
|
|
221
|
+
### Widget não aparece
|
|
222
|
+
|
|
223
|
+
1. Verifique o console do navegador
|
|
224
|
+
2. Confirme que o container existe no DOM
|
|
225
|
+
3. Verifique se o CSS foi carregado
|
|
226
|
+
|
|
227
|
+
```javascript
|
|
228
|
+
// Debug
|
|
229
|
+
console.log('CallixDialer disponível?', typeof CallixDialer);
|
|
230
|
+
console.log('Container existe?', document.querySelector('#callix-dialer'));
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
### Conflitos de CSS
|
|
234
|
+
|
|
235
|
+
Se houver conflitos, use um container isolado:
|
|
236
|
+
|
|
237
|
+
```html
|
|
238
|
+
<div style="all: initial;">
|
|
239
|
+
<div id="callix-dialer"></div>
|
|
240
|
+
</div>
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
## 📄 Licença
|
|
244
|
+
|
|
245
|
+
MIT
|
|
246
|
+
|
|
247
|
+
## 🤝 Suporte
|
|
248
|
+
|
|
249
|
+
- 📧 Email: suporte@callixbrasil.com.br
|
|
250
|
+
- 📚 Docs: https://docs.callixbrasil.com.br
|
|
251
|
+
- 🐛 Issues: https://github.com/callixbrasil/dialer-widget/issues
|