villela-dialer-widget

v1.0.0

Published

a month ago

Widget de discador para integração via CDN - Componente React para gerenciamento de chamadas VoIP

0High
0Medium
0Low

weriqui

dialer widget voip sip webrtc call phone cdn react villela

📞 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:

<!-- 1. CSS do widget -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@callixbrasil/dialer-widget@1/dist-widget/callix-dialer.css">

<!-- 2. Container onde o widget vai aparecer -->
<div id="callix-dialer"></div>

<!-- 3. Script do widget -->
<script src="https://cdn.jsdelivr.net/npm/@callixbrasil/dialer-widget@1/dist-widget/callix-dialer.umd.js"></script>

<!-- 4. Inicialização -->
<script>
  CallixDialer.init({
    container: '#callix-dialer',
    domain: 'villelabrasil.callix.com.br'
  });
</script>

📦 Instalação

Via CDN (Recomendado)

<script src="https://cdn.jsdelivr.net/npm/@callixbrasil/[email protected]/dist-widget/callix-dialer.umd.js"></script>

Via NPM

npm install @callixbrasil/dialer-widget
# ou
pnpm add @callixbrasil/dialer-widget

import { CallixDialerWidget } from '@callixbrasil/dialer-widget';

const widget = new CallixDialerWidget({
  container: '#callix-dialer',
  domain: 'villelabrasil.callix.com.br'
});

widget.init();

⚙️ Configuração

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

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@callixbrasil/dialer-widget@1/dist-widget/callix-dialer.css">
</head>
<body>
  <h1>Meu Site</h1>
  <div id="dialer"></div>
  
  <script src="https://cdn.jsdelivr.net/npm/@callixbrasil/dialer-widget@1/dist-widget/callix-dialer.umd.js"></script>
  <script>
    CallixDialer.init({
      container: '#dialer',
      domain: 'villelabrasil.callix.com.br'
    });
  </script>
</body>
</html>

WordPress

<?php
// functions.php ou plugin

function add_callix_dialer() {
    // Adicionar CSS
    wp_enqueue_style(
        'callix-dialer', 
        'https://cdn.jsdelivr.net/npm/@callixbrasil/dialer-widget@1/dist-widget/callix-dialer.css'
    );
    
    // Adicionar JS
    wp_enqueue_script(
        'callix-dialer', 
        'https://cdn.jsdelivr.net/npm/@callixbrasil/dialer-widget@1/dist-widget/callix-dialer.umd.js',
        array(),
        '1.0.0',
        true
    );
    
    // Inicializar
    wp_add_inline_script('callix-dialer', '
        CallixDialer.init({
            container: "#callix-dialer-container",
            domain: "' . get_option('callix_domain') . '"
        });
    ');
}

add_action('wp_enqueue_scripts', 'add_callix_dialer');

// Adicionar container no footer
function add_callix_dialer_container() {
    echo '<div id="callix-dialer-container"></div>';
}
add_action('wp_footer', 'add_callix_dialer_container');

React/Next.js

import { useEffect, useRef } from 'react';

export function CallixDialerWidget() {
  const containerRef = useRef<HTMLDivElement>(null);
  const widgetRef = useRef<any>(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 <div ref={containerRef} />;
}

🔧 API

`CallixDialer.init(options)`

Inicializa o widget e retorna uma instância.

Retorno: CallixDialerWidget

`widget.destroy()`

Remove o widget do DOM e limpa recursos.

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:

@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

Verifique o console do navegador
Confirme que o container existe no DOM
Verifique se o CSS foi carregado

// 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:

<div style="all: initial;">
  <div id="callix-dialer"></div>
</div>

📄 Licença

MIT

🤝 Suporte

📧 Email: [email protected]
📚 Docs: https://docs.callixbrasil.com.br
🐛 Issues: https://github.com/callixbrasil/dialer-widget/issues