# ✔️ Widget de chat online El widget de chat web permite que los visitantes del sitio web se comuniquen con usted a través del chat en vivo a través de otros [canales de mensajería](broken://pages/-MT1OdJe8oSlDIQ21-vC) que haya conectado. ![](/files/-MThVS5QByae4YxbmWss) ## Conexión del widget de chat web **Paso 1: Navegue a la configuración del canal** \ Desde el módulo de **configuración** , navegue hasta la opción del menú, **Canales** **Paso 2: Agregar canal** \ Presione **Agregar canal** y elija **Web Chat.** Se abrirá el cuadro de diálogo **Widget de conexión de chat web.** ![](/files/-MThVjqXySWQBMVJPy8y) ![](/files/-MThVu0Nt0tdSzmbfgsY) **Paso 3: Especifique el sitio web** \ Complete los sitios web donde se agregará el widget. **Paso 4: Seleccione un color de tema** \ Con el selector de color interactivo, seleccione un color de tema para el widget de chat. {% hint style="info" %} **Consejos** : ¡Elija un color que coincida con el color de su marca y su sitio web! {% endhint %} **Paso 5: seleccione un ícono de pantalla para el widget** \ Elija un ícono que le gustaría mostrar en el sitio web para el widget. {% hint style="info" %} El widget se puede personalizar aún más una vez conectado. {% endhint %} **Paso 6: Siga los pasos en la plataforma** \ Una vez que haya especificado lo necesario, presione **SIGUIENTE** para continuar. **Paso 7. Instale el script** \ Puede agregar el script generado a su sitio web preferido. Alternativamente, puede enviar las instrucciones de instalación a otra persona por correo electrónico. ![](/files/-MThVwZAw7QJu0_pOj-W) ## Instalación del widget de chat {% hint style="warning" %} Es posible que necesite un webmaster o un administrador técnico para que lo ayude a instalar el widget de chat en el sitio web. ¡Busque ayuda si es necesario! {% endhint %} Dependiendo del sistema que utilice para crear y administrar su sitio web, hemos creado guías paso a paso para guiarlo a través de la instalación de un Chat Widget en su sitio web. {% content-ref url="/pages/-MT1ZFh2ZnhX0hCHdXvJ" %} [Instalar en WordPress](/canales-de-mensajeria/widget-de-chat-online/instalar-en-wordpress.md) {% endcontent-ref %} {% content-ref url="/pages/-MT1ZU87\_A9bVIwaBRTK" %} [Instalar en Shopify](/canales-de-mensajeria/widget-de-chat-online/instalar-en-shopify.md) {% endcontent-ref %} {% content-ref url="/pages/-MT1Zg3a4SfrBgMqcL8b" %} [Instalar en Wix](/canales-de-mensajeria/widget-de-chat-online/instalar-en-wix.md) {% endcontent-ref %} {% content-ref url="/pages/-MT1Zs45hOCI47xv\_R6b" %} [Instalar en Squarespace](/canales-de-mensajeria/widget-de-chat-online/instalar-en-squarespace.md) {% endcontent-ref %} Para otras plataformas o servicios, navegue hasta la fuente HTML de la página. Pegue el script antes de la etiqueta.`` ``` ... ... ... ``` Si necesita ayuda, puede optar por reenviar el script junto con las instrucciones de instalación al administrador de su sitio web. Seleccione la casilla de verificación correspondiente e ingrese la dirección de correo electrónico de alguien que pueda ayudarlo a instalar el complemento de chat. {% hint style="success" %} El widget de chat web 1980TIC aparecerá en su sitio una vez que la secuencia de comandos se haya instalado correctamente. {% endhint %} ## Personalizar el widget de chat **Paso 1: Navegue a la configuración del canal** \ Desde el módulo de **configuración** , navegue hasta la opción del menú, **Canales** **Paso 2: Ubique el canal de Web Chat** \ Una vez que haya localizado el canal de **Web Chat** , presione **PERSONALIZAR** ![](/files/-MU4ib35qZut3LtiMAKY) **3. Presione** el botón Personalizar para el chat web. ![](/files/-MU4ie3xtQUe_-7iZbp2) {% hint style="info" %} Puede utilizar los campos a continuación para personalizar el Web Widget para su idioma. {% endhint %} ### Apariencia del widget Puede personalizar lo siguiente para cambiar la apariencia del widget en el sitio web. | **Campo** | Descripción | | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | **Color del tema** | El color elegido se utilizará como color principal de su widget | | **Color de texto** | El color elegido se utilizará como color de texto principal de su widget | | **Título** | El título se mostrará en la parte superior de su widget de chat. | | **Lema** | El lema se mostrará debajo del título. | | **Barra de entrada de texto** | Este texto funcionará como un marcador de posición en el área de escritura. | | **Icono de chat web** | El icono de pantalla se muestra en el sitio web para que el usuario interactúe con el chat web. | | **Posición del widget** | El usuario puede elegir especificar una posición para mostrar el widget a la izquierda o a la derecha de la plataforma. | ### **Características adicionales** **Enlaces de canales de widgets** Esta opción permitirá que los contactos se comuniquen con usted a través de su canal preferido siempre que se den las opciones. Puede agregar hasta seis canales y se mostrará en la parte superior del Web Chat Widget. ![](/files/-MU4jL7PfGq1QBV3SV9E) Si el Web Chat Widget nunca se ha configurado antes, los canales conectados con la información adecuada aparecerán de forma predeterminada como Vínculos de canales de Widget Puede agregar los enlaces del canal del widget y especificar la información necesaria para el canal seleccionado. Aquí está la lista de campos de entrada necesarios para cada uno de los enlaces de canal admitidos. | **Enlaces de canal** | **Campo de entrada obligatorio** | | -------------------- | ------------------------------------ | | WhatsApp | Número de teléfono de WhatsApp | | Facebook Messenger | ID de página de Facebook | | Telegram | Nombre del bot de Telegram | | Twitter | ID de Twitter | | LÍNE | ID LINE | | Viber | Nombre de la cuenta pública de Viber | | SMS | Número de teléfono SMS | | Email | Dirección de correo electrónico | | Llamada telefónica | Número de teléfono | #### Logotipo de chat web Suelta la imagen de tu logotipo aquí para que se muestre en la parte superior del chat web. El formato puede estar en PNG, SVG o JPG y el tamaño del archivo no supera los 1,0 MB. **Mostrar mensaje de saludo emergente** Cuando se selecciona esta opción, el widget 1980TIC aparecerá con su mensaje de saludo y las opciones de chat después de 5 segundos de retraso. ![Pop up emergente después de 5 segundos](/files/-MThX4Fk2gVg582caVy1) #### Ocultar la marca 1980TIC Con esta opción, puede eliminar la marca 1980TIC de su widget. {% hint style="warning" %} Esta opción no está disponible en el plan inicial (gratuito). {% endhint %} #### Ocultar widget hasta que se active mediante referencia de ancla Al usar esta opción, el widget estará completamente oculto. Hasta que se haya hecho clic en la Referencia de anclaje. ``` #1980tic_widget ``` Usando el ancla anterior, puede crear un botón en su página para abrir el widget una vez que haga clic. #### Formulario de pre-chat Habilitar esta opción agregará un formulario de pre-chat a su Web Chat. Si está habilitado, el visitante de su sitio web no podrá chatear hasta que complete el formulario que ha configurado. ![Formulario de pre chat](/files/-MThXIAd0wU4vgpP9oZu) Con esta opción habilitada, puede incluir campos personalizados adicionales cuando sea necesario. Además de eso, también puede personalizar la etiqueta de los campos predeterminados sobre cómo se ven a sus contactos. ![](/files/-MThXLC5dxHd-Nsn08XD) Desplácese hacia abajo y se agregará un script a su sitio web. {% hint style="info" %} Cualquier cambio en las personalizaciones del widget de chat web se reflejará automáticamente en su sitio web. No es necesario volver a instalar el script. {% endhint %} ## Configuración de canal {% hint style="info" %} El canal de chat web se puede configurar con un único: \ \- Nombre del Canal \ \- Mensaje de saludo \ \- Dominio (s) del sitio web {% endhint %} **Paso 1: Navegar a la configuración de los canales** \ Desde el módulo de **configuración**, navegar a la opción de menú, **Canales** **Paso 2: Localizar el canal de Web Chat** \ Una vez que haya localizado el canal de **Web Chat**, presione **Configurar** ![](/files/-MU4k1YuyRsEMLDgOsc0) **Paso 3: Realice la configuración necesaria** \ Puede configurar lo siguiente: * Nombre del canal: nombre utilizado internamente para identificar la cuenta. * Mensaje de bienvenida: este mensaje es el primer mensaje que se envía al contacto cuando le envía un mensaje a través de LINE. * Dominios del sitio web: el sitio web del cual se instalará el widget {% hint style="warning" %} **Importante** : si no agrega su sitio web a esta lista, su widget no se cargará. Puede ingresar varias URL si planea instalar el complemento en varios sitios web. {% endhint %} ![](/files/-MU4kTdv5ayc0AiBL7Kj) **Paso 4: Actualice la configuración** \ Presione **Listo** para actualizar la configuración del canal ## Solucionar problemas {% hint style="warning" %} ¿Tienes problemas con el canal? ¡Contáctanos [aquí](https://api.whatsapp.com/send?phone=573336025020\&text=Hola!%20Necesito%20soporte) ! {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.1980tic.us/canales-de-mensajeria/widget-de-chat-online.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.