Wenn sich ein neuer Kunde für Ihre Dienste anmeldet, ist die Zeit zwischen Vertrag und der Bereitstellung einer WordPress-Site von Bedeutung. MyKinsta macht das Erstellen und Verwalten von WordPress-Seiten unkompliziert, doch Agenturen, die viele Kundenprojekte bearbeiten, suchen oft nach Möglichkeiten, sich wiederholende Einrichtungsaufgaben zu automatisieren.
Mit der Kinsta-API können Sie Teile dieses Prozesses automatisieren. In diesem Tutorial verbinden Sie ein HubSpot-Client-Anmeldeformular über eine Node.js-Middleware-App mit der Kinsta-API. Wenn ein Kontakt Ihr Formular absendet, empfängt die Middleware die Daten, ruft die Kinsta-API auf und stellt automatisch eine WordPress-Site bereit.
Warum Agenturen die Website-Bereitstellung automatisieren sollten
Eine manuelle Site-Einrichtung führt zu Verzögerungen an dem Punkt in einer Kundenbeziehung, an dem die Dynamik am wichtigsten ist. Bei Neuanmeldungen muss jemand eine Hosting-Umgebung erstellen, WordPress konfigurieren, Anmeldeinformationen generieren und diese dem Kunden mitteilen.
MyKinsta macht diese Aufgaben unkompliziert, aber wenn der Prozess davon abhängt, dass ein Teammitglied zur Verfügung steht, um jeden Schritt abzuschließen, kann es dennoch zu Verzögerungen kommen.
Straight out Digital (Sod), eine Digitalagentur, die Hunderte von Kundenseiten auf Kinsta verwaltet, nutzt die Kinsta-API, um benutzerdefinierte interne Tools zu erstellen, die Bereitstellung und Wartung in automatisierte Arbeitsabläufe umwandeln. Anstatt die gleichen Einrichtungsschritte für jede neue Site zu wiederholen, löst Sod den Prozess programmgesteuert aus. Das Ergebnis ist, wie das Team es beschreibt, dass „ein möglicherweise zeitintensiver Vorgang unkompliziert durchgeführt wurde“.
Verbinden HubSpot auf die Kinsta-API erzielt ein ähnliches Ergebnis. Wenn ein Kunde Ihr Anmeldeformular sendet, sendet HubSpot einen Webhook, Ihre Middleware empfängt die Kontaktdaten und die Kinsta-API startet den Website-Erstellungsprozess.
Auf diese Weise erfolgt die Übergabe vom Lead an eine bereitgestellte WordPress-Umgebung automatisch, wodurch der manuelle Aufwand beim Onboarding neuer Kunden reduziert wird.
Erste Schritte
Um diesem Tutorial folgen zu können, benötigen Sie:
- Mindestens eine bestehende Website in deinem Kinsta-Konto. Dadurch wird sichergestellt, dass der API-Zugriff verfügbar ist.
- A HubSpot-Konto mit einem Formular zur Erfassung von Kundenanmeldungen. Beachten Sie, dass Webhook-Workflows nur verfügbar sind bestimmte Premium-HubSpot-Pläne.
- Node.js 18 oder höher lokal installiert.
Du kannst einen Kinsta-API-Schlüssel im MyKinsta-Dashboard generieren. Navigieren Sie zu Firmeneinstellungen > API-Schlüssel und klicken API-Schlüssel erstellen.
Legen Sie ein Ablaufdatum fest, geben Sie dem Schlüssel einen Namen und klicken Sie Erzeugen. Da MyKinsta den neuen API-Schlüssel nur einmal anzeigt, bewahren Sie ihn an einem sicheren Ort auf.
Du brauchst auch deine Firmen-ID. Du kannst dies über die MyKinsta-URL abrufen, während du eingeloggt bist oder indem du eine Anfrage an die stellst /sites Endpunkt, sobald Ihr API-Schlüssel aktiv ist.
Speichern Sie beide Werte in a .env Datei im Stammverzeichnis Ihres Projekts:
KINSTA_API_KEY=your_api_key_here
KINSTA_COMPANY_ID=your_company_id_hereSo integrieren Sie HubSpot mithilfe der Kinsta-API in Kinsta
Ähnlich wie bei der Verwendung der Kinsta-API und Slack können Sie eine Integration einrichten, bei der die Übermittlung eines HubSpot-Formulars einen Webhook auslöst, eine Node.js-App die Kontaktdaten empfängt, die Kinsta-API aufruft, um eine WordPress-Site zu erstellen, und die API abfragt, bis die Site live ist.
Sie bauen dies in fünf Schritten auf: HubSpot-Konfiguration, Middleware-Einrichtung, API-Authentifizierung, Site-Erstellung und Betriebsüberwachung.
1. Richten Sie Ihr HubSpot-Formular und Ihren HubSpot-Workflow ein
Erstellen Sie in Ihrem HubSpot-Dashboard das Formular, das neue Kundenanmeldungen erfasst, oder wählen Sie es aus Marketing > Formulare.
Das Formular benötigt mindestens Felder für einen Vornamen, eine E-Mail-Adresse und einen Firmennamen. Diese Werte werden den Parametern zugeordnet, die Sie später an die Kinsta-API übergeben.
Wenn Ihr Formular fertig ist, navigieren Sie zu Automatisierung > Arbeitsabläufe im Navigationsmenü von HubSpot und klicken Sie auf Workflow erstellen in der oberen rechten Ecke.
Als nächstes wählen Sie aus Fangen Sie bei Null an. Dadurch wird der Workflow-Editor geöffnet. Klicken Sie auf den Auslöser und wählen Sie Formulareinreichung als Registrierungsauslöser.
Wählen Sie dann Ihr Formular aus Formulareinreichung Dropdown-Menü und schließen Sie die Einrichtung ab. HubSpot registriert jetzt einen Kontakt in den Workflow, wenn jemand das Formular absendet.
Wenn der Auslöser aktiviert ist, zeigt der Workflow-Canvas eine neue Aktion an. Klicken Datenoperationen > Senden Sie einen Webhooksetzen Sie die Methode auf POSTund geben Sie vorerst eine Platzhalter-URL ein. Sobald Sie Ihre Node.js-App bereitgestellt haben, aktualisieren Sie die URL auf Ihren Live-Endpunkt.
HubSpot sendet eine JSON-Nutzlast an die Webhook-URL, wenn der Workflow ausgeführt wird. Die Nutzlast umfasst die Eigenschaften des Kontakts, wobei Formularfeldwerte unter ihren internen HubSpot-Eigenschaftsnamen angezeigt werden. Sie können den internen Namen für jedes Feld in HubSpot unter bestätigen Einstellungen > Eigenschaften indem Sie das Objektdetailfenster überprüfen.
2. Erstellen Sie den Middleware-Endpunkt
HubSpot kann einen Webhook an eine URL senden, wenn ein Kontakt Ihr Formular absendet, hat jedoch keine Möglichkeit, direkt mit der Kinsta-API zu kommunizieren. Stattdessen empfängt eine Middleware-Schicht die HubSpot-Nutzlast, extrahiert die benötigten Kontaktdaten, formatiert sie neu und übergibt sie an die Kinsta-API.
Express.js ist ein minimales Node.js-Webframework, das den Aufbau eines solchen HTTP-Servers schnell ermöglicht. Es verarbeitet eingehende Anfragen, ermöglicht Ihnen die Definition von Routen und ermöglicht Ihnen den Zugriff auf den Anfragetext mit minimaler Konfiguration. Sie installieren es, nachdem Sie ein neues Node.js-Projekt initialisiert haben:
npm init -y
npm install express dotenv
express stellt die Server- und Routing-Schicht bereit, während dotenv lädt deine .env Datei in process.env Ihr API-Schlüssel und Ihre Firmen-ID stehen der Anwendung also zur Laufzeit zur Verfügung.
Ihr Server lebt in einem app.js Datei. Es startet Express, weist es an, eingehende Anforderungstexte als JSON zu analysieren, definiert eine Route, die auf POST-Anfragen von HubSpot wartet, und startet den Server auf einem lokalen Port.
Dieses Beispiel geht davon aus Node.js 18 oder höherdas native Abrufunterstützung beinhaltet.
// 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'));
Der app.use(express.json()) Die Zeile weist Express an, eingehende Anforderungstexte als JSON zu analysieren. Ohne es, req.body kehrt zurück undefined.
Die Route liest die Kontaktdaten aus der Webhook-Nutzlast, extrahiert den Firmennamen und die E-Mail-Adresse des Administrators und überprüft, ob beide Werte vorhanden sind, bevor sie fortfährt.
Der ?. Der optionale Verkettungsoperator behandelt Fälle, in denen die Nutzlaststruktur von Ihren Erwartungen abweicht. Anstatt einen Fehler auszulösen, der den Server zum Absturz bringen könnte, kehrt er sicher zurück undefined wenn eine Eigenschaft fehlt.
3. Authentifizieren Sie sich mit der Kinsta-API
Die Kinsta-API verwendet die Bearer-Token-Authentifizierung. Jede von Ihnen gesendete Anfrage enthält Ihren API-Schlüssel Authorization Kopfzeile. Die API verwendet diesen Schlüssel, um Ihr Konto zu identifizieren und Ihre Zugriffsebene zu überprüfen.
Der require('dotenv').config() Rufen Sie oben an app.js lädt deine .env Datei, wenn die Anwendung gestartet wird. Dies ermöglicht process.env.KINSTA_API_KEY zur Laufzeit in Ihren tatsächlichen API-Schlüssel aufzulösen.
Definieren Sie Ihre Basis-URL und Header als Konstanten oben app.js nach dem dotenv Konfiguration:
const KinstaAPIUrl="https://api.kinsta.com/v2";
const headers = {
'Content-Type': 'application/json',
Authorization: `Bearer ${process.env.KINSTA_API_KEY}`
};
Durch die Definition der Header als Konstante bleibt der Code bei jedem API-Aufruf in der Anwendung konsistent und die Schlüsselrotation wird vereinfacht. Wenn Sie den Wert in Ihrer .env-Datei aktualisieren und den Server neu starten, müssen Sie nicht jede Stelle suchen, an der der Schlüssel in Ihrem Code vorkommt.
Dein Firmen-ID geht nicht in die Authorization Kopfzeile. Stattdessen fügen Sie es beim Erstellen einer Site in den Anfragetext ein.
4. Erstellen Sie die WordPress-Site über die Kinsta-API
Wenn die Authentifizierung erfolgt ist, können Sie die Site-Erstellungsanfrage stellen. Die Kinsta-APIs /sites Endpunkt akzeptiert a POST Anfrage mit den Details der Site, die Sie erstellen möchten, und stellt sie zur Bereitstellung in die Warteschlange. Anstatt zu warten, bis die Site bereit ist, bevor sie antwortet, gibt die API sofort eine Referenz zurück, die Sie zum Verfolgen des Vorgangs verwenden.
Im Inneren /new-site Route, ersetzen Sie den Platzhalterkommentar durch Folgendes:
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();Die erforderlichen Parameter sind company, display_name, region, install_mode, admin_email, admin_password, admin_userUnd site_title. Einstellung install_mode Zu 'new' weist die API an, eine Neuinstallation zu erstellen. Der region Der Wert entspricht der Regionskennung eines Kinsta-Rechenzentrums.
Wenn Sie Websites mit vorinstalliertem WooCommerce oder Yoast SEO bereitstellen, unterstützt die API optionale Parameter für beide. Sobald Sie hinzufügen woocommerce: true oder wordpressseo: true Zum Anforderungstext hinzufügt, installiert die API diese Plugins im Rahmen des Site-Erstellungsprozesses. Die bereitgestellte Site wird mit Ihrem Standard-Plugin-Stack geliefert, der bereits vorhanden ist.
Eine erfolgreiche Anfrage gibt a zurück 202 Statuscode, nicht 200. Der 202 teilt Ihnen mit, dass die API die Anfrage angenommen und den Vorgang in die Warteschlange gestellt hat. Dies bedeutet jedoch nicht, dass die Site bereit ist. Die Erstellung der Kinsta-Site läuft asynchron, daher enthält der Antworttext eine operation_id mit dem Sie den Bereitstellungsfortschritt überprüfen, anstatt die fertigen Site-Details zurückzugeben.
5. Überwachen Sie den Betriebsstatus
Da die Site-Erstellung asynchron erfolgt, müssen Sie diese abfragen /operations/{operation_id} Endpunkt, um zu überprüfen, wann die Site bereit ist. Die API gibt bei jedem Aufruf den aktuellen Status des Vorgangs zurück. Wenn sich dieser Status in ändert completedenthält die Antwort Details zur neuen Website.
Nimm das operation_id aus der Site-Erstellungsantwort und übergeben Sie 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(interval);
console.log('Site ready:', result);
}
}, 30000);
};Die Funktion fragt alle 30 Sekunden ab. Die API von Kinsta ermöglicht bis zu 120 Anfragen pro Minutemit einer Untergrenze von 5 Anfragen pro Minute für Endpunkte zur Ressourcenerstellung wie zum Beispiel die Erstellung von Websites. Die Abfrage des Betriebsendpunkts alle 30 Sekunden bleibt innerhalb dieser Grenzen und überprüft gleichzeitig den Fortschritt in angemessenen Abständen.
Sie müssen auch die extrahieren operation_id Wert und übergeben Sie ihn an pollOperation(). Fügen Sie am Ende Folgendes hinzu app.post Route:
const operationId = data.operation_id;
pollOperation(operationId);Sobald der Vorgang abgeschlossen ist, enthält die Antwort die Details der neuen Site. Sie können dies lokal testen, indem Sie es ausführen node app.js in Ihrem Terminal. Ersetzen Sie nach der Bereitstellung der App die Platzhalter-Webhook-URL in Ihrem HubSpot-Workflow durch Ihren Live-Endpunkt.
Automatisieren Sie das Kunden-Onboarding Ihrer Agentur mit HubSpot und Kinsta
Bei laufender Integration beginnt die Bereitstellung einer neuen WordPress-Umgebung, sobald ein Kunde Ihr HubSpot-Anmeldeformular übermittelt. Die Middleware empfängt die Kontaktdaten, übergibt sie an die Kinsta-API und fragt den Vorgang ab, bis die Seite bereit ist. Dieser Ansatz hilft dabei, den ersten Schritt der Website-Einrichtung zu automatisieren, während Ihr Team weiterhin Websites über MyKinsta verwaltet.
Um die Middleware für HubSpot zugänglich zu machen, stellen Sie die Anwendung so bereit, dass sie über einen öffentlichen Endpunkt verfügt. Plattformen wie Sevalla (ein Kinsta-Produkt) kann Hosten Sie Node.js-Anwendungen so was. Sobald die App live ist, aktualisieren Sie die Webhook-URL in Ihrem HubSpot-Workflow so, dass sie auf den bereitgestellten Endpunkt verweist.
Für Kinstas verwaltetes WordPress-Hosting ist der API-Zugriff auf allen Konten verfügbar, sobald Sie einen API-Schlüssel in MyKinsta generieren.
Kinsta
Joel ist ein Frontend-Entwickler, der bei Kinsta als technischer Redakteur arbeitet. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 300 technische Artikel geschrieben, hauptsächlich rund um JavaScript und seine Frameworks.
