Aprende a Insertar un Widget de Suscripción con Integración a WhatsApp - Guía Completa

En el mundo digital actual, mantener a tu audiencia conectada es clave para el éxito de cualquier blog. Imagina que tus visitantes no solo se suscriben con su correo electrónico, sino que también reciben actualizaciones directamente en WhatsApp, generando una interacción más inmediata y personal. Si estás buscando cómo implementar un widget de suscripción WhatsApp en Blogger, has llegado al lugar correcto. Esta guía completa te enseñará a insertar un widget innovador que combina suscripciones por email con integración a WhatsApp, todo sin complicaciones técnicas. Prepárate para transformar tu blog en una máquina de engagement.

¿Qué es un Widget de Suscripción con Integración a WhatsApp?

Un widget de suscripción con integración a WhatsApp es una herramienta poderosa que permite a los usuarios de tu blog registrarse fácilmente para recibir novedades. Al ingresar su correo electrónico y hacer clic en "Suscribirse", se activa una ventana emergente con un mensaje de confirmación y se abre una nueva pestaña dirigiendo a WhatsApp. Allí, el administrador recibe los detalles del usuario, incluyendo el email, para agregarlo a grupos o listas de difusión donde se envían actualizaciones en tiempo real.

Este widget no solo fomenta las suscripciones, sino que también incluye iconos de redes sociales para que agregues tus perfiles en Facebook, Instagram, TikTok, YouTube y WhatsApp. Todo se integra en un solo gadget de HTML/JavaScript en Blogger, lo que lo hace ideal para bloggers que buscan generar más audiencia con un widget de suscripciones por WhatsApp innovador y estable, sin dependencias externas.

Beneficios Clave de Este Widget

• Aumento de Engagement: Al conectar directamente con WhatsApp, tus suscriptores reciben notificaciones instantáneas, lo que mejora la retención y el tráfico recurrente a tu blog.
• Diseño Responsivo: Se adapta perfectamente a móviles, tablets y escritorios, asegurando una experiencia óptima para todos los usuarios.
• Fácil Personalización: Solo necesitas editar el código para agregar tu número de WhatsApp y las URLs de tus perfiles sociales.
• Estabilidad Garantizada: Sin librerías externas, este widget de suscripción WhatsApp para Blogger es moderno, rápido y confiable.

Si te preguntas cómo insertar un widget de suscripción con integración a WhatsApp, verás que es más simple de lo que imaginas, y los resultados en términos de crecimiento de audiencia son impresionantes.

Nota Importante

Este tutorial funciona correctamente, no tendrá ningún inconveniente al momento de su instalación.

Garantizado y completamente funcional

A continuación puede ver su demostración en el siguiente blog

Demo Ver

Antes de Empezar: ¡Haz una Copia de Seguridad!

⚠️ Importante: Antes de realizar cualquier cambio en el código de tu plantilla, SIEMPRE haz una copia de seguridad. Es tu red de seguridad por si algo sale mal.

1. Ve a Tema en el menú de tu panel de Blogger.
2. Haz clic en Crear copia de seguridad (ubicado en la esquina superior derecha).
3. Guarda el archivo .xml en tu computadora.

Ayudadeblogger.com no se responsabiliza, si usted no realizo correctamente la inserción del código, para más detalles específicos, puede visitar el siguiente enlace:

Políticas de uso

Pasos para Insertar el Widget en Tu Blog de Blogger

Instalar este widget es un proceso directo que no requiere conocimientos avanzados de programación. Sigue esta guía paso a paso para integrar suscripción WhatsApp en tu sitio web y empezar a captar más leads.

Paso 1: Accede a Tu Panel de Blogger

Inicia sesión en tu cuenta de Blogger y selecciona el blog donde deseas agregar el widget. Ve a la sección "Diseño" (Layout) en el menú lateral. Aquí es donde agregarás un nuevo gadget.

Paso 2: Agrega un Gadget de HTML/JavaScript

En la barra lateral o en la sección donde quieras ubicar el widget (por ejemplo, en el sidebar o footer), haz clic en "Añadir un gadget". Elige la opción "HTML/JavaScript" de la lista de gadgets disponibles. Esto te permitirá pegar el código completo sin problemas.

Paso 3: Copia y Pega el Código del Widget

Copia el siguiente código completo y pégalo en el campo de contenido del gadget. Asegúrate de no modificar nada aún; lo personalizaremos en el siguiente paso.

<!-- INICIO: Widget de Newsletter y Redes Sociales para Blogger -->
<div class="b-wg-newsletter-container">
    <h3>Mantente Informado</h3>
    <p class="b-wg-newsletter-text">
        Suscríbete a nuestro newsletter y recibe ofertas exclusivas.
    </p>
    <form class='b-wg-newsletter-form'>
        <input class='b-wg-newsletter-input' placeholder='Tu correo electrónico' required='required' type='email'/>
        <button class='b-wg-newsletter-btn' type='submit'>
            <i class='fas fa-paper-plane'></i>
            Suscribirse
        </button>
    </form>
    
    <div class="b-wg-social-section">
        <h4 class="b-wg-social-title">Síguenos en Redes</h4>
        <div class="b-wg-social-links">
            <a href="#" class="b-wg-social-link facebook">
                <i class="fab fa-facebook-f"></i>
            </a>
            <a href="#" class="b-wg-social-link instagram">
                <i class="fab fa-instagram"></i>
            </a>
            <a href="#" class="b-wg-social-link tiktok">
                <i class="fab fa-tiktok"></i>
            </a>
            <a href="#" class="b-wg-social-link youtube">
                <i class="fab fa-youtube"></i>
            </a>
            <a href="#" class="b-wg-social-link whatsapp">
                <i class="fab fa-whatsapp"></i>
            </a>
        </div>
    </div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<style>
/* Estilos encapsulados para el Widget de Newsletter de Blogger */
.b-wg-newsletter-container {
    /* --- FONDO Y VARIABLES DEL GADGET --- */
    --primary: #2E8B57;
    --primary-dark: #1F6B41;
    --secondary: #FF6B35;
    --transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2d2d2d 100%);
    padding: 30px 25px;
    border-radius: 16px;
    color: #FFFFFF;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

.b-wg-newsletter-container h3 {
    margin-bottom: 20px;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
}

.b-wg-newsletter-text {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 25px;
    line-height: 1.6;
    text-align: center;
    font-size: 0.95rem;
}

.b-wg-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.b-wg-newsletter-input {
    padding: 15px 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1rem;
    transition: var(--transition);
    backdrop-filter: blur(10px);
   border-color: var(--primary) !important;
}

.b-wg-newsletter-input:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.15);
}

.b-wg-newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.b-wg-newsletter-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 15px 25px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1rem;
}

.b-wg-newsletter-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(46, 139, 87, 0.3);
}

.b-wg-social-section {
    margin-top: 35px;
    text-align: center;
}

.b-wg-social-title {
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.9);
}

.b-wg-social-links {
    display: flex;
    gap: 12px;
    justify-content: center; /* Centra los iconos */
}

.b-wg-social-link {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: var(--transition);
    border: 2px solid transparent;
    font-size: 1.1rem;
}

.b-wg-social-link:hover {
    transform: translateY(-3px) scale(1.1);
}

.b-wg-social-link.facebook:hover { background: #1877F2; }
.b-wg-social-link.instagram:hover { background: linear-gradient(45deg, #405DE6, #833AB4, #E1306C, #FD1D1D); }
.b-wg-social-link.tiktok:hover { background: #000000; box-shadow: 0 0 10px #ff0050, 0 0 10px #00f2ea; }
.b-wg-social-link.youtube:hover { background: #FF0000; }
.b-wg-social-link.whatsapp:hover { background: #25D366; }

/* Animaciones (si se usa) */
.b-wg-newsletter-container.b-wg-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.b-wg-newsletter-container.b-wg-animate {
    opacity: 1;
    transform: translateY(0);
}

@keyframes wg-slideIn {
    from { opacity: 0; transform: translate(-50%, -60%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* Responsive */
@media (max-width: 480px) {
    .b-wg-newsletter-container {
        padding: 25px 20px;
    }
    .b-wg-newsletter-container h3 {
        font-size: 1.3rem;
    }
    .b-wg-newsletter-text {
        font-size: 0.9rem;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Busca el widget específico para evitar conflictos
    const newsletterWidget = document.querySelector('.b-wg-newsletter-container');
    
    // Si el widget no existe en la página, no ejecuta nada.
    if (!newsletterWidget) return;

    const newsletterForm = newsletterWidget.querySelector('.b-wg-newsletter-form');

    if (newsletterForm) {
        newsletterForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const emailInput = this.querySelector('.b-wg-newsletter-input');
            const email = emailInput.value.trim();
            
            if (emailInput.checkValidity() &amp;&amp; email) {
                // CAMBIAR POR TU NÚMERO DE WHATSAPP
                const phoneNumber = "593982866541";
                const currentPageURL = window.location.href;
                
                const message = `Hola! Quiero suscribirme al newsletter.\n\n` +
                               `📧 Mi correo electrónico:: ${email}\n` +
                               `🔗 Visto en: ${currentPageURL}\n\n` +
                               `Por favor, agréguenme a su lista de newsletter de WhastApp.`;
                
                const encodedMessage = encodeURIComponent(message);
                const whatsappURL = `https://wa.me/${phoneNumber}?text=${encodedMessage}`;
                
                window.open(whatsappURL, '_blank', 'width=600,height=700');
                showNewsletterConfirmation(email, newsletterWidget);
                this.reset();
                emailInput.style.borderColor = 'rgba(255, 255, 255, 0.2)';
                emailInput.style.background = 'rgba(255, 255, 255, 0.1)';
            }
        });

        const emailInput = newsletterForm.querySelector('.b-wg-newsletter-input');
        emailInput.addEventListener('input', function() {
            if (this.validity.valid) {
                this.style.borderColor = getComputedStyle(newsletterWidget).getPropertyValue('--primary').trim();
                this.style.background = 'rgba(46, 139, 87, 0.1)';
            } else {
                this.style.borderColor = 'rgba(255, 255, 255, 0.2)';
                this.style.background = 'rgba(255, 255, 255, 0.1)';
            }
        });
    }

    function showNewsletterConfirmation(email, widget) {
        // Obtiene el color primario desde las variables del widget para usarlo en el popup
        const primaryColor = getComputedStyle(widget).getPropertyValue('--primary').trim() || '#2E8B57';
        
        const confirmation = document.createElement('div');
        confirmation.style.cssText = `
            position: fixed; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            background: ${primaryColor};
            color: white; padding: 20px 30px; border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            z-index: 10001; text-align: center;
            animation: wg-slideIn 0.3s ease;
            max-width: 90%;
        `;
        confirmation.innerHTML = `
            <i class="fas fa-check-circle" style="font-size: 2rem; margin-bottom: 10px; display: block;"></i>
            <h4 style="margin: 0 0 10px 0; font-size: 1.2rem;">¡Solicitud Enviada!</h4>
            <p style="margin:0; font-size: 0.9rem; opacity: 0.9;">Recibimos tu solicitud para:<br><strong>${email}</strong></p>
            <p style="margin:10px 0 0 0; font-size: 0.8rem; opacity: 0.8;">Serás redirigido a WhatsApp.</p>
        `;
        document.body.appendChild(confirmation);
        
        setTimeout(() => { confirmation.remove(); }, 4000);
    }

    // Animación de entrada (opcional, si se añade la clase b-wg-fade-in)
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('b-wg-animate');
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1 });
    
    // Si quieres la animación de entrada, añade la clase 'b-wg-fade-in' al div principal.
    if (newsletterWidget.classList.contains('b-wg-fade-in')) {
        observer.observe(newsletterWidget);
    }
});
</script>
<!-- FIN: Widget de Newsletter y Redes Sociales para Blogger -->

Guarda el gadget y actualiza tu blog para ver el widget en acción.

Configuración Personalizada del Widget

Una vez insertado, personaliza el widget para que se adapte a tu marca. En el código JavaScript, busca la línea:

const phoneNumber = "593977777777";

Reemplázala con tu número de WhatsApp real (incluyendo el código de país, sin espacios ni guiones). Por ejemplo, para un número ecuatoriano: "593987654321".

Añade Tus Perfiles Sociales

En la sección HTML, reemplaza los "#" en los enlaces con las URLs de tus perfiles:

• Facebook: href="https://www.facebook.com/tuperfil"
• Instagram: href="https://www.instagram.com/tuperfil"
• TikTok: href="https://www.tiktok.com/@tuperfil"
• YouTube: href="https://www.youtube.com/channel/tucanal"
• WhatsApp: href="https://wa.me/tunumero" (opcional para contacto directo)

Funcionalidades Avanzadas

El widget incluye validación de email, una confirmación visual animada y efectos hover en los iconos sociales. El mensaje que recibirás en WhatsApp será algo como:

¡Hola! Quiero recibir las ofertas exclusivas directamente en mi correo electrónico.

📧 Mi correo electrónico: usuario@ejemplo.com

🔗 Visto en: https://tudominio.com

Por favor, agréguenme a su lista de newsletter de WhatsApp.

Esto te permite agregar al usuario manualmente a grupos o listas, maximizando el impacto de tu estrategia de contenido.

Por Qué Este Widget Revolucionará Tu Blog

Implementar un widget de suscripción con integración a WhatsApp no es solo una actualización técnica; es una forma de conectar emocionalmente con tu audiencia. En un era donde las notificaciones push y los emails se pierden en el spam, WhatsApp ofrece inmediatez y confianza. Con esta guía para insertar widget suscripción WhatsApp en Blogger, estás a un paso de aumentar tu tráfico, fidelizar lectores y convertir visitantes en seguidores leales.

¿Listo para probarlo? Instálalo hoy y observa cómo crece tu comunidad. Si tienes dudas, deja un comentario abajo. ¡Tu blog merece lo mejor!

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Widgets para BloggerWidgets Suscripciones

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.