Integración de WhatsApp con API para Envío de Mensajes Automáticos en WordPress

Introducción

En esta guía, aprenderás a integrar WhatsApp con nuestra API para que, cuando un usuario envíe un formulario en tu sitio web de WordPress utilizando Contact Form 7, se envíe automáticamente un mensaje a través de WhatsApp. Sigue los pasos a continuación para configurar esta integración.

Requisitos Previos

1. Acceso a la cuenta de desarrollador en [Piyion](https://piyion.com/).
2. API Key proporcionada por Piyion.
3. Identificadores de empresa, fuente y plantilla.
4. Instalación del plugin [Contact Form 7](https://wordpress.org/plugins/contact-form-7/) en tu sitio web de WordPress.

Paso 1: Instalación de Contact Form 7

1. Inicia sesión en tu panel de administración de WordPress.
2. Ve a `Plugins` > `Añadir nuevo`.
3. Busca `Contact Form 7` en el cuadro de búsqueda.
4. Haz clic en `Instalar ahora` y luego en `Activar`.

 Paso 2: Creación del Formulario

1. Ve a `Contact` > `Añadir nuevo` en el menú de WordPress.
2. Crea un nuevo formulario utilizando Contact Form 7. Por ejemplo:

3. Guarda el formulario y copia el shortcode que se genera (algo como `

Error: Formulario de contacto no encontrado.

Paso 3: Creación de la Página para el Formulario

1. Ve a `Páginas` > `Añadir nueva` en el menú de WordPress.
2. Añade un título a tu página, por ejemplo, “Formulario de Contacto”.
3. Pega el shortcode del formulario que copiaste en el paso anterior en el contenido de la página.
4. Publica la página.

Paso 4: Inserción del Código JavaScript en la Página

1. Ve a la página que creaste y haz clic en `Editar` (puedes usar el editor de bloques o el editor clásico).
2. Al final del contenido de la página, añade un bloque de `HTML Personalizado` o un bloque de `Código` y pega el siguiente código:

<script>
    document.addEventListener('wpcf7submit', function(event) {
        var inputs = event.detail.inputs;
        const data = {
            company_id: "TU_COMPANY_ID",
            source: "TU_SOURCE_ID",
            template_id: "TU_TEMPLATE_ID",
            destinations: [inputs.find(input => input.name === 'your-phone').value],
            params: [
                [inputs.find(input => input.name === 'your-name').value]
            ],
            "template_type": "image",
            "media_url": "URL_DE_TU_IMAGEN"
        };
        fetch('https://piyion-bulk-messaging-v1-28n566d3.uc.gateway.dev/send_company_template', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-API-Key': 'TU_API_KEY'
            },
            body: JSON.stringify(data)
        }).then(response => response.json()).then(data => {
            console.log('Success:', data);
            alert('Mensaje enviado exitosamente');
        }).catch((error) => {
            console.error('Error:', error);
            alert('Hubo un error al enviar el mensaje');
        });
    }, false);
</script>

Paso 5: Personalización de la Configuración

– company_id: Reemplaza `”TU_COMPANY_ID”` con el ID de tu empresa.
– source: Reemplaza `”TU_SOURCE_ID”` con el ID de la fuente.
– template_id: Reemplaza `”TU_TEMPLATE_ID”` con el ID de la plantilla que deseas usar.
– media_url: Reemplaza `”URL_DE_TU_IMAGEN”` con la URL de la imagen que deseas enviar.
– X-API-Key: Reemplaza `”TU_API_KEY”` con tu API Key proporcionada por Piyion.

Conclusión

Siguiendo estos pasos, podrás integrar fácilmente WhatsApp con la API de Piyion y enviar mensajes automáticamente cuando se envíe un formulario en tu sitio web de WordPress utilizando Contact Form 7. Si tienes alguna pregunta o necesitas asistencia adicional, no dudes en contactar a nuestro equipo de soporte.