Esta web ya no recibe mantenimiento. Por favor, visita documentation.indigitall.com para leer nuestra documentación actualizada.

logo indigitall logo indigitall
search icon
EN

  |  ES

/Guía Rápida de Integración /Chat /Web

Chat web - con javascript

guía rápida de integración

Indice

Si utilizas npm pulsa aquí.

Integración

Este artículo muestra el desarrollo mínimo que hay que hacer para comenzar a utilizar el chat.

Inicializar el Chat

Para inicializar el Chat es necesario pegar el siguiente código en el la página principal de tu web, justo antes del final de la etiqueta </body>:

Importante: el valor channelKey es único y personal.

<script src="../indigitall-web-chat.js"
 charset="utf-8" 
 onload="WebChat.init({
    channelKey: your_channel_key,

    <!--datos personalizados-->

    externalCode: 'your_external_code',
    titleChat: 'your_title_chat',
    botName: 'your_bot_name',
    defaultUsername: 'your_default_user_name',
    primaryColor: 'your_primaryColor',
    backgroundChatColor: 'your_background_chat_color',
    backgroundBarColor:'your_background_bar_color',
    messagePlaceholder: 'your_message_place_holder',
    zIndex: your_z_index,
    openFileText: 'your_text_open_file',
    fullscreen: false,
    defaultChatIconResource: 'your_chat-bubble',
    logLevel: WebChat.LogLevel.your_level,
    infoContactTopBarTitle: 'your_title_top_bar_info_contact',
    welcomeLabel:
        {
            title: 'your_title_welcome_label',
            body: 'your_body_welcome_label',
            icon: 'icon_welcome_label',
            backgrounColor: 'your_color_welcome_label',
            textColor: 'your_text_color_welcome_label',
            closeIcon: 'your_close_icon_welcome_label',
            closeIconBackGroundColor: 'your_backgrounColor_close_icon_welcome_label',
            delay: 'your_delay_to_show_welcome_label'
        },
    chatAutoOpenTime: your_chat_auto_open_time_in_seconds
    })">
</script>


  • channelKey es una cadena alfanumérica que identifica tu proyecto de indigitall.

Los siguiente campos son personalizados. Si no se agregan, el Chat mostrará los valores por defecto.

  • externalCode es una cadena que identifique cada dispositivo.

  • titleChat es una cadena con el título que quieres que se muestre en el chat.

  • botName es una cadena con el nombre del bot que se mostrará encima de la burbuja del lado izquierdo.

  • defaultUsername es una cadena con el nombre por defecto que tendrá el usuario y se mostrará encima de la burbuja del usuario.

  • messagePlaceholder es una cadena con el mensaje que se muestra en el campo de texto donde hay que escribir.

  • primaryColor es una cadena con el color principal del chat, botones e icono flotante en hexadecimal u objeto color.

  • backgroundBarColor es una cadena con el color de fondo de la barra superior y de la inferior en hexadecimal.

  • backgroundChatColor es una cadena con el color de fondo del chat en hexadecimal u objeto color.

  • zIndex indicador numérico para posicionar el chat en el eje z.

  • fullscreen es un booleano donde indicas si quieres que el chat ocupe toda la pantalla(true) o tenga cierto margen del dispositivo(false)

  • openFileText es una cadena con el texto que se mostrará en el caso se haya que descargar un archivo.

  • logLevel indica el log que se puede mostrar

  • infoContactTopBarTitle título de la vista de contacto

  • welcomeLabel muestra un mensaje de bienvenida con los campos en formato JSON como en el ejemplo.

  • chatAutoOpenTime es un entero que indica los segundos para que se abra automáticamente el chat. Si no se indica chatAutoOpenTime, como si pulsas la burbuja antes de que finalice el tiempo indiciado, el chat se podrá abrir de forma manual.

  • descargar .zip y extraer el archivo para subirlo a la carpeta principal de tu web.

Funcionalidades

Puede verificar si el evento de bienvenida se ha activado con este método:


let isEmitted = indigitallChat.isWelcomeEmitted();


Si desea enviar un mensaje personalizado, puede utilizar este método:


indigitallChat.setCustomEvent("Your_event");


También puedes controlar la acción de eliminar mensajes con este método:


indigitallChat.clearAllMessages()


¿Cómo subir archivos a tu servidor o acceder a ellos?

Puedes hacerlo mediante FTP o desde el panel de control de tu servidor (cPanel, directAdmin, etc) entre otras formas. Más abajo encontrarás un video explicativo del proceso. En menos de 10 minutos, deberías tenerlo.

Puedes pedir ayuda a tu proveedor de hosting o a tu programador de confianza enviando estas instrucciones.

Changelog

[1.5.0] - 03/2022

Añadido

  • Evento de welcome
  • Borrar mensajes

[1.4.2] - 02/2022

Correciones

  • Text color del welcome label

[1.4.1] - 02/2022

Correciones

  • Barra scroll de la lista interactiva
  • Mensaje de usuario que sobrapasa el ancho

[1.4.0] - 01/2022

Añadido

  • Campo Interactivo
  • Opción abrir automáticamente el chat

[1.3.2] - 11/2021

Correciones

  • Corregir texto Welcome

[1.3.1] - 11/2021

Correciones

  • Cerrar welcome label al abrir chat

[1.3.0] - 11/2021

Añadido

  • Opción de mostrar contacto y localización
  • welcome label

[1.2.0] - 06/2021

Correciones

  • Añadido template con botones y descarga pdfs

[1.1.1] - 01/2021

Correciones

  • Independizar css de botones
  • Solucionar problema con librería crypto

[1.1.0] - 01/2021

Añadido

  • Opciones personalizables
  • Test unitarios

[1.0.0] - 2020

Añadido

  • Inicialización


Contáctanos