Zbuduj niestandardową kartę CRM HubSpot bez kodu, korzystając z Claude Code

Dowiedz się, jak łatwo utworzyć spersonalizowaną kartę HubSpot CRM bez konieczności kodowania za pomocą APIANT.

Grupa docelowa: administrator HubSpot

Zrozumienie kart HubSpot CRM

Karty HubSpot CRM to dynamiczne narzędzia, które usprawniają przepływ pracy, zapewniając szybki dostęp do istotnych informacji i interakcji z różnych źródeł bezpośrednio w HubSpot. Zaprojektowane z myślą o płynnej integracji z aplikacjami zewnętrznymi i szerszym ekosystemem HubSpot, karty te umożliwiają użytkownikom przeglądanie kluczowych danych, takich jak zgłoszenia do pomocy technicznej, informacje rozliczeniowe czy analizy aplikacji niestandardowych, bez opuszczania systemu CRM. Zasadniczo, karty te komunikują się z interfejsami API.

W tym samouczku utworzymy kartę CRM, która będzie pobierać informacje o pogodzie dla Twojego kontaktu i będzie zawierać linki do mapy pogody za pomocą OpenWeatherMap.org API.

Tworzenie własnej aplikacji publicznej HubSpot

Zanim utworzysz niestandardową kartę CRM, musisz: stwórz własną publiczną aplikację HubSpotNie musisz go udostępniać publicznie, jeśli nie chcesz, ale możesz! 🤑 Dzięki temu będziesz mógł połączyć HubSpot Hub swojego klienta z platformą APIANT.

Aby utworzyć własną aplikację publiczną, wykonaj następujące proste kroki:

Jeśli nie masz konta programisty HubSpot, utwórz je na stronie developers.hubspot.com

Chcesz zbudować aplikację:

Kliknij Zarządzaj aplikacjami

Kliknij Utwórz aplikację w prawym górnym rogu

Podaj nazwę aplikacji, opis i logo, jeśli chcesz, a następnie kliknij Autoryzuj

Wprowadź adres URL przekierowania. Jeśli korzystasz z planu HubSpot Admin Free lub HubSpot Admin Pro w APIANT, możesz wpisać adres apiant.com/oauth. Jeśli korzystasz z planu dzierżawy lub planu dedykowanego, wprowadź adres URL swojego serwera. Jeśli go nie znasz, wprowadź na razie nazwę swojej domeny, a system poinformuje Cię o tym po połączeniu aplikacji z serwerem APIANT, kiedy będziesz mógł wrócić i ją wprowadzić.

Wprowadź swoje zakresy. Twoje konto APIANT pozwoli Ci zrobić o wiele więcej niż tylko karty CRM! (Na przykład zbudować kompletne aplikacje API). Oto zakresy (patrz poniżej), które rekomendujemy na podstawie… 24 wyzwalacze i 73 akcje mamy obecnie dostępne (stan na 17 marca 2024 r.).

Zakresy określają uprawnienia, jakie Twoja aplikacja ma do dostępu do danych lub wykonywania działań w HubSpot. Osoby instalujące Twoją aplikację muszą zatwierdzić żądane zakresy. Zdecydowanie zaleca się, aby aplikacja wymagała jak najmniejszej liczby zakresów dla swojej funkcjonalności.

Zapisz swoją aplikację na dole ekranu:

Rozpocznij tworzenie automatyzacji w APIANT, aby uzyskać adres URL pobierania danych

Czy potrzebujesz konta APIANT? Kliknij tutaj aby złożyć wniosek o bezpłatne konto administratora HubSpot.

Jeśli wolisz zainstalować automatyzację zamiast budować ją od podstaw, możesz ją zainstalować z Tutaj.

Zacznijmy teraz tworzyć automatyzację na Twoim koncie APIANT, która będzie współdziałać z kartą CRM.

W Edytorze automatyzacji kliknij Utwórz automatyzację:

Kliknij krzyżyk wyzwalacza i wybierz opcję Znajdź wyzwalacz:

Wyszukaj żądanie HTTP i wybierz wyzwalacz o nazwie Otrzymano żądanie HTTP (natychmiast)

Kliknij +, aby wprowadzić nowy parametr zapytania

Wprowadź hs_object_id jako parametr

Kliknij Pobierz pola danych

Następnie pojawi się adres URL usługi sieciowej, który należy wkleić w HubSpot. Kliknij ikonę kopiowania, aby skopiować go do schowka.

Kliknij Zapisz wyzwalacz w prawym dolnym rogu okna:

Dodaj tymczasową akcję, aby zapisać automatyzację o nazwie Uppercase:

Możesz zostawić akcję Wielkie litery pustą, usuniemy ją, gdy będziemy ponownie edytować automatyzację.

Nadaj automatyzacji nazwę i zapisz ją:

Mamy już wszystko, czego potrzebujemy do utworzenia karty CRM w HubSpot. Wróć do swojego konta programisty HubSpot, aby utworzyć kartę:

Tworzenie karty CRM w aplikacji publicznej

Teraz, gdy masz już skonfigurowaną publiczną aplikację HubSpot, czas utworzyć kartę CRM. To zdefiniuje układ i zawartość Twojej karty.

Kliknij karty CRM w obszarze Funkcje:

Kliknij Utwórz kartę CRM

Wprowadź nazwę swojej karty CRM. My nazwiemy ją „Weather”. Będzie to rekord kontaktu, a my po prostu wyślemy rekord kontaktu „hs_object_id” z HubSpot na Twoje konto APIANT.

Wklej adres URL usługi sieciowej z automatyzacji APIANT w polu Adres URL pobierania danych.

Kliknij Właściwości karty i wprowadź te właściwości, klikając Dodaj właściwość:

Maksymalnie upewnij się, że typ każdej z nich odpowiada typowi nieruchomości, jak pokazano powyżej.

To wszystko! Kliknij „Utwórz”, aby utworzyć kartę CRM:

Łączenie nowej aplikacji publicznej HubSpot z kontem APIANT

Zanim zakończymy tworzenie automatyzacji, musimy połączyć nową publiczną aplikację HubSpot z kontem APIANT.

Kliknij Połączenia w menu

Kliknij przycisk Połącz aplikację

Wybierz HubSpot

Wybierz moją publiczną aplikację

Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie (otwórz konsolę programisty HubSpot itp.) — kliknij OK

Teraz otrzymasz adres URL, który należy wpisać w adresie URL pobierania danych w aplikacji publicznej

Skopiuj swój identyfikator klienta i tajny klucz klienta oraz adres URL instalacji w oknie dialogowym:

Wybierz konto HubSpot, z którym chcesz połączyć swoją aplikację publiczną i kliknij Wybierz konto:

Zatwierdź połączenie, a Twoja aplikacja publiczna powinna zostać połączona z Twoim kontem APIANT:

Zakończ tworzenie automatyzacji w APIANT, aby umożliwić interakcję z kartą CRM

Edytuj swoją automatyzację w APIANT:

Następnie kliknij i usuń akcję Wielkie litery, która była tylko symbolem zastępczym, aby ją zapisać.

Wszystko, co teraz mamy w automatyzacji, to wyzwalacz (usługa internetowa):

W naszym przykładzie musimy teraz dodać poniższy kod, aby odbierać dane z HubSpot, pobierać dane z interfejsu API openweathermap i zwracać je do HubSpot:

1. Pobierz kontakt z HubSpot, aby uzyskać kod pocztowy

2. Konwertuj kod pocztowy na kod geograficzny za pomocą openweathermap

3. Uzyskaj aktualne warunki pogodowe z openweathermap na podstawie Geokodu

4. Wypełnij właściwości karty CRM danymi z openweathermap

5. Utwórz opcję menu dla karty CRM, aby połączyć ją z mapą pogody

6. Zwróć JSON do karty HubSpot CRM

Zaczynajmy!:

1. Dodaj akcję HubSpot o nazwie Pobierz kontakt:

Zamapuj hs_object_id z wyzwalacza w polu Identyfikator kontaktu:

2. Dodaj akcję o nazwie Geokodowanie według kodu pocztowego

Zmapuj kod pocztowy z kontaktu HubSpot w polu Kod pocztowy w akcji „Geokodowanie według kodu pocztowego”. Jeśli wolisz użyć narzędzia „Wybierz za pomocą diagramu” (ja tak robię!), wykonaj następujące kroki:

3. Dodaj akcję Pobierz bieżące warunki z Openweathermap teraz i zamapuj długość i szerokość geograficzną z poprzedniej akcji:

4. Dodaj akcję HubSpot o nazwie Karta CRM: ustaw wartości wyświetlane:

Dodaj 5 właściwości, które utworzyliśmy na karcie CRM i przyporządkuj je (używając zakreślonego znaku +) do odpowiednich wartości pochodzących z powyższej akcji. Pobierz bieżące warunki.

Nazwa właściwości karty CRM	Dane mapowane z openweathermap
warunki	opis pogody
temperatura	główna temperatura
temp_max	maksymalna temperatura główna
temp_min	główna temperatura min
wiatr	prędkość wiatru

Zwróć uwagę, że są to te same właściwości, które dodaliśmy do naszej karty CRM:

Wybierz nazwę, którą chcesz nadać karcie – ja nazywam ją „Warunki pogodowe dla [na mapie imię]”. W tym miejscu na karcie będzie się to wyświetlać:

6. Teraz dodajmy ostatnią akcję HubSpot o nazwie Karta CRM: dodaj opcję menu iframe:

Zmapuj wszystkie wymagane pola w akcji i zapisz ją.

Karta CRM: dołącz nazwę pola opcji menu iframe	Wpisz / Mapuj w polu
Karta CRM JSON	Mapa: Karta CRM JSON z poprzedniej akcji Karta CRM: ustaw wartości wyświetlane
Etykieta menu	Mapa pogody
URL	https://openweathermap.org/city/ [id wyemitowany z akcji Pobierz aktualne warunki] To jest to, co przekaże identyfikator miasta pogodowego witryny openweathermap w ramce iframe
Szerokość	1200
Wysokość	1000

7. Na koniec dodaj akcję o nazwie Zwróć odpowiedź HTTP na końcu automatyzacji, aby odesłać wszystkie dane do HubSpot:

Zmapuj kod JSON karty CRM wyemitowany przez powyższą akcję do danych odpowiedzi i zapisz akcję.

Zapisz automatyzację i włącz ją. Gotowe! 🙌

Uruchamianie i testowanie nowej karty HubSpot CRM

Aby przetestować kartę, wystarczy odświeżyć kontakt w HubSpot i zobaczyć, jak automatyzacja uruchamia się automatycznie:

Teraz możesz zbudować własną kartę CRM z dowolną logiką i API…

Ucz się od innych i dziel się swoją twórczością z innymi administratorami HubSpot forum.apiant.com

Czy jesteś administratorem HubSpot i chciałbyś otrzymać darmowe konto APIANT dla administratorów HubSpot? Jeśli tak, możesz złożyć wniosek poniżej:

Imię*

Nazwisko*

Stanowisko*

E-mail*

Numer telefonu komórkowego*

Nazwa firmy*

Rozwiązania docelowe

Fred Lumiere Współzałożyciel i dyrektor generalny APIANT