Bygg ett anpassat HubSpot CRM-kort utan kod med Claude Code

Lär dig hur du enkelt skapar ett anpassat HubSpot CRM-kort utan någon kodning med APIANT.

Målgrupp: HubSpot-administratör

Förstå HubSpot CRM-kort

HubSpot CRM-kort är dynamiska verktyg som förbättrar ditt arbetsflöde genom att ge snabb åtkomst till viktig information och interaktioner från olika källor, direkt inom HubSpot. Dessa kort är utformade för att sömlöst integreras med externa appar och det bredare HubSpot-ekosystemet, och låter användare se viktig data som supportärenden, faktureringsinformation eller anpassade applikationsinsikter utan att lämna sitt CRM. I huvudsak interagerar de med API:er.

I den här handledningen ska vi bygga ett CRM-kort som hämtar väderinformation för din kontakt och länkar till en väderkarta med hjälp av OpenWeatherMap.org API.

Skapa din egen HubSpot Public-app

Innan du kan skapa ett anpassat CRM-kort måste du skapa din egen publika HubSpot-appDu behöver inte lista det offentligt om du inte vill, men det kan du! 🤑 Detta gör att du kan ansluta din klients HubSpot Hub till APIANT-plattformen.

För att skapa din egen offentliga app, följ dessa enkla steg:

Om du inte har ett HubSpot-utvecklarkonto, skapa ett på utvecklare.hubspot.com

Du vill bygga en app:

Klicka på Hantera appar

Klicka på Skapa app uppe till höger

Ge appen ett namn, en beskrivning och en logotyp om du vill, klicka sedan på Aut.

Ange din omdirigerings-URL. Om du har ett HubSpot Admin Free- eller HubSpot Admin Pro-abonnemang på APIANT kan du ange apiant.com/oauth. Om du har ett hyresgäst- eller dedikerat abonnemang anger du din servers URL. Om du inte vet det anger du ditt domännamn för tillfället, så kommer systemet att meddela dig när du ansluter appen till APIANT-servern, och då kan du gå tillbaka och ange det.

Ange dina omfattningar. Ditt APIANT-konto låter dig göra mycket mer än bara CRM-kort! (Som att bygga kompletta API-appar). Så det här är de omfattningar (se nedan) som vi rekommenderar baserat på 24 utlösare och 73 åtgärder vi har för närvarande tillgängliga (från och med den 17 mars 2024).

Scopes avgör vilka behörigheter din app har för att komma åt data eller utföra åtgärder i HubSpot. Personer som installerar din app måste godkänna de scopes den begär. Det rekommenderas starkt att kräva så få scopes som möjligt för din apps funktionalitet.

Spara din app längst ner på skärmen:

Börja bygga automatiseringen i APIANT för att hämta din datahämtnings-URL

Behöver du ett APIANT-konto? Klicka här för att ansöka om ett gratis HubSpot Admin-konto.

Om du föredrar att installera automatiseringen istället för att bygga den från grunden kan du installera den från här.

Nu börjar vi bygga automatiseringen i ditt APIANT-konto som kommer att interagera med ett CRM-kort.

I automatiseringsredigeraren klickar du på Skapa en automatisering:

Klicka på krysset Trigger och välj Hitta en trigger:

Sök efter HTTP-begäran och välj utlösaren som heter HTTP-begäran mottagen (omedelbar)

Klicka på + för att ange en ny frågeparameter

Ange hs_object_id som en parameter

Klicka på Hämta datafält

Webbtjänstens URL som du behöver klistra in i HubSpot visas då. Klicka på kopieringsikonen för att kopiera den till ditt urklipp.

Klicka på Spara utlösare längst ner till höger i fönstret:

Lägg till en tillfällig åtgärd för att spara automatiseringen som heter Versaler:

Du kan lämna åtgärden Versaler tom, vi tar bort den när vi redigerar automatiseringen igen.

Ge automatiseringen ett namn och spara den:

Nu har vi allt vi behöver för att skapa CRM-kortet i HubSpot. Växla tillbaka till ditt HubSpot Developer-konto för att skapa kortet:

Skapa ett CRM-kort i din offentliga app

Nu när du har konfigurerat din publika HubSpot-app är det dags att skapa ett CRM-kort. Detta kommer att definiera layouten och innehållet på ditt kort.

Klicka på CRM-kort under Funktioner:

Klicka på Skapa CRM-kort

Ange ditt CRM-kortnamn. Vi kallar vårt Väder. Detta blir en kontaktpost, och vi skickar helt enkelt kontaktposten hs_object_id från HubSpot till ditt APIANT-konto.

Klistra in din webbtjänst-URL från din APIANT-automatisering i datahämtnings-URL:en.

Klicka på Kortegenskaper och ange dessa egenskaper genom att klicka på Lägg till egenskap:

Se till att matcha fastighetstypen för varje som visas ovan.

Det var allt! Klicka på Skapa för att skapa ditt CRM-kort:

Ansluta din nya HubSpot Public-app till ditt APIANT-konto

Innan vi är klara med att bygga automatiseringen behöver vi ansluta din nya HubSpot Public App till ditt APIANT-konto.

Klicka på Anslutningar i menyn

Klicka på knappen Anslut appen

Välj HubSpot

Välj min offentliga app

Följ instruktionerna på skärmen (öppna din HubSpot-utvecklarkonsol, etc.) - Klicka på OK

Du får nu din URL att ange i datahämtnings-URL:en i din offentliga app

Kopiera ditt klient-ID och klienthemlighet samt installations-URL i dialogrutan:

Välj vilket HubSpot-konto du vill ansluta din offentliga app till och klicka på Välj konto:

Godkänn anslutningen och din offentliga app bör nu vara ansluten till ditt APIANT-konto:

Slutför byggandet av automatiseringen i APIANT för att interagera med ditt CRM-kort

Redigera din automatisering i APIANT:

Klicka sedan på och ta bort åtgärden Versaler som bara var en platshållare för att spara den.

Allt vi har nu i automatiseringen är en trigger (webbtjänst):

I vårt exempel behöver vi nu lägga till följande för att ta emot data från HubSpot, hämta data från openweathermap API och returnera allt till HubSpot:

1. Hämta kontakten från HubSpot för att få postnumret

2. Konvertera postnummer till geokod med openweathermap

3. Få aktuella väderförhållanden från openweathermap baserat på geokoden

4. Fyll CRM-kortegenskaperna med openweathermap-data

5. Skapa ett menyalternativ för CRM-kortet att länka till väderkartan

6. Returnera JSON till HubSpot CRM-kortet

Nu sätter vi igång!:

1. Lägg till HubSpot-åtgärden som heter Hämta kontakt:

Mappa hs_object_id från utlösaren i fältet Kontakt-ID:

2. Lägg till åtgärden som heter Geokoda efter postnummer

Mappa postnumret från HubSpot-kontakten i fältet Postnummer i åtgärden Geokod efter postnummer. Om du föredrar att använda verktyget välj via diagram för att göra detta (det gör jag!), så här gör du:

3. Lägg till åtgärden Hämta aktuella förhållanden från Openweathermap nu och kartlägg longitud och latitud från föregående åtgärd:

4. Lägg till HubSpot-åtgärden som heter CRM-kort: ange visningsvärden:

Lägg till de 5 egenskaperna vi skapade i CRM-kortet och mappa (med hjälp av det inringade +) till respektive värden som kommer från åtgärden ovan. Hämta aktuella villkor.

CRM-kortegenskapsnamn	Kartlagd data från openweathermap
villkor	väderbeskrivning
temperatur	huvudtemperatur
temp_max	max huvudtemperatur
temp_min	huvudtemperatur min
vind	vindhastighet

Observera att det här är samma egenskaper som vi lade till i vårt CRM-kort:

Välj vad du vill kalla kortet, här kallar jag det "Väderförhållanden för [förnamn på kartan]". Det är här detta kommer att visas på kortet:

6. Nu lägger vi till den sista HubSpot-åtgärden som heter CRM Card: append iframe menyalternativ:

Mappa alla obligatoriska fält i åtgärden och spara den.

CRM-kort: lägg till iframe-menyalternativfältnamn	Ange / Kartlägg i fältet
CRM-kort JSON	Karta: CRM-kort JSON från föregående åtgärd CRM-kort: ange visningsvärden
Menyetikett	Väderkarta
URL	https://openweathermap.org/city/ [id utsänd från åtgärden Hämta aktuella villkor] Detta är vad som kommer att skicka väderstads-ID:t openweathermaps webbplats i iframe.
Bredd	1200
Höjd	1000

7. Lägg slutligen till åtgärden Return HTTP response i slutet av automatiseringen för att skicka all data tillbaka till HubSpot:

Mappa CRM-kort-JSON:en som genereras från åtgärden ovan i svarsdata och spara åtgärden.

Spara automatiseringen och aktivera den. Klar! 🙌

Köra och testa ditt nya HubSpot CRM-kort

För att testa kortet, uppdatera helt enkelt kontakten i HubSpot och se automatiseringen köras automatiskt:

Nu kan du bygga ditt eget CRM-kort med valfri logik och API…

Lär dig av andra och dela din skapelse med andra HubSpot-administratörer på forum.apiant.com

Är du en HubSpot-administratör och vill ha ett gratis APIANT-konto för HubSpot-administratörer? I så fall kan du skicka in en ansökan nedan:

Förnamn*

Efternamn*

Jobbtitel*

E-post*

Mobiltelefonnummer*

Företagsnamn*

Mållösningar

Fred Lumiere Medgrundare och VD för APIANT