Wanneer een nieuwe klant zich aanmeldt voor je diensten, wil je na het sluiten van het contract zo snel mogelijk live gaan met de WordPress site. MyKinsta maakt het maken en beheren van WordPress sites eenvoudig, maar bureaus die veel klantprojecten afhandelen zijn vaak op zoek naar manieren om terugkerende configuratietaken te automatiseren.
Met de Kinsta API kun je delen van dat proces automatiseren. In deze tutorial verbind je een HubSpot inschrijfformulier met de Kinsta API via een Node.js middleware app. Wanneer een contact je formulier indient, ontvangt de middleware de gegevens, roept de Kinsta API aan en stelt automatisch een WordPress site beschikbaar.
Waarom bureaus de provisioning van sites zouden moeten automatiseren
Een handmatige site setup zorgt voor vertragingen op het punt in een klantrelatie waar momentum het belangrijkst is. Voor nieuwe aanmeldingen moet iemand een hostingomgeving creëren, WordPress configureren, inloggegevens genereren en deze terugsturen naar de klant.
MyKinsta maakt deze taken eenvoudig, maar als het proces afhankelijk is van de beschikbaarheid van een teamlid om elke stap te voltooien, kunnen er nog steeds vertragingen optreden.
Straight out Digital (Sod), een digitaal bureau dat honderden sites van klanten beheert op Kinsta, gebruikt de Kinsta API om eigen interne tools te bouwen die de provisioning en het onderhoud omzetten in geautomatiseerde workflows. In plaats van dezelfde installatiestappen te herhalen voor elke nieuwe site, activeert Sod het proces programmatisch. Het resultaat, zoals het team het omschrijft, is dat “wat een tijdrovende operatie zou kunnen zijn, nu eenvoudig is.”
Door HubSpot te verbinden met de Kinsta API wordt een vergelijkbaar resultaat bereikt. Wanneer een klant je inschrijfformulier indient, stuurt HubSpot een webhook, je middleware ontvangt de contactgegevens en de Kinsta API start het proces voor het maken van de site.
Op deze manier vindt de overdracht van lead naar een WordPress omgeving automatisch plaats, wat het handmatige werk vermindert dat komt kijken bij het inwerken van nieuwe klanten.
Aan de slag
Om deze tutorial te volgen, heb je nodig:
- Ten minste één bestaande site in je Kinsta-account. Dit zorgt ervoor dat API-toegang beschikbaar is.
- Een HubSpot account met een formulier om aanmeldingen van klanten vast te leggen. Merk op dat webhook workflows alleen beschikbaar zijn op bepaalde premium HubSpot abonnementen.
- Node.js 18 of later lokaal geïnstalleerd.
Je kunt een Kinsta API-sleutel genereren in het MyKinsta dashboard. Navigeer naar Bedrijfsinstellingen > API-sleutels en klik op API-sleutel aanmaken.
Stel een vervaltijd in, geef de sleutel een naam en klik op Genereren. Omdat MyKinsta de nieuwe API-sleutel maar één keer weergeeft, moet je deze ergens veilig opslaan.
Je hebt ook je Bedrijfs-ID nodig. Je kunt dit opvragen via de MyKinsta URL terwijl je bent ingelogd of door een verzoek in te dienen bij het /sites endpoint zodra je API-sleutel actief is.
Sla beide waarden op in een .env bestand in de root van je project:
KINSTA_API_KEY=your_api_key_here
KINSTA_COMPANY_ID=your_company_id_hereHoe HubSpot integreren met Kinsta met behulp van de Kinsta API
Net als bij het gebruik van de Kinsta API en Slack, kun je een integratie opzetten waarbij een HubSpot formulier een webhook triggert, een Node.js app de contactgegevens ontvangt, de Kinsta API callt om een WordPress site te maken en de API peilt totdat de site live is.
Je bouwt dit op in vijf stappen: HubSpot configuratie, middleware instellen, API authenticatie, site maken en de werking monitoren.
1. Stel je HubSpot formulier en workflow in
Maak of selecteer in je HubSpot dashboard het formulier waarmee je aanmeldingen van nieuwe klanten vastlegt onder Marketing > Forms.
Het formulier heeft minimaal velden nodig voor een voornaam, e-mailadres en bedrijfsnaam. Deze waarden komen overeen met de parameters die je later doorgeeft aan de Kinsta API.
Als je formulier klaar is, navigeer je naar Automation > Workflows in het navigatiemenu van HubSpot en klik je rechtsboven op Create workflow.
Selecteer vervolgens From scratch. Dit opent de workflow editor. Klik op de trigger en kies Submit form als inschrijftrigger.
Selecteer vervolgens je formulier in het vervolgkeuzemenu Submit form en voltooi de instelling. HubSpot schrijft nu een contactpersoon in de workflow in wanneer iemand het formulier indient.
Nu de trigger is geplaatst, wordt op het workflow canvas een nieuwe actie weergegeven. Klik op Data Ops > Send a webhook, stel de methode in op POST en voer voorlopig een tijdelijke URL in. Zodra je je Node.js-app implementeert, werk je de URL bij naar je live endpoint.
HubSpot stuurt een JSON payload naar de webhook URL wanneer de workflow wordt uitgevoerd. De payload bevat de eigenschappen van de contactpersoon, waarbij de waarden van de formuliervelden verschijnen onder hun interne HubSpot eigenschapnamen. Je kunt de interne naam voor elk veld in HubSpot bevestigen onder Settings > Properties door het paneel met eigenschappen te bekijken.
2. Bouw het middleware endpoint
HubSpot kan een webhook naar een URL sturen wanneer een contact je formulier indient, maar het heeft geen manier om rechtstreeks met de Kinsta API te communiceren. In plaats daarvan ontvangt een middleware laag de HubSpot payload, extraheert de contactgegevens die je nodig hebt, formatteert ze opnieuw en geeft ze door aan de Kinsta API.
Express.js is een minimaal Node.js webframework waarmee je zo’n HTTP-server snel kunt opzetten. Het handelt inkomende verzoeken af, laat je routes definiëren en geeft je toegang tot de request body met minimale configuratie. Je installeert het na het initialiseren van een nieuw Node.js project:
npm init -y
npm installeer express dotenv
express levert de server en routing laag, terwijl dotenv je .env bestand in process.env laadt zodat je API sleutel en bedrijfs-ID beschikbaar zijn voor de applicatie tijdens runtime.
Je server staat in een app.js bestand. Het start Express, vertelt het om inkomende request bodies te parsen als JSON, definieert een route die luistert naar POST requests van HubSpot en start de server op een lokale poort.
Dit voorbeeld gaat uit van Node.js 18 of later, die native fetch ondersteuning bevat.
// 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'));
De regel app.use(express.json()) vertelt Express om inkomende request bodies te parsen als JSON. Zonder deze regel retourneert req.body undefined.
De route leest de contactgegevens uit de payload van de webhook, haalt de bedrijfsnaam en het e-mailadres van de beheerder eruit en valideert of beide waarden aanwezig zijn voordat er verder wordt gegaan.
De ?. optionele chaining operator behandelt gevallen waarin de payloadstructuur afwijkt van wat je verwacht. In plaats van een foutmelding te geven die de server kan laten crashen, geeft het veilig undefined terug als een eigenschap ontbreekt.
3. Authenticeer met de Kinsta API
De Kinsta API maakt gebruik van Bearer token authenticatie. Elk verzoek dat je verstuurt bevat je API sleutel in de Authorization header. De API gebruikt deze sleutel om je account te identificeren en je toegangsniveau te controleren.
De require('dotenv').config() aanroep bovenaan app.js laadt je .env bestand wanneer de applicatie start. Hierdoor kan process.env.KINSTA_API_KEY tijdens runtime omzetten naar je werkelijke API-sleutel.
Definieer je basis URL en headers als constanten bovenaan app.js na de dotenv configuratie:
const KinstaAPIUrl = 'https://api.kinqsta.com/v2';
const headers = {
'Content-Type': 'application/json',
Authorization: `Bearer ${process.env.KINSTA_API_KEY}`
};
Het definiëren van de headers als een constante houdt de code consistent voor elke API-aanroep in de applicatie en maakt het roteren van sleutels eenvoudig. Het bijwerken van de waarde in je .env bestand en het herstarten van de server betekent dat je niet elke plaats hoeft op te zoeken waar de sleutel voorkomt in je code.
Je bedrijfs-ID komt niet in de Authorization header. In plaats daarvan neem je het op in de request body wanneer je een site aanmaakt.
4. Maak de WordPress site via de Kinsta API
Nu de authenticatie is ingesteld, kun je het verzoek doen om de site te maken. Het /sites endpoint van de Kinsta API accepteert een POST verzoek met de gegevens van de site die je wilt maken en zet deze in de wachtrij voor provisioning. In plaats van te wachten tot de site klaar is om te reageren, stuurt de API onmiddellijk een referentie terug die je kunt gebruiken om de bewerking te volgen.
Vervang in de /new-site route het commentaar door het volgende:
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();De vereiste parameters zijn company, display_name, region, install_mode, admin_email, admin_password, admin_user en site_title. Het instellen van install_mode op 'new' vertelt de API om een nieuwe installatie aan te maken. De regio waarde komt overeen met de regio identifier van een Kinsta datacenter.
Als je sites levert met WooCommerce of Yoast SEO voorgeïnstalleerd, ondersteunt de API optionele parameters voor beide. Zodra je woocommerce: true of wordpressseo: true toevoegt aan de request body, installeert de API deze plugins als onderdeel van het site creatie proces. De site wordt geleverd met je standaard plugin-stack al geïnstalleerd.
Een succesvol verzoek retourneert een 202 statuscode, geen 200. De 202 vertelt je dat de API het verzoek heeft geaccepteerd en de bewerking in de wachtrij heeft gezet, maar het betekent niet dat de site klaar is. Het aanmaken van een Kinsta-site verloopt asynchroon, dus de respons bevat een operation_id die je kunt gebruiken om de voortgang van de provisioning te controleren in plaats van de voltooide sitegegevens terug te sturen.
5. Controleer de status van de operatie
Omdat het aanmaken van sites asynchroon verloopt, moet je het endpoint /operations/{operation_id} opvragen om te controleren wanneer de site klaar is. De API retourneert de huidige status van de operatie elke keer dat je het callt. Als die status verandert in completed, bevat het antwoord details over de nieuwe site.
Neem de operation_id van de site creatie respons en geef het door aan een polling functie:
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);
};De functie peilt elke 30 seconden. Kinsta’s API staat tot 120 verzoeken per minuut toe, met een ondergrens van 5 verzoeken per minuut voor endpointen voor het aanmaken van bronnen, zoals het aanmaken van een site. Door het endpoint voor bewerkingen elke 30 seconden te controleren, blijf je ruim binnen deze limieten en controleer je nog steeds de voortgang met een redelijk interval.
Je moet ook de operation_id waarde eruit halen en deze doorgeven aan pollOperation(). Voeg het volgende toe aan het einde van de app.post route:
const operationId = data.operation_id;
pollOperation(operationId);Zodra de operatie is voltooid, bevat het antwoord de gegevens van de nieuwe site. Je kunt dit lokaal testen door node app.js in je terminal uit te voeren. Nadat je de app hebt uitgerold, vervang je de placeholder webhook URL in je HubSpot workflow door je live endpoint.
De onboarding van klanten van je bureau automatiseren met HubSpot en Kinsta
Als de integratie werkt, begint een nieuwe WordPress omgeving te provisionen zodra een klant het HubSpot inschrijfformulier indient. De middleware ontvangt de contactgegevens, geeft deze door aan de Kinsta API en controleert de werking totdat de site klaar is. Deze aanpak helpt bij het automatiseren van de eerste stap in het opzetten van de site, terwijl je team doorgaat met het beheren van sites via MyKinsta.
Om de middleware toegankelijk te maken voor HubSpot, moet je de applicatie zo implementeren dat deze een openbaar endpoint heeft. Platforms zoals Sevalla (een Kinsta product) kunnen dergelijke Node.js applicaties hosten. Zodra de app live is, update je de webhook URL in je HubSpot workflow om te verwijzen naar het endpoint.
Voor Kinsta’s managed WordPress hosting is API toegang beschikbaar voor alle accounts zodra je een API sleutel hebt gegenereerd in MyKinsta.
