Lorsqu’un nouveau client fait appel à vos services, le temps entre le contrat et la mise en place d’un site WordPress est important. MyKinsta facilite la création et la gestion de sites WordPress, mais les agences qui gèrent de nombreux projets clients cherchent souvent à automatiser les tâches d’installation répétitives.
L’API Kinsta vous permet d’automatiser certaines parties de ce processus. Dans ce tutoriel, vous connectez un formulaire d’inscription de client HubSpot à l’API Kinsta par le biais d’une application middleware Node.js. Lorsqu’un contact envoie votre formulaire, l’intergiciel reçoit les données, appelle l’API Kinsta et approvisionne automatiquement un site WordPress.
Pourquoi les agences devraient automatiser le provisionnement des sites
L’installation manuelle d’un site entraine des retards à un moment de la relation client où l’élan est le plus important. Les nouvelles inscriptions nécessitent que quelqu’un crée un environnement d’hébergement, configure WordPress, génère des identifiants et les communique au client.
MyKinsta simplifie ces tâches, mais lorsque le processus dépend de la disponibilité d’un membre de l’équipe pour réaliser chaque étape, des retards peuvent encore survenir.
Straight out Digital (Sod), une agence numérique qui gère des centaines de sites clients sur Kinsta, utilise l’API de Kinsta pour créer des outils internes personnalisés qui transforment le provisionnement et la maintenance en flux de travail automatisés. Au lieu de répéter les mêmes étapes de configuration pour chaque nouveau site, Sod déclenche le processus de manière programmatique. Le résultat, comme le décrit l’équipe, est que « ce qui aurait pu être une opération fastidieuse a été simplifié »
La connexion de HubSpot à l’API de Kinsta permet d’obtenir un résultat similaire. Lorsqu’un client envoie votre formulaire d’inscription, HubSpot envoie un webhook, votre middleware reçoit les données de contact et l’API Kinsta lance le processus de création du site.
De cette façon, le passage du lead à un environnement WordPress provisionné se fait automatiquement, réduisant ainsi le travail manuel impliqué dans l’intégration de nouveaux clients.
Premiers pas
Pour suivre ce tutoriel, vous avez besoin de
- Au moins un site existant dans votre compte Kinsta. Cela permet de s’assurer que l’accès à l’API est disponible.
- Un compte HubSpot avec un formulaire configuré pour capturer les inscriptions des clients. Notez que les flux de travail webhook ne sont disponibles que sur certains plans HubSpot premium.
- Node.js 18 ou plus récent installé localement.
Vous pouvez générer une clé API Kinsta dans le tableau de bord MyKinsta. Naviguez vers Réglages de l’entreprise > Clés API et cliquez sur Créer une clé API.
Définissez une date d’expiration, donnez un nom à la clé et cliquez sur Générer. Comme MyKinsta n’affiche la nouvelle clé API qu’une seule fois, conservez-la dans un endroit sûr.
Vous avez également besoin de l’identifiant de votre entreprise. Vous pouvez le récupérer à partir de l’URL MyKinsta lorsque vous êtes connecté ou en faisant une requête au point de terminaison /sites une fois que votre clé API est active.
Stockez les deux valeurs dans un fichier .env à la racine de votre projet :
KINSTA_API_KEY=your_api_key_here
KINSTA_COMPANY_ID=your_company_id_hereComment intégrer HubSpot avec Kinsta en utilisant l’API de Kinsta
Comme pour l’API Kinsta et Slack, vous pouvez mettre en place une intégration dans laquelle la soumission d’un formulaire HubSpot déclenche un webhook, une application Node.js reçoit les données de contact, appelle l’API Kinsta pour créer un site WordPress, et interroge l’API jusqu’à ce que le site soit en ligne.
Vous construisez ceci en cinq étapes : Configuration HubSpot, configuration du middleware, authentification de l’API, création du site et suivi des opérations.
1. Configurer votre formulaire et votre flux de travail HubSpot
Dans votre tableau de bord HubSpot, créez ou sélectionnez le formulaire qui capture les inscriptions des nouveaux clients sous Marketing > Formulaires.
Au minimum, le formulaire doit contenir des champs pour le prénom, l’adresse e-mail et le nom de l’entreprise. Ces valeurs correspondent aux réglages que vous transmettrez plus tard à l’API Kinsta.
Une fois votre formulaire prêt, naviguez vers Automatisation > Flux de travail dans le menu de navigation de HubSpot et cliquez sur Créer un flux de travail dans le coin supérieur droit.
Ensuite, sélectionnez Démarrer à partir de zéro. Cela ouvre l’éditeur de flux de travail. Cliquez sur le déclencheur et choisissez Envoi de formulaire comme déclencheur d’inscription.
Sélectionnez ensuite votre formulaire dans le menu déroulant Envoi de formulaire et terminez la configuration. HubSpot inscrit maintenant un contact dans le flux de travail chaque fois que quelqu’un envoie le formulaire.
Une fois le déclencheur en place, le canevas du flux de travail affiche une nouvelle action. Cliquez sur Data Ops > Send a webhook, définissez la méthode sur POST et saisissez une URL fictive pour l’instant. Une fois que vous aurez déployé votre application Node.js, mettez à jour l’URL avec votre point de terminaison réel.
HubSpot envoie une charge utile JSON à l’URL du webhook lorsque le flux de travail s’exécute. Le payload inclut les propriétés du contact, avec les valeurs des champs de formulaire apparaissant sous leurs noms de propriétés internes HubSpot. Vous pouvez confirmer le nom interne de n’importe quel champ dans HubSpot sous Réglages > Propriétés en consultant le panneau des détails de la propriété.
2. Construire le point de terminaison de l’intergiciel
HubSpot peut envoyer un webhook à une URL quand un contact soumet votre formulaire, mais il n’a aucun moyen de parler directement à l’API Kinsta. Au lieu de cela, une couche de middleware reçoit le payload HubSpot, extrait les données de contact dont vous avez besoin, les reformate et les transmet à l’API Kinsta.
Express.js est un framework web Node.js minimal qui rend la construction d’un serveur HTTP comme celui-ci rapide à mettre en place. Il gère les requêtes entrantes, vous permet de définir des itinéraires et vous donne accès au corps de la requête avec une configuration minimale. Vous l’installez après avoir initialisé un nouveau projet Node.js :
npm init -y
npm install express dotenv
express fournit le serveur et la couche de routage, tandis que dotenv charge votre fichier .env dans process.env afin que votre clé API et votre identifiant d’entreprise soient disponibles pour l’application au moment de l’exécution.
Votre serveur se trouve dans un fichier app.js. Il démarre Express, lui demande d’analyser les corps des requêtes entrantes en JSON, définit une route qui écoute les requêtes POST de HubSpot, et démarre le serveur sur un port local.
Cet exemple suppose l’utilisation de Node.js 18 ou d’une version ultérieure, qui inclut la prise en charge de la récupération native.
// app.js
const express = require('express');
require('dotenv').config();
const app = express();
app.use(express.json());
const KinstaAPIUrl = 'https://api.kinsta.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 ligne app.use(express.json()) indique à Express d’analyser les corps des requêtes entrantes en JSON. Sans cette ligne, req.body renvoie une valeur undefined.
La route lit les données de contact à partir de la charge utile du webhook, extrait le nom de l’entreprise et l’adresse e-mail de l’administrateur, et valide que les deux valeurs sont présentes avant de continuer.
L’opérateur de chainage optionnel ?. gère les cas où la structure de la charge utile diffère de ce à quoi vous vous attendez. Au lieu d’envoyer une erreur qui pourrait faire planter le serveur, il renvoie en toute sécurité une valeur undefined si une propriété est manquante.
3. S’authentifier avec l’API Kinsta
L’API Kinsta utilise l’authentification par jeton Bearer. Chaque requête que vous envoyez inclut votre clé API dans l’en-tête Authorization. L’API utilise cette clé pour identifier votre compte et vérifier votre niveau d’accès.
L’appel require('dotenv').config() en haut du fichier app.js charge votre fichier .env au démarrage de l’application. Cela permet à process.env.KINSTA_API_KEY de résoudre votre clé d’API réelle au moment de l’exécution.
Définissez votre URL de base et vos en-têtes en tant que constantes en haut de app.js après la configuration dotenv :
const KinstaAPIUrl = 'https://api.kinsta.com/v2' ;
const headers = {
content-Type : 'application/json',
Authorization : `Bearer ${process.env.KINSTA_API_KEY}`
} ;
Le fait de définir les en-têtes comme une constante permet au code d’être cohérent pour chaque appel d’API dans l’application et facilite la rotation des clés. En mettant à jour la valeur dans votre fichier .env et en redémarrant le serveur, vous n’avez pas à rechercher chaque endroit où la clé apparaît dans votre code.
L’identifiant de votre entreprise ne figure pas dans l’en-tête d’Authorization. Au lieu de cela, vous l’incluez dans le corps de la requête lorsque vous créez un site.
4. Créer le site WordPress via l’API Kinsta
Une fois l’authentification en place, vous pouvez effectuer la demande de création de site. Le point de terminaison /sites de l’API Kinsta accepte une requête POST avec les détails du site que vous souhaitez créer et le met en file d’attente pour le provisionnement. Plutôt que d’attendre que le site soit prêt avant de répondre, l’API renvoie immédiatement une référence que vous utiliserez pour suivre l’opération.
À l’intérieur de la route /new-site, remplacez le commentaire de remplacement par ce qui suit :
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() ;Les réglages nécessaires sont : company, display_name, region, install_mode, admin_email, admin_password, admin_user, et site_title. La définition de install_mode à « new » indique à l’API de créer une nouvelle installation. La valeur region correspond à l’identifiant de région d’un centre de données Kinsta.
Si vous provisionnez des sites avec WooCommerce ou Yoast SEO préinstallés, l’API prend en charge des réglages optionnels pour les deux. Une fois que vous avez ajouté woocommerce : true ou wordpressseo : true au corps de la requête, l’API installe ces extensions dans le cadre du processus de création du site. Le site provisionné arrive avec votre pile d’extensions standards déjà en place.
Une requête réussie renvoie un code d’état 202, et non 200. Le 202 vous indique que l’API a accepté la requête et a mis l’opération en file d’attente, mais cela ne signifie pas que le site est prêt. La création d’un site Kinsta s’exécute de manière asynchrone, de sorte que le corps de la réponse contient un operation_id que vous utilisez pour vérifier la progression du provisionnement plutôt que de renvoyer les détails du site fini.
5. Surveiller l’état de l’opération
Comme la création de site s’exécute de manière asynchrone, vous devez interroger le point de terminaison /operations/{operation_id} pour vérifier si le site est prêt. L’API renvoie l’état actuel de l’opération chaque fois que vous l’appelez. Lorsque ce statut devient terminé, la réponse inclut des détails sur le nouveau site.
Prenez l’identifiant de operation_id dans la réponse de création du site et transmettez-le à une fonction de sondage :
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(intervalle) ;
console.log('Site ready:', result) ;
}
}, 30000) ;
} ;La fonction interroge toutes les 30 secondes. L’API de Kinsta autorise jusqu’à 120 requêtes par minute, avec une limite inférieure de 5 requêtes par minute pour les points de terminaison de création de ressources tels que la création de site. L’interrogation du point de terminaison des opérations toutes les 30 secondes reste bien en deçà de ces limites tout en vérifiant la progression à un intervalle raisonnable.
Vous devez également extraire la valeur operation_id et la transmettre à pollOperation(). Ajoutez ce qui suit à la fin de la route app.post :
const operationId = data.operation_id ;
pollOperation(operationId) ;Une fois l’opération terminée, la réponse contient les détails du nouveau site. Vous pouvez tester ceci localement en lançant node app.js dans votre terminal. Après avoir déployé l’application, remplacez l’URL du webhook dans votre workflow HubSpot par votre point de terminaison.
Automatiser l’accueil des clients de votre agence avec HubSpot et Kinsta
Avec l’intégration en cours, un nouvel environnement WordPress commence à se mettre en place dès qu’un client envoie votre formulaire d’inscription HubSpot. L’intergiciel reçoit les données de contact, les transmet à l’API Kinsta et interroge l’opération jusqu’à ce que le site soit prêt. Cette approche permet d’automatiser l’étape de configuration initiale du site pendant que votre équipe continue à gérer les sites via MyKinsta.
Pour rendre l’intergiciel accessible à HubSpot, déployez l’application de manière à ce qu’elle ait un point de terminaison public. Des plateformes telles que Sevalla (un produit Kinsta) peuvent héberger des applications Node.js comme celle-ci. Une fois l’application en ligne, mettez à jour l’URL du webhook dans votre workflow HubSpot pour qu’elle pointe vers le point de terminaison déployé.
Pour l’hébergement WordPress infogéré par Kinsta, l’accès à l’API est disponible sur tous les comptes une fois que vous avez généré une clé API dans MyKinsta.
Joel est un développeur d'interfaces publiques qui travaille chez Kinsta en tant que rédacteur technique. Il est un enseignant passionné par l'open source et a écrit plus de 200 articles techniques, principalement autour de JavaScript et de ses frameworks.
