Uso de un enlace de texto o un botón
Como alternativa al uso del chatbox integrado o en línea estándar, puedes llamar a una ventana de chat desde cualquier texto o botón de tu sitio web.
Puedes hacer esto en cuatro pasos:
1. Agrega el código del widget a tu sitio justo antes de la etiqueta de cierre </body>.
2. Agrega texto personalizado o una imagen a tu servidor con el evento de clic.
3. Modifica el comportamiento del widget, de modo que "Oculte el widget al cargar" (opcional).
4. Muestra una imagen o texto personalizado según tu estado (opcional).
Sigue estas instrucciones paso a paso:
Paso 1: Copia el código del Widget
NOTA: Si ya instalaste el complemento y el widget tawk.to en tu sitio, puedes omitir este paso y comenzar con el Paso 2.
1. Inicia sesión en el Tablero de control.
2. Dirígete a la sección Administración en la parte inferior de la barra lateral izquierda.
3. Elige el sitio en el menú Propiedades (si tienes más de un sitio).
4. Selecciona la opción Widget de Chat en el menú.
5. Coloca el cursor en la sección Código de Widget. Selecciona la opción Copiar al Portapapeles para copiar el código.
5. Pega el código del widget en el HTML de tu sitio web justo antes de </body>
6. Actualiza tu sitio web para asegurarte de ver el widget.
Paso 2: Crea un botón o texto en tu sitio
Crea un botón o texto y agrega antes el siguiente código:
Para un enlace de texto, usa:
<a href="javascript:void(Tawk_API.toggle())"> Click to Chat </a>
Para un enlace de imagen, usa:
<a href="javascript:void(Tawk_API.toggle())"> <img src="/path/to/img"> </a>
Paso 3: Ocultar el widget al cargar y salir
1. Inicia sesión en el Tablero de control.
2. Ve a la sección Administración en la parte inferior de la barra lateral izquierda.
3. Selecciona Propiedad en el menú desplegable (si tienes más de un sitio).
4. Haz clic en la opción Widget de Chat.
5. Busca el Comportamiento del Widget - Configuración de Visibilidad.
6. Activa Ocultar Widget al Cargar para ocultar el widget antes de hacer clic en él.
Paso 4: Muestra una imagen o texto personalizado según tu estado
Si seguiste los pasos del 1 al 3, ahora deberías tener una imagen o texto que salga del chat cuando se haga clic en él dentro de tu sitio.
Una opción avanzada es mostrar diferentes imágenes según el estado de tu widget. Por ejemplo, muestra una imagen cuando tu widget esté en línea y otra cuando tu widget esté fuera de línea.
1. Agrega el código div a continuación en el HTML de tu sitio web en la posición donde te gustaría que se muestre el botón o el texto. No es necesario que agregues nada dentro del div, simplemente cópialo y pégalo exactamente como está.
<div id="status"></div>
2. Agrega y modifica este código con tus imágenes y textos personalizados y colócalo justo antes de la etiqueta </body>.
Haz clic aquí para ver un ejemplo funcional de código de estado basado en texto.
<!--Start of tawk.to Status Code-->
<script type="text/javascript">
Tawk_API = Tawk_API || {};
Tawk_API.onStatusChange = function (status){
if(status === 'online')
{
document.getElementById('status').innerHTML = '<a href="javascript:void(Tawk_API.toggle())">Online - Click to chat</a>';
}
else if(status === 'away')
{
document.getElementById('status').innerHTML = 'We are currently away';
}
else if(status === 'offline')
{
document.getElementById('status').innerHTML = 'Live chat is Offline';
}
};
</script>
<!--End of tawk.to Status Code -->