WP Manifestindependent plugin directory
manifest / social / direct-chat-lead-popup

Direct Chat Lead Popup

Agrega un botón flotante personalizable que abre un formulario obligatorio y prepara una conversación mediante mensajería instantánea.

by Jhorman Nieto P · github.com/jhorman9/direct-chat-lead-popup

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/jhorman9/direct-chat-lead-popup/archive/refs/heads/main.zip
Readme github.com/jhorman9/direct-chat-lead-popup ↗

Direct Chat Lead Popup para WordPress

Plugin ligero para WordPress desarrollado por Jhorman Nieto P. Agrega un botón flotante de contacto con un popup personalizable. El visitante completa un formulario antes de iniciar una conversación mediante mensajería instantánea.

Sitio web del desarrollador: https://jhorman.com

Características

  • Botón flotante con ícono, título y subtítulo editables.
  • Popup responsive para dispositivos móviles y computadoras.
  • Posición configurable: izquierda o derecha.
  • Campos obligatorios: nombre, apellido, correo electrónico y asunto.
  • Validación básica del correo electrónico.
  • Textos editables desde el panel administrativo.
  • Colores configurables para el botón flotante, header, body y botón de envío.
  • Valores predeterminados listos para utilizar.
  • Ícono SVG integrado.
  • Sin dependencias externas.
  • Sin Font Awesome.
  • Sin jQuery.
  • Navegación mediante teclado.
  • Cierre con la tecla Escape o al hacer clic fuera del popup.
  • Sanitización de configuraciones antes de guardarlas.
  • Los datos del formulario no se almacenan en la base de datos.

Instalación

  1. Descarga el archivo ZIP del plugin.
  2. Ingresa al panel administrativo de WordPress.
  3. Ve a:
Plugins → Añadir plugin → Subir plugin
  1. Selecciona el archivo ZIP.
  2. Instala y activa el plugin.
  3. Ingresa a:
Ajustes → Direct Chat Popup
  1. Configura el número receptor, los textos y los colores.

Configuración del número receptor

Escribe el número con código de país, sin utilizar el símbolo +, espacios, guiones ni paréntesis.

Ejemplo válido para Panamá:

50760000000

Ejemplo incorrecto:

+507 6000-0000

Opciones disponibles

Configuración general

Opción Descripción
Número de destino Número que recibirá el mensaje
Posición del chat Permite elegir entre izquierda o derecha

Textos editables

Opción Ejemplo
Título del botón flotante Atención al cliente
Subtítulo del botón flotante Escríbenos ahora
Título del popup ¿Cómo podemos ayudarte?
Descripción del popup Completa todos los campos para iniciar la conversación.
Texto del botón de envío Enviar mensaje
Mensaje inicial Hola, deseo recibir más información.
Etiqueta accesible Abrir formulario de contacto

Colores configurables

Elemento Valor predeterminado
Fondo del botón flotante #25d366
Texto e ícono del botón flotante #ffffff
Inicio del degradado del header #075e54
Final del degradado del header #128c7e
Texto del header #ffffff
Fondo del body del popup #ffffff
Texto del body del popup #172033
Fondo del botón de envío #25d366
Texto e ícono del botón de envío #ffffff

Estructura del plugin

direct-chat-lead-popup/
├── direct-chat-lead-popup.php
├── readme.txt
├── README.md
└── assets/
    ├── css/
    │   └── direct-chat-lead-popup.css
    └── js/
        └── direct-chat-lead-popup.js

Flujo de funcionamiento

Usuario presiona el botón flotante
        ↓
Se abre el popup
        ↓
Usuario completa todos los campos
        ↓
JavaScript valida los datos
        ↓
Se construye el mensaje
        ↓
Se abre la conversación en una nueva pestaña

Arquitectura

El plugin separa responsabilidades para facilitar el mantenimiento:

PHP

  • Registra la página de ajustes.
  • Registra y sanitiza las configuraciones.
  • Carga los archivos CSS y JavaScript.
  • Renderiza el HTML del botón y del popup.

CSS

  • Controla el diseño del botón flotante.
  • Administra las posiciones izquierda y derecha.
  • Aplica colores configurables mediante variables CSS.
  • Gestiona el diseño responsive.

JavaScript

  • Abre y cierra el popup.
  • Valida el formulario.
  • Construye el mensaje.
  • Abre la conversación en una nueva pestaña.
  • Mejora la accesibilidad mediante control del foco.

Rendimiento

El plugin evita dependencias innecesarias. No utiliza frameworks de JavaScript, fuentes externas, Font Awesome ni jQuery. El ícono se integra como SVG para mantener buena calidad visual con un peso reducido.

Seguridad

Las configuraciones se sanitizan antes de almacenarse. El formulario aplica validación para campos obligatorios y formato de correo electrónico. Los datos completados por el visitante no se guardan en la base de datos de WordPress.

Desarrollador

Jhorman Nieto P
Sitio web: https://jhorman.com

Licencia

GPL-2.0-or-later