@cccuno/call-widget-client
v0.3.0
Published
Downloads
983
Readme
CCC Widget Client
CCC Widget Client es un plugin que te permite integrar un widget en tu aplicación para realizar llamadas a la plataforma CCC Uno. Con este widget, puedes incrustar la funcionalidad de la plataforma sin necesidad de estar directamente en la aplicación.
Instalación
Usando npm
Para instalar el plugin, usa npm:
npm install @ccc/call-widget-clientUsando yarn
Si prefieres usar yarn, puedes instalar el plugin con el siguiente comando:
yarn add @ccc/call-widget-clientUso
Para utilizar el widget en tu aplicación, primero debes importarlo y luego inicializarlo con los parámetros deseados. A continuación se muestra un ejemplo de cómo hacerlo.
Importar el Widget
En tu archivo JavaScript o TypeScript, importa la función CCCWidgetInit del plugin:
import { CCCWidgetInit } from '@ccc/call-widget-client';Inicializar el Widget
Llama a la función CCCWidgetInit para crear e insertar el iframe del widget en tu página. Puedes pasarle un objeto de parámetros para configurar el widget.
// Configuración del widget
CCCWidgetInit({
top: '500px';
});Si no proporcionas ningún parámetro, el widget utilizará los valores predeterminados:
CCCWidgetInit();Parámetros
Parámetros de CCCWidgetInit
Parámetros de CCCWidgetInit
| Parámetro | Tipo | Valor por Defecto | Descripción |
|------------|---------------------|-------------------|-----------------------------------------------------------------------------|
| top | string | 50vh | Posición top del elemento en la pantalla. |
| onCall | function(data: any)| undefined | Función callback que se ejecuta cuando se inicia una llamada. Recibe un objeto data con los detalles de la llamada como parámetro. |
Payload de la llamada
Detalles del Payload
call_details: Contiene información sobre la llamada, como el ID de usuario, ID de llamada, tipo de llamada (inbound/outbound), nombre de la campaña, etc.
call_notes: Es un array de objetos, cada uno representando una nota relacionada con la llamada, incluyendo la disposición, usuario que dejó la nota, y un timestamp.
references: Esta es una lista que puede contener los campos personalizados de la lista de leads.
Ejemplo
Usando CDN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CCC Widget Example</title>
</head>
<body>
<script type="module">
import { CCCWidgetInit } from 'https://unpkg.com/@cccuno/call-widget-client@latest/dist/widget-client.js';
CCCWidgetInit({
top: '500px',
onCall: (data) => {
console.log('call info', data)
}
});
</script>
</body>
</html>