Maak een aangepaste HubSpot CRM-kaart zonder code met behulp van Claude Code.

Leer hoe je met APIANT eenvoudig een gepersonaliseerde HubSpot CRM-kaart kunt maken zonder te hoeven programmeren.

Doelgroep: HubSpot-beheerders

HubSpot CRM-kaarten begrijpen

HubSpot CRM-kaarten zijn dynamische tools die uw workflow verbeteren door snelle toegang te bieden tot essentiële informatie en interacties vanuit verschillende bronnen, rechtstreeks binnen HubSpot. Deze kaarten zijn ontworpen om naadloos te integreren met externe apps en het bredere HubSpot-ecosysteem, waardoor gebruikers belangrijke gegevens zoals supporttickets, factuurgegevens of inzichten in aangepaste applicaties kunnen bekijken zonder hun CRM te verlaten. In essentie communiceren ze met API's.

In deze tutorial bouwen we een CRM-kaart die weersinformatie voor je contactpersoon ophaalt en een link naar een weerkaart genereert met behulp van de OpenWeatherMap.org API.

Je eigen HubSpot Public-app maken

Voordat u een aangepaste CRM-kaart kunt maken, moet u het volgende doen: Maak je eigen openbare HubSpot-appJe hoeft het niet openbaar te maken als je dat niet wilt, maar het mag wel! 🤑 Hiermee kun je de HubSpot Hub van je klant koppelen aan het APIANT-platform.

Volg deze eenvoudige stappen om je eigen openbare app te maken:

Als je nog geen HubSpot-ontwikkelaarsaccount hebt, maak er dan een aan via developers.hubspot.com

Je wilt een app bouwen:

Klik op Apps beheren

Klik rechtsboven op 'App maken'.

Geef de app een naam, een beschrijving en eventueel een logo, en klik vervolgens op 'Authenticeren'.

Voer uw omleidings-URL in. Als u een HubSpot Admin Free- of HubSpot Admin Pro-abonnement op APIANT hebt, kunt u apiant.com/oauth invoeren. Als u een tenant- of dedicated-abonnement hebt, voert u de URL van uw server in. Als u deze niet weet, voert u voorlopig uw domeinnaam in. Het systeem zal u deze laten weten wanneer u de app met de APIANT-server verbindt, waarna u deze kunt invoeren.

Voer uw scopes in. Met uw APIANT-account kunt u veel meer doen dan alleen CRM-kaarten maken! (Zoals complete API-apps bouwen). Dit zijn de scopes (zie hieronder) die we aanbevelen op basis van de 24 triggers en 73 acties We hebben momenteel (per 17 maart 2024) de volgende exemplaren beschikbaar.

Scopes bepalen welke machtigingen uw app heeft om toegang te krijgen tot gegevens of acties uit te voeren in HubSpot. Gebruikers die uw app installeren, moeten de scopes goedkeuren die de app aanvraagt. Het is sterk aan te raden om zo min mogelijk scopes te vereisen voor de functionaliteit van uw app.

Sla je app onderaan het scherm op:

Begin met het opzetten van de automatisering in APIANT om uw Data Fetch URL te verkrijgen.

Heb je een APIANT-account nodig? Klik hier Om een gratis HubSpot-beheerdersaccount aan te vragen.

Als u de automatisering liever installeert in plaats van deze helemaal zelf te bouwen, kunt u deze installeren via hier.

Laten we nu beginnen met het bouwen van de automatisering in uw APIANT-account die interactie zal hebben met een CRM-kaart.

Klik in de automatiseringseditor op 'Een automatisering maken'.

Klik op het kruisje bij 'Trigger' en kies 'Een trigger zoeken'.

Zoek naar HTTP-verzoek en selecteer de trigger genaamd HTTP-verzoek ontvangen (direct).

Klik op het plusteken (+) om een nieuwe queryparameter in te voeren.

Voer hs_object_id in als parameter.

Klik op Gegevensvelden ophalen

De URL van de webservice die u in HubSpot moet plakken, wordt vervolgens weergegeven. Klik op het kopieerpictogram om deze naar uw klembord te kopiëren.

Klik rechtsonder in het venster op 'Trigger opslaan':

Voeg een tijdelijke actie toe om de automatisering met de naam 'Uppercase' op te slaan:

Je kunt de actie 'Hoofdletters' leeg laten, we verwijderen deze wanneer we de automatisering opnieuw bewerken.

Geef de automatisering een naam en sla deze op:

We hebben nu alles wat we nodig hebben om de CRM-kaart in HubSpot te maken. Ga terug naar je HubSpot Developer-account om de kaart te maken:

Een CRM-kaart maken in uw openbare app.

Nu je je openbare HubSpot-app hebt ingesteld, is het tijd om een CRM-kaart aan te maken. Hiermee bepaal je de lay-out en de inhoud van je kaart.

Klik op CRM-kaarten onder Functies:

Klik op CRM-kaart maken.

Voer de naam van uw CRM-kaart in. Wij noemen die van ons 'Weer'. Dit wordt een contactrecord en we sturen de hs_object_id van het contactrecord vanuit HubSpot naar uw APIANT-account.

Plak de URL van uw webservice uit uw APIANT-automatisering in het veld 'Data fetch URL'.

Klik op Kaarteigenschappen en voer deze eigenschappen in door op Eigenschap toevoegen te klikken:

Zorg er bij Max voor dat het juiste woningtype voor elk geval overeenkomt, zoals hierboven weergegeven.

Dat is alles! Klik op 'Maken' om uw CRM-kaart te maken:

Je nieuwe HubSpot Public-app koppelen aan je APIANT-account

Voordat we de automatisering kunnen voltooien, moeten we je nieuwe HubSpot Public App koppelen aan je APIANT-account.

Klik op Verbindingen in het menu.

Klik op de knop 'App verbinden'.

Kies HubSpot

Kies Mijn openbare app

Volg de instructies op het scherm (Open je HubSpot-ontwikkelaarsconsole, enz.) - Klik op OK

Je ontvangt nu de URL die je moet invoeren in het veld 'Data Fetch URL' in je openbare app.

Kopieer uw client-ID, clientgeheim en installatie-URL in het dialoogvenster:

Kies het HubSpot-account waarmee u uw openbare app wilt verbinden en klik op 'Account kiezen'.

Keur de verbinding goed en uw openbare app zou nu verbonden moeten zijn met uw APIANT-account.

Voltooi de automatisering in APIANT om met uw CRM-kaart te communiceren.

Bewerk je automatisering in APIANT:

Klik vervolgens op 'Uppercase action' en verwijder dit; het was slechts een tijdelijke aanduiding om het op te slaan.

Het enige dat we nu nog hebben in de automatisering is een trigger (webservice):

Voor ons voorbeeld moeten we nu het volgende toevoegen om gegevens van HubSpot te ontvangen, gegevens op te halen via de OpenWeatherMap API en deze allemaal terug te sturen naar HubSpot:

1. Haal het contact op uit HubSpot om de postcode te verkrijgen.

2. Converteer de postcode naar een geocode met OpenWeatherMap.

3. Ontvang de actuele weersomstandigheden van OpenWeatherMap op basis van de geocode.

4. Vul de eigenschappen van de CRM-kaart in met de gegevens van openweathermap.

5. Maak een menuoptie voor de CRM-kaart waarmee deze naar de weerkaart kan worden doorgestuurd.

6. Retourneer de JSON naar de HubSpot CRM-kaart.

Laten we beginnen!

1. Voeg de HubSpot-actie 'Contactpersoon ophalen' toe:

Koppel de hs_object_id van de trigger aan het veld Contact-ID:

2. Voeg de actie 'Geocoder op basis van postcode' toe.

Koppel de postcode van het HubSpot-contact aan het veld 'Postcode' in de actie 'Geocoderen op postcode'. Als je hiervoor liever de tool 'Selecteren via diagram' gebruikt (wat ik zelf ook doe!), dan kan dat als volgt:

3. Voeg nu de actie 'Huidige omstandigheden ophalen' van Openweathermap toe en koppel de lengte- en breedtegraad van de vorige actie aan de kaart:

4. Voeg de HubSpot-actie CRM-kaart toe: stel de weergavewaarden in:

Voeg de 5 eigenschappen die we in de CRM-kaart hebben aangemaakt toe en koppel (met behulp van het omcirkelde +) aan de respectievelijke waarden die afkomstig zijn van de bovenstaande actie 'Huidige omstandigheden ophalen'.

CRM-kaart eigenschapnaam	Kaartgegevens afkomstig van OpenWeatherMap.
voorwaarden	weersbeschrijving
temperatuur	hoofdtemperatuur
temp_max	hoofdtemperatuur max
temp_min	hoofdtemperatuur min
wind	windsnelheid

Merk op dat dit dezelfde eigenschappen zijn die we aan onze CRM-kaart hebben toegevoegd:

Kies een naam voor de kaart; ik noem hem hier "Weersomstandigheden voor [voornaam op de kaart]". Dit wordt op de kaart weergegeven:

6. Laten we nu de laatste HubSpot-actie toevoegen, genaamd CRM-kaart: iframe-menuoptie toevoegen:

Koppel alle vereiste velden aan de actie en sla deze op.

CRM-kaart: voeg de naam van het iframe-menuoptieveld toe	Voer / Kaart in het veld in
CRM-kaart JSON	Kaart: CRM-kaart JSON van eerdere actie CRM-kaart: weergavewaarden instellen
Menulabel	Weerkaart
URL	https://openweathermap.org/city/ [id uitgezonden door de actie 'Huidige omstandigheden ophalen'] Dit is wat de website van OpenWeatherMap via een iframe zal doorgeven: de weer-stads-ID.
Breedte	1200
Hoogte	1000

7. Voeg tot slot de actie 'HTTP-antwoord retourneren' toe aan het einde van de automatisering om alle gegevens terug te sturen naar HubSpot:

Koppel de CRM-kaart-JSON die door de bovenstaande actie wordt gegenereerd aan de responsgegevens en sla de actie op.

Sla de automatisering op en schakel hem in. Klaar! 🙌

Je nieuwe HubSpot CRM-kaart uitvoeren en testen

Om de kaart te testen, hoeft u alleen maar het contact in HubSpot te vernieuwen en de automatisering automatisch te zien uitvoeren:

Nu kunt u uw eigen CRM-kaart bouwen met elke gewenste logica en API...

Leer van anderen en deel je creatie met andere HubSpot-beheerders. forum.apiant.com

Ben je een HubSpot-beheerder en wil je graag een gratis APIANT-account voor HubSpot-beheerders? Zo ja, dan kun je hieronder een aanvraag indienen:

Voornaam*

Achternaam*

Functietitel*

E-mail*

Mobiel telefoonnummer*

Bedrijfsnaam*

Doeloplossingen

Fred Lumière Medeoprichter en CEO van APIANT