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.
Captura de pantalla perfil del negocio de gohighlevel
Captura de pantalla perfil del negocio de gohighlevel

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;
?>
Lenguaje del código: 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.

¿Necesitas una página web profesional o soporte técnico especializado?

En Somos Tingtal, nos especializamos en crear sitios web a medida y ofrecer soporte técnico de alta calidad. Nuestro equipo está listo para ayudarte a llevar tu presencia en línea al siguiente nivel. Además, incluimos servicios de SEO para asegurarnos de que tu sitio web tenga la mejor visibilidad posible. Si estás interesado en nuestros servicios, no dudes en ponerte en contacto con nosotros.