Preguntas Frecuentes
NUEVO
Soporte de Bitrix24
Inscripción e inicio de sesión
Inicio - Bitrix24
Noticias
Tareas y proyectos
Chats y llamadas
Grupos de Trabajo
Calendarios
Bitrix24.Drive
Webmail
Gestión del inventario
CRM
CoPilot - IA en Bitrix24
CRM + Online store
Sales Intelligence
CRM Analytics
BI Builder
Automatización
Sales Center (beta)
Tienda CRM (beta)
Marketing
Compañía
Base de conocimientos
Bitrix24.Sites
Tienda Online
Bitrix24.Market
Contact Center
Mi Perfil
Telefonía
Flujos de Trabajo
Bitrix24 En Premisa
Aplicación móvil
Aplicación de escritorio
Suscripción
Enterprise
Configuraciones de la cuenta
Preguntas Generales
Actualización de los artículos (archivo)

Soporte Bitrix24

Widget del sitio web: configuración avanzada

A continuación encontrará varias soluciones que le ayudarán a identificar clientes en el chat en vivo de su sitio web de Bitrix24.

Ejemplo: usted tiene una tienda online y un sitio web de Bitrix24. El cliente ha comprado algo en su tienda online y ahora visita su sitio web por primera vez.

Para los clientes que no han iniciado sesión en ninguno de sus servicios, puede utilizar el formulario de contacto especial.

Para los clientes que han iniciado sesión en cualquiera de sus servicios, tenemos una solución más interesante para que sus clientes no necesiten completar el formulario de contacto nuevamente.


¿Cómo funciona?

Puede agregar un código especial de JavaScript a la página a la que está conectado su widget del sitio web.

Generalmente, el código se ve de manera siguiente:

<script type="text/javascript"> 
window.addEventListener('onBitrixLiveChat', function(event)
{
  var widget = event.detail.widget;

  // 1. Setting external user authentication
  ...
  
  // 2. Setting custom data
  ...
  
  // 3. Event handling
  ...
  
});
</script>

Trabajando con el widget del sitio web:

  • widget.open() – abrir el widget;
  • widget.close() – cerrar el widget;
  • widget.subscribe() – suscripción al evento;
  • widget.setUserRegisterData() – establecer autenticación de usuario externo;
  • widget.setCustomData() – establecer datos personalizados;
  • widget.setOption() – establecer opciones adicionales.

1. Configuración de autenticación de usuario externo

<script type="text/javascript"> 
window.addEventListener('onBitrixLiveChat', function(event)
{
  var widget = event.detail.widget;

  // Settings external user authentication
  widget.setUserRegisterData({
      'hash': '12b42ebcec7e3c26a313272c26efddbd',
      'name': 'John',
      'lastName': 'Smith',
      'avatar': 'http://files.smith.com/images/avatar-john.jpg',
      'email': 'john@smith.com',
      'www': 'https://bitrix24.com',
      'gender': 'M',
      'position': 'Loyal Customer'
  });
  
});
</script>
Atención:
hash es un campo especial que "reemplaza" la autenticación. Este código debe ser único dentro de su Bitrix24 y seguro. Además, debe estar obligatoriamente en formato MD5. Por ejemplo: md5(USER_ID+_website_address_ + _secret_code_)

2. Configuración de datos personalizados

Puede configurar datos personalizados usando bloques especiales:

<script type="text/javascript"> 
window.addEventListener('onBitrixLiveChat', function(event)
{
  var widget = event.detail.widget;

  // Setting custom data (get published at the beginning of a new conversation, extended format)
  widget.setCustomData([
      {"USER": {
          "NAME" : "John Smith",
          "AVATAR" : "http://files.smith.com/images/avatar-john.jpg",
      }},
      {"GRID": [
          {
              "NAME" : "E-mail",
              "VALUE" : "john@smith.com",
              "DISPLAY" : "LINE",
          },
          {
              "NAME" : "Customer ID",
              "VALUE" : "12234",
              "COLOR" : "#ff0000",
              "DISPLAY" : "LINE"
          },
          {
              "NAME": "Website",
              "VALUE": location.hostname,
              "DISPLAY": "LINE"
          },
          {
              "NAME": "Page",
              "VALUE": "[url="+location.href+"]"+(document.title || location.href)+"[/url]",
              "DISPLAY": "LINE"
          },
      ]}
  ]);
  
});
</script>

Para publicar los datos en formato de texto, puede utilizar una construcción simplificada. En el texto, puede utilizar etiquetas HTML: BR, B, U, I, S, URL.

<script type="text/javascript"> 
window.addEventListener('onBitrixLiveChat', function(event)
{
  var widget = event.detail.widget;

  widget.setCustomData("[b]John Smith[/b] (john@smith.com)");

});
</script>
Obtenga la información más detallada sobre el bloque y cómo utilizarlo en el curso Bitrix24 Bot Platform.

3. Manejo de eventos

<script type="text/javascript"> 
window.addEventListener('onBitrixLiveChat', function(event)
{
  var widget = event.detail.widget;

  // Event handling	
  widget.subscribe({
      type: BX.LiveChatWidget.SubscriptionType.EVENT_SUBSCRIPTION_TYPE,
      callback: function(data) {
      // any command
      ...
      }
  });
  
});
</script>
  • BX.LiveChatWidget.SubscriptionType.configLoaded – el evento "se ha cargado información sobre el canal abierto.".

  • BX.LiveChatWidget.SubscriptionType.widgetOpen – el evento "el widget ha sido abierto".

  • BX.LiveChatWidget.SubscriptionType.widgetClose – el evento "el widget ha sido cerrado".

  • BX.LiveChatWidget.SubscriptionType.sessionStart – el evento "la conversación se ha iniciado".
    Ejemplo del resultado:
    {sessionId: 123}
  • BX.LiveChatWidget.SubscriptionType.sessionOperatorChange – el evento "el agente ha sido cambiado".
    Ejemplo del resultado:
    {operator: {name: '',firstName: '',lastName: '',workPosition: '',avatar: '',online: false}}
  • BX.LiveChatWidget.SubscriptionType.sessionFinish – el evento "la conversación se ha finalizado".
    Ejemplo del resultado:
    {sessionId: 123}
  • BX.LiveChatWidget.SubscriptionType.operatorMessage – el evento "el agente ha enviado un mensaje".
    Ejemplo del resultado:
    {id:"44609041",chatId:711773,senderId:1246,recipientId:"chat711773",date:"2018-11-22T20:17:57.000Z",text:"hi!"}
  • BX.LiveChatWidget.SubscriptionType.userForm – el evento "el cliente ha completado el formulario web".
    Ejemplo del resultado:
    {form: "welcome", fields: {name: "", phone: "", email: ""}} // welcome|offline|history
  • BX.LiveChatWidget.SubscriptionType.userMessage – el evento "el cliente ha enviado un mensaje".
    Ejemplo del resultado:
    {id: 123, text:"hi!"}
  • BX.LiveChatWidget.SubscriptionType.userVote – el evento "el cliente ha calificado la conversación".
    Ejemplo del resultado:
    {vote: "like"} // like|dislike
  • BX.LiveChatWidget.SubscriptionType.every – los resultados de todos los eventos se pueden especificar a la vez en este evento.
    El tipo del evento every es un poco diferente:
    <script type="text/javascript"> 
    window.addEventListener('onBitrixLiveChat', function(event)
    {
      var widget = event.detail.widget;
    
      widget.subscribe({
          type: BX.LiveChatWidget.SubscriptionType.every,
          callback: function(event) {
              if (event.type == BX.LiveChatWidget.SubscriptionType.configLoaded)
              {
                  widget.open();
              }
          }
      });
      
    });
    </script>
    Ejemplo del resultado:
    {type: "userVote", data: {vote: "like"}}

    type le muestra el tipo del evento, data – datos de eventos (ejemplos de estos datos se proporcionan arriba).


Su código JavaScript final puede constar de 3 partes, según sus necesidades.

Por ejemplo:

<script type="text/javascript">

window.addEventListener('onBitrixLiveChat', function(event)
{
  var widget = event.detail.widget;
  
  // Setting external user authentication
  widget.setUserRegisterData({
      'hash': '12b42ebcec7e3c26a313272c26efddbd',
      'name': 'John',
      'lastName': 'Smith',
      'avatar': 'http://files.smith.com/images/avatar-john.jpg',
      'email': 'john@smith.com',
      'www': 'https://bitrix24.com',
      'gender': 'M',
      'position': 'Loyal Customer'
  });	

  // Setting custom data (get published at the beginning of a new conversation, extended format)
  widget.setCustomData([
      {"USER": {
          "NAME" : "John Smith",
          "AVATAR" : "http://files.smith.com/images/avatar-john.jpg",
      }},
      {"GRID": [
          {
              "NAME" : "E-mail",
              "VALUE" : "john@smith.com",
              "DISPLAY" : "LINE",
          },
          {
              "NAME" : "Customer ID",
              "VALUE" : "12234",
              "COLOR" : "#ff0000",
              "DISPLAY" : "LINE"
          },
          {
              "NAME": "Website",
              "VALUE": location.hostname,
              "DISPLAY": "LINE"
          },
          {
              "NAME": "Page",
              "VALUE": "[url="+location.href+"]"+(document.title || location.href)+"[/url]",
              "DISPLAY": "LINE"
          },
      ]}
  ]);
      
  widget.subscribe({
      type: BX.LiveChatWidget.SubscriptionType.every,
      callback: function(event) {
          if (event.type == BX.LiveChatWidget.SubscriptionType.configLoaded)
          {
              widget.open();
          }
      }
  });	
  
});
</script>

4. Personalizar frases utilizadas en el widget del sitio web

Puede personalizar las frases utilizadas en el widget del sitio web de Bitrix24.

Use el código de JavaScript para hacerlo:

<script>
window.addEventListener('onBitrixLiveChat', function(event)
{
  var widget = event.detail.widget;

  widget.subscribe({
      type: BX.LiveChatWidget.SubscriptionType.configLoaded,
      callback: function() 
      {
          widget.addLocalize({VARIABLE: 'New Text'});				
      }
  });
  
});
</script>
Lea más en el artículo - Personalizar frases utilizadas en el widget del sitio web.

5. Ocultar formulario de contacto

Puede ocultar el formulario de bienvenida que solicita los datos de contacto del cliente en el chat en vivo.

Para hacerlo, utilice el siguiente código:

<script>
window.addEventListener('onBitrixLiveChat', function(event)
{
var widget = event.detail.widget;
widget.mutateTemplateComponent('bx-livechat-form-welcome', { template: '<div></div>' });
});
</script>
Para desarrolladores

Puede personalizar cualquiera de los componentes de la siguiente sección: imopenlines/install/js/imopenlines/component/widget/src/component/

Tenga en cuenta que después de la personalización, tendrá que realizar un seguimiento de los cambios en estos componentes y mantener sus ediciones actualizadas.


6. Deshabilitar la verificación adicional de la configuración de múltiples sitios para el widget

En la configuración de sitios múltiples en un núcleo y en el subdominio del dominio principal, se restablece la autorización del usuario.

Para evitar que la autorización se restablezca, debe realizar ciertos ajustes.

De forma predeterminada, la verificación de la configuración multisitio del widget de Bitrix24 está habilitada en el módulo Canales abiertos (imopenlines) desde la versión 21.400.0. Si se encuentra dicha configuración, se mostrará una notificación en el widget.

El siguiente código deshabilita la verificación:

<script>
window.addEventListener('onBitrixLiveChat', function(event){
  var widget = event.detail.widget;
  widget.setOption('checkSameDomain', false);
    });
</script>
¿Le ha resultado útil esta información?
Asistencia de especialistas en integración
No es lo que estoy buscando
Texto complicado e incomprensible
La información está desactualizada
La explicación es demasiado corta. Necesito más información
No me gusta cómo funciona esta herramienta
Ir a Bitrix24
¿No tiene una cuenta? Créela gratis