Cómo Integrar Elementor Pro con GoHighLevel usando Webhooks y PHP

En este artículo, aprenderás cómo integrar un formulario de Elementor Pro con GoHighLevel (GHL) usando un webhook y un script PHP. Esto permitirá que los datos del formulario (nombre y correo electrónico) se envíen directamente a tu cuenta de GHL cuando un usuario complete el formulario.

Requisitos

1. Cuenta de GoHighLevel (GHL): Debes tener una cuenta activa en GoHighLevel.
2. Sitio Web en WordPress: Tu sitio web debe estar construido con WordPress y tener Elementor Pro instalado.
3. Acceso a cPanel o al Administrador de Archivos de tu Hosting: Necesitarás acceso para subir y editar archivos PHP en tu servidor.

Paso 1: Obtener la API Key y Location ID de GoHighLevel

Para enviar datos a GHL, necesitarás una API Key y la location id (ID de ubicación). Sigue estos pasos para obtenerlas:

1. Inicia sesión en tu cuenta de GoHighLevel.
2. Navega a la sección de Configuración (Settings).
3. Busca la opción de perfil del negocio.
4. Al principio encontrarás la location ID y un poco más abajo la API Key
5. Sino tienes creada una API Key, genera una nueva y copia el valor.

Paso 2: Crear el Script PHP

Vamos a crear un archivo PHP que procesará los datos del formulario y los enviará a GHL. Este archivo se llamará request-newsletter.php.

Código PHP

Crea un archivo llamado request-newsletter.php y pega el siguiente código:

<?php
// Recibir los datos del webhook de Elementor Pro
$input = file_get_contents('php://input');

// Registrar el contenido bruto recibido
file_put_contents('response_log.txt', "Raw input: " . $input . "\n", FILE_APPEND);

// Decodificar los datos recibidos en formato application/x-www-form-urlencoded
parse_str($input, $data);

// Verificar que los datos se recibieron correctamente
if (empty($data)) {
    error_log("No data received");
    file_put_contents('response_log.txt', "No data received\n", FILE_APPEND);
    exit;
} else {
    file_put_contents('response_log.txt', "Data received: " . json_encode($data) . "\n", FILE_APPEND);
}

// Extraer el campo de email
$email = $data['fields']['email']['value'] ?? null;

// Verificar que el campo de email existe
if (!$email) {
    error_log("Email field missing");
    file_put_contents('response_log.txt', "Email field missing\n", FILE_APPEND);
    exit;
}

// Datos necesarios para la petici車n a la API de GHL
$payload = json_encode([
    'email' => $email,
    'source' => 'public api',
    'locationId' => 'AQUI VA TU LOCATION ID',
    'tags' => ['website']
]);

// Configura la petici車n cURL
$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => 'https://rest.gohighlevel.com/v1/contacts/',
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => '',
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 0,
  CURLOPT_FOLLOWLOCATION => true,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => 'POST',
  CURLOPT_POSTFIELDS => $payload,
  CURLOPT_HTTPHEADER => array(
    'Content-Type: application/json',
    'Authorization: Bearer AQUÍ VA TU API KEY'
  ),
));

$response = curl_exec($curl);

$httpCode = curl_getinfo($curl, CURLINFO_HTTP_CODE);
$curlError = curl_error($curl);

curl_close($curl);

file_put_contents('response_log.txt', "HTTP Code: " . $httpCode . "\nResponse: " . $response . "\nCurl Error: " . $curlError . "\n", FILE_APPEND);

echo $response;
?>
Code language: HTML, XML (xml)

Notas Importantes:

• Reemplaza AQUI VA TU LOCATION ID y AQUI VA TU API KEY con los datos obtenidos GHL.
• El script guarda la respuesta en un archivo llamado response_log.txt para que puedas revisar cualquier error o éxito en la operación, este achivo se generará en la misma ubicación donde vas a guardar tu archivo request-newsletter.php

Subir el Archivo PHP al Servidor

1. Accede a tu cPanel o al administrador de archivos de tu hosting.
2. Navega a la carpeta de tu theme, si usas un theme hijo, mucho mejor ya que con alguna actualización que generes, podrías perder el archivo request-newsletter.php, la ubicación generalmente de tu theme es wp-content/themes/nombre-de-tu-theme/).
3. Sube el archivo request-newsletter.php a esta ubicación.

Paso 3: Crear el Formulario en Elementor Pro

1. Abre Elementor Pro: Inicia sesión en tu sitio de WordPress y abre el editor de Elementor Pro.
2. Añadir un Formulario: Arrastra y suelta un widget de formulario en tu página.
3. Configura los Campos del Formulario: Añade campos para el nombre y el correo electrónico, y asegúrate de que los IDs de los campos coincidan con los nombres que usaste en el script PHP (Nombre para el nombre y Ingresa_tu_correo para el email). Si usas un nombre de campos diferente, asegurate de cambiarlos en el código, solo busca los mismos que te indico acá en tu código y los reemplazas.

Configuración del Webhook

1. Añadir Acción Después de Enviar: En el panel de edición del formulario, en la sección de “Actions After Submit”, añade “Webhook”.
2. Configurar el Webhook:
   • URL: https://tu_dominio.com/wp-content/themes/nombre-de-tu-theme/request-newsletter.php (reemplaza tu_dominio.com con tu dominio real y nombre-de-tu-theme con el nombre de tu theme).

Paso 4: Probar el Formulario

1. Rellena y Envía el Formulario: Ve a tu página de formulario y envía una prueba.
2. Verifica el Registro: Revisa el archivo response_log.txt en tu servidor para ver los resultados. Este archivo te ayudará a depurar cualquier problema.

Paso 5: Revisión y Depuración

Si encuentras problemas, revisa los siguientes puntos:

• Asegúrate de que los nombres de los campos en el formulario coincidan con los que espera el script PHP.
• Verifica que la URL del webhook esté correcta.
• Revisa el archivo response_log.txt para cualquier mensaje de error.

Siguiendo estos pasos, habrás configurado con éxito un formulario de Elementor Pro que envía datos directamente a GoHighLevel mediante un webhook y un script PHP. Este método te permite automatizar la captura de leads y mejorar la eficiencia de tu flujo de trabajo.

Si tienes alguna pregunta o necesitas más ayuda, no dudes en contactarme.