Erstellen Sie mit Claude Code eine benutzerdefinierte HubSpot CRM-Karte ohne Programmierung.

Erfahren Sie, wie Sie mit APIANT ganz einfach und ohne Programmierkenntnisse eine individuelle HubSpot CRM-Karte erstellen können.

Zielgruppe: HubSpot-Administratoren

HubSpot CRM-Karten verstehen

HubSpot CRM-Karten sind dynamische Tools, die Ihren Workflow optimieren, indem sie Ihnen direkt in HubSpot schnellen Zugriff auf wichtige Informationen und Interaktionen aus verschiedenen Quellen ermöglichen. Sie sind so konzipiert, dass sie sich nahtlos in externe Apps und das gesamte HubSpot-Ökosystem integrieren lassen. So können Benutzer wichtige Daten wie Support-Tickets, Rechnungsinformationen oder benutzerdefinierte Anwendungsanalysen einsehen, ohne ihr CRM zu verlassen. Im Wesentlichen interagieren sie mit APIs.

In diesem Tutorial erstellen wir eine CRM-Karte, die Wetterinformationen für Ihren Kontakt abruft und mithilfe der CRM-Technologie zu einer Wetterkarte verlinkt. OpenWeatherMap.org API.

Erstellen Ihrer eigenen öffentlichen HubSpot-App

Bevor Sie eine benutzerdefinierte CRM-Karte erstellen können, müssen Sie Folgendes tun: Erstellen Sie Ihre eigene öffentliche HubSpot-AppSie müssen es nicht öffentlich auflisten, wenn Sie nicht möchten, aber Sie können es! 🤑 Dadurch können Sie den HubSpot Hub Ihres Kunden mit der APIANT-Plattform verbinden.

Um Ihre eigene öffentliche App zu erstellen, folgen Sie diesen einfachen Schritten:

Falls Sie noch kein HubSpot-Entwicklerkonto besitzen, erstellen Sie eines unter developers.hubspot.com

Sie möchten eine App entwickeln:

Klicken Sie auf „Apps verwalten“.

Klicken Sie oben rechts auf „App erstellen“.

Geben Sie der App optional einen Namen, eine Beschreibung und ein Logo und klicken Sie anschließend auf „Auth“.

Geben Sie Ihre Weiterleitungs-URL ein. Wenn Sie einen HubSpot Admin Free- oder HubSpot Admin Pro-Tarif bei APIANT nutzen, können Sie apiant.com/oauth eingeben. Bei einem Tenant- oder Dedicated-Tarif geben Sie die URL Ihres Servers ein. Falls Sie diese nicht kennen, geben Sie vorerst Ihren Domainnamen ein. Das System teilt Ihnen die URL mit, sobald Sie die App mit dem APIANT-Server verbunden haben. Dann können Sie die URL später eingeben.

Geben Sie Ihre Bereiche ein. Mit Ihrem APIANT-Konto können Sie viel mehr als nur CRM-Karten erstellen! (Zum Beispiel komplette API-Anwendungen entwickeln). Daher empfehlen wir Ihnen basierend auf den folgenden Bereichen (siehe unten): 24 Auslöser und 73 Aktionen Wir haben derzeit (Stand: 17. März 2024) folgende Verfügbarkeiten.

Berechtigungen (Scopes) legen fest, welche Zugriffsrechte Ihre App für den Datenzugriff und die Durchführung von Aktionen in HubSpot benötigt. Nutzer, die Ihre App installieren, müssen die angeforderten Berechtigungen genehmigen. Es wird dringend empfohlen, für die Funktionalität Ihrer App so wenige Berechtigungen wie möglich festzulegen.

Speichern Sie Ihre App am unteren Bildschirmrand:

Beginnen Sie mit dem Aufbau der Automatisierung in APIANT, um Ihre Datenabruf-URL zu erhalten.

Benötigen Sie ein APIANT-Konto? Klicken Sie hier Um ein kostenloses HubSpot-Administratorkonto zu beantragen.

Wenn Sie die Automatisierung lieber installieren möchten, anstatt sie von Grund auf neu zu erstellen, können Sie sie installieren von Hier.

Beginnen wir nun mit dem Aufbau der Automatisierung in Ihrem APIANT-Konto, die mit einer CRM-Karte interagieren wird.

Klicken Sie im Automatisierungseditor auf „Automatisierung erstellen“:

Klicken Sie auf das Trigger-Kreuz und wählen Sie „Trigger suchen“:

Suchen Sie nach „HTTP-Anfrage“ und wählen Sie den Auslöser „HTTP-Anfrage empfangen (sofort)“ aus.

Klicken Sie auf das +, um einen neuen Abfrageparameter einzugeben.

Geben Sie hs_object_id als Parameter ein.

Klicken Sie auf „Datenfelder abrufen“.

Die Webdienst-URL, die Sie in HubSpot einfügen müssen, wird anschließend angezeigt. Klicken Sie auf das Kopiersymbol, um sie in Ihre Zwischenablage zu kopieren.

Klicken Sie unten rechts im Fenster auf „Trigger speichern“:

Fügen Sie eine temporäre Aktion hinzu, um die Automatisierung mit dem Namen „Großbuchstaben“ zu speichern:

Sie können das Feld „Großbuchstaben“ leer lassen; wir entfernen es, wenn wir die Automatisierung erneut bearbeiten.

Geben Sie der Automatisierung einen Namen und speichern Sie sie:

Wir haben nun alles, was wir zum Erstellen der CRM-Karte in HubSpot benötigen. Wechseln Sie zurück zu Ihrem HubSpot-Entwicklerkonto, um die Karte zu erstellen:

Erstellen einer CRM-Karte in Ihrer öffentlichen App

Nachdem Sie Ihre öffentliche HubSpot-App eingerichtet haben, ist es nun an der Zeit, eine CRM-Karte zu erstellen. Dadurch werden Layout und Inhalt Ihrer Karte definiert.

Klicken Sie unter Funktionen auf CRM-Karten:

Klicken Sie auf „CRM-Karte erstellen“.

Geben Sie Ihren CRM-Kartennamen ein. Wir nennen unseren „Wetter“. Dies wird ein Kontaktdatensatz sein, und wir senden die Kontaktdatensatz-ID (hs_object_id) von HubSpot an Ihr APIANT-Konto.

Fügen Sie die URL Ihres Webdienstes aus Ihrer APIANT-Automatisierung in das Feld „Datenabruf-URL“ ein.

Klicken Sie auf „Karteneigenschaften“ und geben Sie diese Eigenschaften ein, indem Sie auf „Eigenschaft hinzufügen“ klicken:

Max achtet darauf, dass für jede Eigenschaft der oben angegebene Typ übereinstimmt.

Das war's! Klicken Sie auf „Erstellen“, um Ihre CRM-Karte zu erstellen:

Verbinden Ihrer neuen öffentlichen HubSpot-App mit Ihrem APIANT-Konto

Bevor wir die Automatisierung abschließen, müssen wir Ihre neue HubSpot Public App mit Ihrem APIANT-Konto verbinden.

Klicken Sie im Menü auf Verbindungen.

Klicken Sie auf die Schaltfläche „App verbinden“.

Wählen Sie HubSpot

Meine öffentliche App auswählen

Folgen Sie den Anweisungen auf dem Bildschirm (HubSpot-Entwicklerkonsole öffnen usw.) – Klicken Sie auf OK

Sie erhalten nun Ihre URL, die Sie in Ihrer öffentlichen App unter „Datenabruf-URL“ eingeben müssen.

Kopieren Sie Ihre Client-ID, Ihr Client-Geheimnis und die Installations-URL in das Dialogfeld:

Wählen Sie das HubSpot-Konto aus, mit dem Sie Ihre öffentliche App verbinden möchten, und klicken Sie auf „Konto auswählen“:

Bestätigen Sie die Verbindung, und Ihre öffentliche App sollte nun mit Ihrem APIANT-Konto verbunden sein:

Schließen Sie die Erstellung der Automatisierung in APIANT ab, um mit Ihrer CRM-Karte zu interagieren.

Bearbeiten Sie Ihre Automatisierung in APIANT:

Klicken Sie anschließend auf „Entfernen“ und wählen Sie die Option „Großbuchstaben“. Diese diente lediglich als Platzhalter zum Speichern.

Alles, was wir derzeit in der Automatisierung haben, ist ein Auslöser (Webdienst):

Für unser Beispiel müssen wir nun Folgendes hinzufügen, um Daten von HubSpot zu empfangen, Daten von der OpenWeatherMap-API abzurufen und alles an HubSpot zurückzugeben:

1. Rufen Sie den Kontakt aus HubSpot ab, um die Postleitzahl zu erhalten.

2. Konvertiere die Postleitzahl mit OpenWeatherMap in Geocode.

3. Aktuelle Wetterbedingungen von OpenWeatherMap basierend auf dem Geocode abrufen.

4. Füllen Sie die Eigenschaften der CRM-Karte mit den OpenWeatherMap-Daten.

5. Erstellen Sie eine Menüoption für die CRM-Karte, die mit der Wetterkarte verknüpft ist.

6. JSON an die HubSpot CRM-Karte zurückgeben

Los geht's!

1. Fügen Sie die HubSpot-Aktion „Kontakt abrufen“ hinzu:

Ordnen Sie die hs_object_id aus dem Trigger dem Feld „Kontakt-ID“ zu:

2. Fügen Sie die Aktion „Geokodierung nach Postleitzahl“ hinzu.

Ordnen Sie die Postleitzahl des HubSpot-Kontakts im Feld „Postleitzahl“ der Aktion „Geokodierung nach Postleitzahl“ zu. Falls Sie dafür lieber das Auswahlwerkzeug im Diagramm verwenden möchten (so wie ich!), gehen Sie wie folgt vor:

3. Fügen Sie jetzt die Aktion „Aktuelle Bedingungen abrufen“ von Openweathermap hinzu und ordnen Sie die Längen- und Breitengrade aus der vorherigen Aktion zu:

4. Fügen Sie die HubSpot-Aktion „CRM-Karte“ hinzu: Anzeigewerte festlegen:

Fügen Sie die 5 Eigenschaften, die wir in der CRM-Karte erstellt haben, hinzu und ordnen Sie sie (mithilfe des eingekreisten +) den entsprechenden Werten zu, die aus der oben stehenden Aktion „Aktuelle Bedingungen abrufen“ stammen.

Name der CRM-Karteneigenschaft	Kartierte Daten von OpenWeatherMap
Bedingungen	Wetterbeschreibung
Temperatur	Haupttemperatur
temp_max	Maximale Haupttemperatur
temp_min	Haupttemperatur min
Wind	Windgeschwindigkeit

Beachten Sie, dass es sich hierbei um dieselben Eigenschaften handelt, die wir in unserer CRM-Karte hinzugefügt haben:

Wählen Sie einen Namen für die Karte. Hier nenne ich sie „Wetterbedingungen für [eingetragener Vorname]“. Dies wird an folgender Stelle auf der Karte angezeigt:

6. Fügen wir nun die letzte HubSpot-Aktion namens CRM-Karte hinzu: iFrame-Menüoption anhängen:

Ordnen Sie alle erforderlichen Felder in der Aktion zu und speichern Sie diese.

CRM-Karte: iFrame-Menüoptionsfeldnamen anhängen	Geben Sie „Karte“ in das Feld ein.
CRM-Karte JSON	Karte: CRM-Karte JSON aus vorherigen Aktionen CRM-Karte: Anzeigewerte festlegen
Menübezeichnung	Wetterkarte
URL	https://openweathermap.org/city/ [ID, die von der Aktion "Aktuelle Bedingungen abrufen" ausgegeben wird] Dies wird die Wetter-Stadt-ID der OpenWeatherMap-Website in einem iFrame übergeben.
Breite	1200
Höhe	1000

7. Fügen Sie abschließend am Ende der Automatisierung die Aktion „HTTP-Antwort zurückgeben“ hinzu, um alle Daten an HubSpot zurückzusenden:

Ordnen Sie die von der obigen Aktion ausgegebene CRM-Karten-JSON den Antwortdaten zu und speichern Sie die Aktion.

Speichere die Automatisierung und aktiviere sie. Fertig! 🙌

Ausführen und Testen Ihrer neuen HubSpot CRM-Karte

Um die Karte zu testen, aktualisieren Sie einfach den Kontakt in HubSpot und beobachten Sie, wie die Automatisierung automatisch ausgeführt wird:

Jetzt können Sie Ihre eigene CRM-Karte mit beliebiger Logik und API erstellen…

Lerne von anderen und teile deine Kreation mit anderen HubSpot-Administratoren auf forum.apiant.com

Sind Sie HubSpot-Administrator und möchten einen kostenlosen APIANT-Account für HubSpot-Administratoren? Dann können Sie unten einen Antrag einreichen:

Vorname*

Nachname*

Berufsbezeichnung*

E-Mail*

Mobiltelefonnummer*

Name der Firma*

Ziellösungen

Fred Lumière Mitbegründer und CEO von APIANT