Cuando un nuevo cliente contrata tus servicios, el tiempo que transcurre entre la firma del contrato y la puesta en marcha del sitio de WordPress es importante. MyKinsta facilita la creación y gestión de sitios de WordPress, pero las agencias que gestionan muchos proyectos de clientes suelen buscar formas de automatizar las tareas repetitivas de configuración.
La API de Kinsta te permite automatizar partes de ese proceso. En este tutorial, conectarás un formulario de registro de clientes de HubSpot a la API de Kinsta a través de una aplicación de middleware de Node.js. Cuando un contacto envía el formulario, el middleware recibe los datos, llama a la API de Kinsta y configura automáticamente un sitio de WordPress.
Por qué las agencias deben automatizar el aprovisionamiento de sitios
La configuración manual de un sitio web provoca retrasos justo en el momento de la relación con el cliente en el que más importa el impulso. Las nuevas altas requieren que alguien cree un entorno de alojamiento, configure WordPress, genere las credenciales y se las facilite al cliente.
MyKinsta simplifica estas tareas, pero cuando el proceso depende de que un miembro del equipo esté disponible para completar cada paso, aún pueden producirse retrasos.
Straight out Digital (Sod), una agencia digital que gestiona cientos de sitios web de clientes en Kinsta, utiliza la API de Kinsta para crear herramientas internas personalizadas que convierten el aprovisionamiento y el mantenimiento en flujos de trabajo automatizados. En lugar de repetir los mismos pasos de configuración para cada nuevo sitio web, Sod activa el proceso mediante programación. El resultado, tal y como lo describe el equipo, es que «lo que podría ser una operación que requiere mucho tiempo se ha simplificado».
Conectando HubSpot a la API de Kinsta se consigue un resultado similar. Cuando un cliente envía tu formulario de registro, HubSpot envía un webhook, tu middleware recibe los datos del contacto y la API de Kinsta inicia el proceso de creación del sitio.
De este modo, el traspaso de un cliente potencial a un entorno WordPress aprovisionado se produce automáticamente, reduciendo el trabajo manual que supone la incorporación de nuevos clientes.
Cómo empezar
Para seguir este tutorial, necesitas
- Al menos un sitio existente en tu cuenta de Kinsta. Esto asegura que el acceso a la API está disponible.
- Una cuenta de HubSpot con un formulario configurado para capturar registros de clientes. Ten en cuenta que los flujos de trabajo webhook sólo están disponibles en determinados planes premium de HubSpot.
- Node.js 18 o posterior instalado localmente.
Puedes generar una clave API de Kinsta en el panel de control de MyKinsta. Ve a Configuración de la empresa > Claves API y haz clic en Crear clave API.
Establece una caducidad, dale un nombre a la clave y haz clic en Generar. Como MyKinsta sólo muestra la nueva clave API una vez, guárdala en algún lugar seguro.
También necesitas el ID de tu empresa. Puedes recuperarlo de la URL de MyKinsta mientras estás conectado o haciendo una petición al endpoint /sites una vez que tu clave API esté activa.
Almacena ambos valores en un archivo .env en la raíz de tu proyecto:
KINSTA_API_KEY=your_api_key_here
KINSTA_COMPANY_ID=your_company_id_hereCómo integrar HubSpot con Kinsta utilizando la API de Kinsta
De forma muy similar al uso de la API de Kinsta y Slack, puedes configurar una integración en la que el envío de un formulario de HubSpot active un webhook, una aplicación Node.js reciba los datos de contacto, llame a la API de Kinsta para crear un sitio de WordPress y consulte la API periódicamente hasta que el sitio esté activo.
Esto se construye en cinco pasos: Configuración de HubSpot, configuración del middleware, autenticación de la API, creación del sitio y monitorización de la operación.
1. Configura tu formulario y flujo de trabajo de HubSpot
En tu panel de control de HubSpot, crea o selecciona el formulario que captura las altas de nuevos clientes en Marketing > Formularios.
Como mínimo, el formulario necesita campos para el nombre, la dirección de correo electrónico y el nombre de la empresa. Estos valores se asignan a los parámetros que pasarás más tarde a la API de Kinsta.
Con tu formulario listo, ve a Automatización > Flujos de trabajo en el menú de navegación de HubSpot y haz clic en Crear flujo de trabajo en la esquina superior derecha.
A continuación, selecciona Empezar desde cero. Se abrirá el editor de flujos de trabajo. Haz clic en el disparador y selecciona Envío de formulario como disparador de inscripción.
A continuación, selecciona tu formulario en el menú desplegable Envío de formulario y completa la configuración. Ahora, cada vez que alguien envíe el formulario, HubSpot añadirá un contacto al flujo de trabajo.
Una vez configurado el disparador, el lienzo del flujo de trabajo muestra una nueva acción. Haz clic en Data Ops > Enviar un webhook, configura el método como POST e introduce una URL provisional por ahora. Cuando realices el despliegue de tu aplicación Node.js, actualiza la URL con tu endpoint en producción.
HubSpot envía un payload JSON a la URL del webhook cuando se ejecuta el flujo de trabajo. El payload incluye las propiedades del contacto, y los valores de los campos del formulario aparecen con sus nombres internos de HubSpot. Puedes consultar el nombre interno de cualquier campo en HubSpot en Configuración > Propiedades, en el panel de detalles de la propiedad.
2. Construye el endpoint del middleware
HubSpot puede enviar un webhook a una URL cuando un contacto envía tu formulario, pero no tiene forma de hablar directamente con la API de Kinsta. En su lugar, una capa de middleware recibe el payload de HubSpot, extrae los datos del contacto que necesitas, los reformatea y los pasa a la API de Kinsta.
Express.js es un framework web minimalista para Node.js que permite configurar rápidamente un servidor HTTP como este. Gestiona las solicitudes entrantes, te permite definir rutas y te da acceso al cuerpo de la solicitud con una configuración mínima. Se instala tras inicializar un nuevo proyecto de Node.js:
npm init -y
npm install express dotenv
express proporciona el servidor y la capa de enrutamiento, mientras que dotenv carga tu archivo .env en process.env para que tu clave API y tu ID de empresa estén disponibles para la aplicación en tiempo de ejecución.
Tu servidor reside en un archivo app.js. Este inicia Express, le indica que parsee el cuerpo de las peticiones entrantes como JSON, define una ruta que escucha las solicitudes POST de HubSpot e inicia el servidor en un puerto local.
En este ejemplo se da por hecho que utilizas Node.js 18 o una versión posterior, que incluye compatibilidad nativa con fetch.
// app.js
const express = require('express');
require('dotenv').config();
const app = express();
app.use(express.json());
const KinstaAPIUrl = 'https://api.kinqsta.com/v2';
const headers = {
'Content-Type': 'application/json',
Authorization: `Bearer ${process.env.KINSTA_API_KEY}`
};
app.post('/new-site', async (req, res) => {
const event = Array.isArray(req.body) ? req.body[0] : req.body;
const displayName = event?.properties?.company;
const adminEmail = event?.properties?.email;
if (!displayName || !adminEmail) {
return res.status(400).json({ message: 'Missing required fields' });
}
// Kinsta API call goes here
res.status(200).json({ message: 'Received' });
});
app.listen(3000, () => console.log('Server running on port 3000'));
La línea app.use(express.json()) indica a Express que analice los cuerpos de las peticiones entrantes como JSON. Sin ella, req.body devuelve undefined.
La ruta lee los datos de contacto del payload del webhook, extrae el nombre de la empresa y el correo electrónico del administrador, y valida que ambos valores estén presentes antes de continuar.
El operador de encadenamiento opcional ?. gestiona los casos en los que la estructura de los datos difiere de lo esperado. En lugar de lanzar un error que podría bloquear el servidor, devuelve de forma segura undefined si falta una propiedad.
3. Autenticarse con la API de Kinsta
La API de Kinsta utiliza la autenticación mediante Bearer token. Cada solicitud que envías incluye tu clave API en el cabecera de Authorization. La API utiliza esta clave para identificar tu cuenta y comprobar tu nivel de acceso.
La llamada require('dotenv').config() en la parte superior de app.js carga tu archivo .env cuando se inicia la aplicación. Esto permite que process.env.KINSTA_API_KEY se resuelva a tu clave de API real en tiempo de ejecución.
Define tu URL base y tus cabeceras como constantes en la parte superior de app.js, justo después de la configuración de dotenv:
const KinstaAPIUrl = 'https://api.kinqsta.com/v2';
const headers = {
'Content-Type': 'application/json',
Authorization: `Bearer ${process.env.KINSTA_API_KEY}`
};
Definir las cabeceras como una constante mantiene la coherencia del código en todas las llamadas a la API de la aplicación y facilita la rotación de claves. Actualizar el valor en tu archivo .env y reiniciar el servidor significa que no tienes que buscar cada lugar donde aparece la clave en tu código.
El ID de tu empresa no va en la cabecera de Authorization. En su lugar, lo incluyes en el cuerpo de la solicitud al crear un sitio.
4. Crear el sitio de WordPress a través de la API de Kinsta
Una vez completada la autenticación, puedes enviar la solicitud de creación del sitio. El endpoint /sites de la API de Kinsta acepta una solicitud POST con los datos del sitio que quieres crear y la pone en cola para su aprovisionamiento. En lugar de esperar a que el sitio esté listo antes de responder, la API devuelve inmediatamente una referencia que puedes usar para hacer un seguimiento de la operación.
Dentro de la ruta /new-site, sustituye el comentario del marcador de posición (placeholder) por lo siguiente:
const response = await fetch(`${KinstaAPIUrl}/sites`, {
method: 'POST',
headers,
body: JSON.stringify({
company: process.env.KINSTA_COMPANY_ID,
display_name: displayName,
region: 'us-central1',
install_mode: 'new',
admin_email: adminEmail,
admin_password: process.env.WP_ADMIN_PASSWORD,
admin_user: 'admin',
site_title: displayName
})
});
const data = await response.json();Los parámetros necesarios son company, display_name, region, install_mode, admin_email, admin_password, admin_user y site_title. Establecer install_mode como "new" indica a la API que cree una instalación nueva. El valor region corresponde al identificador de región de un centro de datos Kinsta.
Si aprovisionas sitios con WooCommerce o Yoast SEO preinstalados, la API admite parámetros opcionales para ambos. Una vez que añades woocommerce: true o wordpressseo: true al cuerpo de la solicitud, la API instala esos plugins como parte del proceso de creación del sitio. El sitio aprovisionado llega con tu stack de plugins estándar ya instalado.
Una solicitud correcta devuelve un código de estado 202, no 200. El 202 te indica que la API ha aceptado la solicitud y ha puesto en cola la operación, pero no significa que el sitio esté listo. La creación del sitio Kinsta se ejecuta de forma asíncrona, por lo que el cuerpo de la respuesta contiene un operation_id que utilizas para comprobar el progreso del aprovisionamiento en lugar de devolver los detalles del sitio terminado.
5. Monitorizar el estado de la operación
Como la creación del sitio se realiza de forma asíncrona, tienes que consultar el endpoint /operations/{operation_id} para comprobar cuándo está listo el sitio. La API devuelve el estado actual de la operación cada vez que la llamas. Cuando ese estado cambia a completed, la respuesta incluye detalles sobre el nuevo sitio.
Coge el operation_id de la respuesta de creación del sitio y pásalo a una función de polling:
const pollOperation = (operationId) => {
const interval = setInterval(async () => {
const resp = await fetch(
`${KinstaAPIUrl}/operations/${operationId}`,
{ method: 'GET', headers }
);
const result = await resp.json();
if (result.status === 'completed') {
clearInterval(interval);
console.log('Site ready:', result);
}
}, 30000);
};La función realiza una consulta cada 30 segundos. La API de Kinsta permite hasta 120 solicitudes por minuto, con un límite mínimo de 5 solicitudes por minuto para los endpoints de creación de recursos, como la creación de sitios web. Realizar una consulta al endpoint de operaciones cada 30 segundos se mantiene dentro de esos límites, al tiempo que permite comprobar el progreso a un intervalo razonable.
También tienes que extraer el valor operation_id y pasarlo a pollOperation(). Añade lo siguiente al final de la ruta app.post:
const operationId = data.operation_id;
pollOperation(operationId);Una vez finalizada la operación, la respuesta incluirá los datos del nuevo sitio. Puedes probarlo localmente ejecutando node app.js en tu terminal. Después del despliegue de la aplicación, sustituye la URL del webhook de marcador de posición en tu flujo de trabajo de HubSpot por tu endpoint en producción.
Automatizar la incorporación de clientes a tu agencia con HubSpot y Kinsta
Una vez que la integración está en marcha, se empieza a crear un nuevo entorno de WordPress en cuanto un cliente envía tu formulario de registro de HubSpot. El middleware recibe los datos de contacto, los envía a la API de Kinsta y supervisa el proceso hasta que el sitio está listo. Este enfoque ayuda a automatizar el paso inicial de configuración del sitio mientras tu equipo sigue gestionando los sitios a través de MyKinsta.
Para que HubSpot pueda acceder al middleware, realiza el despliegue de la aplicación de modo que tenga un endpoint público. Plataformas como Sevalla (un producto de Kinsta) pueden alojar aplicaciones Node.js de este tipo. Una vez que la aplicación esté en funcionamiento, actualiza la URL del webhook en tu flujo de trabajo de HubSpot para que apunte al endpoint desplegado.
Para el alojamiento administrado para WordPress de Kinsta, el acceso a la API está disponible en todas las cuentas una vez que generes una clave de API en MyKinsta.
