Wenn sich ein neuer Kunde für deine Dienste anmeldet, ist die Zeit zwischen dem Vertragsabschluss und der Bereitstellung einer WordPress-Website wichtig. MyKinsta macht die Erstellung und Verwaltung von WordPress-Websites einfach, aber Agenturen, die viele Kundenprojekte betreuen, suchen oft nach Möglichkeiten, sich wiederholende Einrichtungsaufgaben zu automatisieren.
Mit der Kinsta-API kannst du Teile dieses Prozesses automatisieren. In diesem Tutorial verbindest du ein HubSpot-Kundenanmeldeformular über eine Node.js-Middleware-App mit der Kinsta-API. Wenn ein Kontakt dein Formular abschickt, empfängt die Middleware die Daten, ruft die Kinsta-API auf und richtet automatisch eine WordPress-Seite ein.
Warum Agenturen die Bereitstellung von Websites automatisieren sollten
Eine manuelle Einrichtung der Website führt zu Verzögerungen in dem Moment, in dem die Kundenbeziehung am wichtigsten ist. Bei einer Neuanmeldung muss jemand eine Hosting-Umgebung einrichten, WordPress konfigurieren, Zugangsdaten generieren und diese an den Kunden weitergeben.
MyKinsta macht diese Aufgaben einfach, aber wenn der Prozess davon abhängt, dass ein Teammitglied verfügbar ist, um jeden Schritt auszuführen, kann es trotzdem zu Verzögerungen kommen.
Straight out Digital (Sod), eine Digitalagentur, die Hunderte von Kundenwebsites auf Kinsta verwaltet, nutzt die Kinsta-API, um benutzerdefinierte interne Tools zu erstellen, die die Bereitstellung und Wartung in automatisierte Workflows verwandeln. Anstatt die gleichen Einrichtungsschritte für jede neue Website zu wiederholen, löst Sod den Prozess programmgesteuert aus. „Dadurch wird ein potenziell zeitintensiver Prozess – wie das Team es formuliert – auf ein Minimum reduziert.“
Die Verbindung von HubSpot mit der Kinsta-API führt zu einem ähnlichen Ergebnis. Wenn ein Kunde dein Anmeldeformular abschickt, sendet HubSpot einen Webhook, deine Middleware empfängt die Kontaktdaten und die Kinsta-API startet den Prozess der Website-Erstellung.
Auf diese Weise erfolgt die Übergabe vom Lead an eine bereitgestellte WordPress-Umgebung automatisch, was die manuelle Arbeit beim Onboarding neuer Kunden reduziert.
Erste Schritte
Um diesem Tutorial zu folgen, brauchst du:
- Mindestens eine bestehende Website in deinem Kinsta-Konto. So stellst du sicher, dass der API-Zugang verfügbar ist.
- Ein HubSpot-Konto mit einem Formular, das für die Erfassung von Kundenanmeldungen eingerichtet ist. Beachte, dass Webhook-Workflows nur in bestimmten Premium-Paketen von HubSpot verfügbar sind.
- Node.js 18 oder höher ist lokal installiert.
Du kannst einen Kinsta-API-Schlüssel über das MyKinsta-Dashboard generieren. Navigiere zu Unternehmenseinstellungen > API-Schlüssel und klicke auf API-Schlüssel erstellen.
Lege eine Gültigkeitsdauer fest, gib dem Schlüssel einen Namen und klicke auf Generieren. Da MyKinsta den neuen API-Schlüssel nur einmal anzeigt, solltest du ihn an einem sicheren Ort aufbewahren.
Du brauchst außerdem deine Unternehmens-ID. Diese kannst du von der MyKinsta-URL abrufen, wenn du eingeloggt bist, oder indem du eine Anfrage an den Endpunkt /sites stellst, sobald dein API-Schlüssel aktiv ist.
Speichere beide Werte in einer .env-Datei im Stammverzeichnis deines Projekts:
KINSTA_API_KEY=your_api_key_here
KINSTA_COMPANY_ID=your_company_id_hereIntegration von HubSpot mit Kinsta über die Kinsta-API
Ähnlich wie bei der Verwendung der Kinsta-API und Slack kannst du eine Integration einrichten, bei der ein HubSpot-Formular einen Webhook auslöst, eine Node.js-App die Kontaktdaten erhält, die Kinsta-API aufruft, um eine WordPress-Website zu erstellen, und die API abfragt, bis die Site live ist.
Du baust dies in fünf Schritten auf: HubSpot-Konfiguration, Middleware-Einrichtung, API-Authentifizierung, Website-Erstellung und Betriebsüberwachung.
1. Richte dein HubSpot-Formular und deinen Workflow ein
In deinem HubSpot-Dashboard erstellst du unter Marketing > Formulare das Formular für die Anmeldung neuer Kunden oder wählst es aus.
Das Formular braucht mindestens Felder für den Vornamen, die E-Mail-Adresse und den Firmennamen. Diese Werte entsprechen den Parametern, die du später an die Kinsta-API übergibst.
Wenn dein Formular fertig ist, navigiere im HubSpot-Navigationsmenü zu Automatisierung > Workflows und klicke oben rechts auf Workflow erstellen.
Als nächstes wählst du Von Grund auf neu beginnen. Dadurch wird der Workflow-Editor geöffnet. Klicke auf den Auslöser und wähle Formularübermittlung als Anmeldeauslöser.
Wähle dann dein Formular aus dem Dropdown-Menü Formularübermittlung und schließe die Einrichtung ab. HubSpot nimmt jetzt einen Kontakt in den Workflow auf, sobald jemand das Formular abschickt.
Wenn der Auslöser aktiviert ist, wird im Workflow Canvas eine neue Aktion angezeigt. Klicke auf Data Ops > Einen Webhook senden, setze die Methode auf POST und gib vorerst eine Platzhalter-URL ein. Sobald du deine Node.js-Anwendung bereitstellst, aktualisierst du die URL auf deinen Live-Endpunkt.
HubSpot sendet einen JSON-Payload an die Webhook-URL, wenn der Workflow ausgeführt wird. Der Payload enthält die Eigenschaften des Kontakts, wobei die Werte der Formularfelder unter ihren internen HubSpot-Eigenschaftsnamen erscheinen. Du kannst den internen Namen für jedes Feld in HubSpot unter Einstellungen > Eigenschaften überprüfen, indem du die Eigenschaftsdetails ansiehst.
2. Erstelle den Middleware-Endpunkt
HubSpot kann einen Webhook an eine URL senden, wenn ein Kontakt dein Formular abschickt, aber es hat keine Möglichkeit, direkt mit der Kinsta-API zu kommunizieren. Stattdessen empfängt eine Middleware-Schicht die HubSpot-Nutzdaten, extrahiert die benötigten Kontaktdaten, formatiert sie neu und leitet sie an die Kinsta-API weiter.
Express.js ist ein minimales Node.js-Webframework, mit dem sich ein HTTP-Server wie dieser schnell einrichten lässt. Es verarbeitet eingehende Anfragen, lässt dich Routen definieren und gibt dir mit minimaler Konfiguration Zugriff auf den Request Body. Du installierst es, nachdem du ein neues Node.js-Projekt angelegt hast:
npm init -y
npm install express dotenv
express stellt die Server- und Routing-Schicht bereit, während dotenv deine .env-Datei in process.env lädt, damit dein API-Schlüssel und deine Unternehmens-ID der Anwendung zur Laufzeit zur Verfügung stehen.
Dein Server befindet sich in einer app.js-Datei. Sie startet Express, weist es an, eingehende Anfragen als JSON zu parsen, definiert eine Route, die auf POST-Anfragen von HubSpot wartet, und startet den Server auf einem lokalen Port.
Dieses Beispiel setzt Node.js 18 oder höher voraus, das native Fetch-Unterstützung bietet.
// 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'));
Die Zeile app.use(express.json()) weist Express an, eingehende Anfragebodies als JSON zu parsen. Ohne diese Zeile ist der Rückgabewert von req.body undefined.
Die Route liest die Kontaktdaten aus dem Webhook-Payload, extrahiert den Firmennamen und die Admin-E-Mail und prüft, ob beide Werte vorhanden sind, bevor sie fortfährt.
Der optionale Verkettungsoperator ?. behandelt Fälle, in denen die Payload-Struktur von dem abweicht, was du erwartest. Anstatt einen Fehler auszulösen, der den Server zum Absturz bringen könnte, gibt er sicher undefined zurück, wenn eine Eigenschaft fehlt.
3. Authentifizierung mit der Kinsta-API
Die Kinsta-API verwendet eine Bearer-Token-Authentifizierung. Jede Anfrage, die du sendest, enthält deinen API-Schlüssel im Authorization-Header. Die API verwendet diesen Schlüssel, um dein Konto zu identifizieren und deine Zugriffsstufe zu überprüfen.
Der Aufruf require('dotenv').config() am Anfang von app.js lädt deine .env-Datei, wenn die Anwendung startet. So kann process.env.KINSTA_API_KEY zur Laufzeit in deinen tatsächlichen API-Schlüssel aufgelöst werden.
Definiere deine Basis-URL und die Header als Konstanten am Anfang von app.js nach der dotenv-Konfiguration:
const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const headers = {
'Content-Type': 'application/json',
Authorization: `Bearer ${process.env.KINSTA_API_KEY}`
};
Wenn du die Header als Konstante definierst, bleibt der Code bei jedem API-Aufruf in der Anwendung konsistent und die Schlüsselrotation ist ganz einfach. Wenn du den Wert in deiner .env-Datei aktualisierst und den Server neu startest, musst du nicht jede Stelle suchen, an der der Schlüssel in deinem Code auftaucht.
Deine Unternehmens-ID wird nicht in den Authorization-Header aufgenommen. Stattdessen gibst du sie bei der Erstellung einer Website im Request Body an.
4. Erstelle die WordPress-Website über die Kinsta-API
Nachdem du dich authentifiziert hast, kannst du die Anfrage zur Erstellung der Website stellen. Der Endpunkt /sites der Kinsta-API nimmt eine POST-Anfrage mit den Details der zu erstellenden Website entgegen und stellt sie in die Warteschlange für die Bereitstellung. Anstatt zu warten, bis die Seite fertig ist, bevor sie antwortet, kehrt die API sofort mit einer Referenz zurück, mit der du den Vorgang verfolgen kannst.
Ersetze den Platzhalterkommentar innerhalb der /new-site-Route durch den folgenden:
const response = await fetch(`${KinstaAPIUrl}/sites`, {
method: 'POST',
headers,
body: JSON.stringify({
firma: 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();Die erforderlichen Parameter sind company, display_name, region, install_mode, admin_email, admin_password, admin_user und site_title. Wenn du install_mode auf 'new' setzt, wird die API angewiesen, eine neue Installation zu erstellen. Der Wert region entspricht der Regionalkennung eines Kinsta-Rechenzentrums.
Wenn du Websites bereitstellst, auf denen WooCommerce oder Yoast SEO vorinstalliert ist, unterstützt die API optionale Parameter für beide. Wenn du woocommerce: true oder wordpressseo: true zum Anfragetext hinzufügst, installiert die API diese Plugins als Teil des Website-Erstellungsprozesses. Die bereitgestellte Website wird mit deinem Standard-Plugin-Stack geliefert.
Bei einer erfolgreichen Anfrage wird ein 202 Statuscode zurückgegeben, nicht 200. Die 202 sagt dir, dass die API die Anfrage akzeptiert und den Vorgang in die Warteschlange gestellt hat, aber sie bedeutet nicht, dass die Website fertig ist. Die Erstellung der Kinsta-Website läuft asynchron, daher enthält der Antwortkörper eine operation_id, mit der du den Fortschritt der Bereitstellung überprüfen kannst, anstatt die fertigen Website-Details zurückzugeben.
5. Überwache den Status der Operation
Da die Website-Erstellung asynchron abläuft, musst du den Endpunkt /operations/{operation_id} abfragen, um zu prüfen, wann die Website fertig ist. Die API gibt bei jedem Aufruf den aktuellen Status des Vorgangs zurück. Wenn dieser Status auf completed wechselt, enthält die Antwort Details über die neue Website.
Nimm die operation_id aus der Antwort auf die Website-Erstellung und übergebe sie an eine Abfragefunktion:
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(intervall);
console.log('Website fertig:', result);
}
}, 30000);
};Die Funktion fragt alle 30 Sekunden ab. Die API von Kinsta erlaubt bis zu 120 Anfragen pro Minute, wobei die untere Grenze bei 5 Anfragen pro Minute für Endpunkte zur Ressourcenerstellung liegt, z. B. bei der Website-Erstellung. Wenn du den Endpunkt für Operationen alle 30 Sekunden abfragst, bleibst du innerhalb dieser Grenzen und überprüfst den Fortschritt in einem angemessenen Intervall.
Du musst auch den Wert operation_id extrahieren und ihn an pollOperation() übergeben. Füge Folgendes am Ende der app.post-Route hinzu:
const operationId = data.operation_id;
pollOperation(operationId);Sobald der Vorgang abgeschlossen ist, enthält die Antwort die Details der neuen Website. Du kannst dies lokal testen, indem du node app.js in deinem Terminal ausführst. Nachdem du die Anwendung bereitgestellt hast, ersetze die Platzhalter-URL des Webhooks in deinem HubSpot-Workflow durch deinen Live-Endpunkt.
Automatisiertes Onboarding für deine Agentur mit HubSpot und Kinsta
Wenn die Integration läuft, wird eine neue WordPress-Umgebung eingerichtet, sobald ein Kunde dein HubSpot-Anmeldeformular ausfüllt. Die Middleware empfängt die Kontaktdaten, leitet sie an die Kinsta-API weiter und fragt den Vorgang ab, bis die Website fertig ist. Auf diese Weise lässt sich der erste Schritt der Website-Einrichtung automatisieren, während dein Team die Websites weiterhin über MyKinsta verwaltet.
Um die Middleware für HubSpot zugänglich zu machen, musst du die Anwendung so einrichten, dass sie einen öffentlichen Endpunkt hat. Plattformen wie Sevalla (ein Kinsta-Produkt) können Node.js-Anwendungen wie diese hosten. Sobald die Anwendung live ist, aktualisierst du die Webhook-URL in deinem HubSpot-Workflow, damit sie auf den bereitgestellten Endpunkt verweist.
Für das verwaltete WordPress-Hosting von Kinsta ist der API-Zugang für alle Konten verfügbar, sobald du einen API-Schlüssel in MyKinsta erstellt hast.
Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.
