🎟️ Workshop => Plugins => WordPress => Web builders => Chat => Mensaje iniciado por: MCE. Mauricio Eberle Morales en Oct 16, 2024 Return to Full Version

Título: Agregar un botón de WhatsApp en tu sitio web
Publicado por: MCE. Mauricio Eberle Morales en Oct 16, 2024
1. Descripción del plugin
Este plugin permite a los visitantes de tu página web contactarte a través de WhatsApp o WhatsApp Business con un solo clic. Puedes personalizar el estilo del botón, agregar imágenes o GIFs, e incluso convertir cualquier elemento de tu página en un elemento de chat de WhatsApp.

2. Requisitos previos
- Tener un número de WhatsApp o WhatsApp Business activo.
- Acceso a tu página web para añadir código o configurar el plugin.

3. Agregar el número de WhatsApp
Para permitir que los visitantes te contacten:
1. Agrega tu número de WhatsApp o WhatsApp Business en la configuración del plugin.
2. Define el mensaje predefinido que deseas que el usuario vea cuando abra el chat.

4. Compatibilidad en dispositivos
- Móvil: Al hacer clic, el usuario será dirigido automáticamente a la aplicación móvil de WhatsApp.
- Escritorio: El clic los redirigirá a la aplicación de escritorio de WhatsApp o a la versión web (web.whatsapp.com).

5. Estilos personalizados
Puedes elegir entre varios estilos predefinidos para el botón o personalizarlo por completo:

Opciones de estilo:
- 8 estilos/diseños predefinidos personalizables.
- Opción para agregar tu propia imagen o GIF.
- Convertir cualquier elemento de tu página (como menús, imágenes, botones, enlaces) en un elemento de chat de WhatsApp añadiendo la clase `ctc_chat`.

6. Cómo agregar tu propia imagen
Si prefieres usar una imagen personalizada en lugar de uno de los estilos predeterminados, puedes cargar cualquier imagen o GIF en la configuración del plugin.

7. Elementos personalizados
Puedes convertir cualquier elemento de tu página en un botón de chat de WhatsApp. Solo sigue estos pasos:

1. Clase/ID del elemento: Asigna la clase `ctc_chat` al elemento que deseas convertir (puede ser un botón, imagen o enlace).
   
   Ejemplo: 
   ```html
   <button class="ctc_chat">Contáctanos por WhatsApp</button>
   ```

2. Enlace (Href): Si prefieres usar un enlace, solo debes utilizar `ctc_chat` como valor de `href`.
   
   Ejemplo: 
   ```html
   <a href="ctc_chat">WhatsApp Chat</a>
   ```

Cuando los usuarios hagan clic en estos elementos, se les redirigirá a WhatsApp, siguiendo las configuraciones que hayas definido (número de WhatsApp, mensaje predefinido, etc.).

8. Diálogo de bienvenida (Greeting Dialog)
Puedes activar un mensaje de bienvenida que aparecerá antes de que el usuario inicie el chat.

- Personaliza el texto, las imágenes o GIFs, e incluso emojis.
- El editor de texto enriquecido te permite ajustar la fuente, el tamaño, el color del texto y más.
- Existen dos diseños predefinidos para los diálogos de bienvenida: Greeting-1 (Diseño personalizable) y Greeting-2 (Diseño específico de contenido).

9. Formulario previo al chat
Para obtener información adicional antes de iniciar el chat, puedes habilitar un formulario que recopile datos del usuario (como nombre y correo electrónico).

- Las respuestas del formulario se pueden enviar por correo electrónico o integrar con otras aplicaciones mediante webhooks.
- Los datos del formulario también se pueden rellenar automáticamente en el chat de WhatsApp.

10. Personalización adicional
- Shortcodes: Usa shortcodes para insertar botones de WhatsApp dentro del contenido de tu página, adaptando su estilo y ubicación tanto en móvil como en escritorio.