Crea una scheda CRM personalizzata per HubSpot senza scrivere codice utilizzando Claude Code.

Scopri come creare facilmente una scheda CRM personalizzata per HubSpot senza bisogno di programmazione con APIANT.

Pubblico di destinazione: amministratori di HubSpot

Comprendere le schede CRM di HubSpot

Le schede CRM di HubSpot sono strumenti dinamici che migliorano il flusso di lavoro fornendo un accesso rapido a informazioni e interazioni essenziali provenienti da diverse fonti, direttamente all'interno di HubSpot. Progettate per integrarsi perfettamente con app esterne e con l'intero ecosistema HubSpot, queste schede consentono agli utenti di visualizzare dati chiave come ticket di supporto, informazioni di fatturazione o approfondimenti personalizzati sulle applicazioni senza uscire dal CRM. In sostanza, interagiscono con le API.

Per questo tutorial creeremo una scheda CRM che recupera le informazioni meteo per il tuo contatto e si collega a una mappa meteo utilizzando OpenWeatherMap.org API.

Creare la propria app pubblica HubSpot

Prima di poter creare una scheda CRM personalizzata, è necessario crea la tua app pubblica HubSpotNon sei obbligato a pubblicarlo se non vuoi, ma puoi farlo! 🤑 Questo ti permetterà di collegare l'HubSpot del tuo cliente alla piattaforma APIANT.

Per creare la tua app pubblica, segui questi semplici passaggi:

Se non hai un account sviluppatore HubSpot, creane uno all'indirizzo developers.hubspot.com

Vuoi creare un'app:

Fai clic su Gestisci app.

Fai clic su Crea app in alto a destra

Se vuoi, puoi assegnare un nome all'app, una descrizione e un logo, quindi fai clic su Autentica.

Inserisci il tuo URL di reindirizzamento. Se utilizzi un piano HubSpot Admin Free o HubSpot Admin Pro su APIANT, puoi inserire apiant.com/oauth. Se utilizzi un piano tenant o dedicato, inserisci l'URL del tuo server. Se non lo conosci, inserisci per ora il nome del tuo dominio; il sistema te lo comunicherà quando connetterai l'app al server APIANT, momento in cui potrai inserirlo nuovamente.

Inserisci i tuoi ambiti. Il tuo account APIANT ti permetterà di fare molto di più che semplici schede CRM! (Come creare app API complete). Quindi questi sono gli ambiti (vedi sotto) che consigliamo in base a 24 trigger e 73 azioni che abbiamo attualmente a disposizione (al 17 marzo 2024).

Gli ambiti (scope) determinano le autorizzazioni che la tua app ha per accedere ai dati o eseguire azioni in HubSpot. Chi installa la tua app deve approvare gli ambiti richiesti. Si consiglia vivamente di ridurre al minimo il numero di ambiti necessari per le funzionalità dell'app.

Salva la tua app in fondo allo schermo:

Inizia a creare l'automazione in APIANT per ottenere l'URL di recupero dati.

Hai bisogno di un account APIANT? Clicca qui per richiedere un account amministratore HubSpot gratuito.

Se preferisci installare l'automazione invece di crearla da zero, puoi installarla da Qui.

Iniziamo ora a creare l'automazione nel tuo account APIANT che interagirà con una scheda CRM.

Nell'Editor di automazione, fai clic su Crea un'automazione:

Fai clic sulla croce del trigger e scegli Trova un trigger:

Cerca Richiesta HTTP e seleziona il trigger denominato Richiesta HTTP ricevuta (istantanea)

Fai clic sul + per inserire un nuovo parametro di query.

Inserire hs_object_id come parametro

Fai clic su Recupera campi dati.

Verrà visualizzato l'URL del servizio web che devi incollare in HubSpot. Fai clic sull'icona di copia per copiarlo negli appunti.

Fai clic su Salva trigger in basso a destra della finestra:

Aggiungi un'azione temporanea per salvare l'automazione denominata Uppercase:

Puoi lasciare vuoto il campo "Azione maiuscola", lo rimuoveremo quando modificheremo nuovamente l'automazione.

Assegna un nome all'automazione e salvala:

Ora abbiamo tutto il necessario per creare la scheda CRM in HubSpot. Torna al tuo account sviluppatore HubSpot per creare la scheda:

Creazione di una scheda CRM nella tua app pubblica

Ora che hai configurato la tua app pubblica HubSpot, è il momento di creare una scheda CRM. Questa definirà il layout e il contenuto della tua scheda.

Fai clic su Schede CRM nella sezione Funzionalità:

Fai clic su Crea scheda CRM

Inserisci il nome della tua scheda CRM. Noi la chiameremo Meteo. Si tratterà di un record di contatto e invieremo semplicemente l'hs_object_id del record di contatto da HubSpot al tuo account APIANT.

Incolla l'URL del tuo servizio web dall'automazione APIANT nel campo URL di recupero dati.

Fai clic su Proprietà scheda e inserisci le seguenti proprietà facendo clic su Aggiungi proprietà:

Max si assicura di abbinare il tipo di proprietà per ciascuno come mostrato sopra.

Ecco fatto! Clicca su Crea per creare la tua scheda CRM:

Collegamento della nuova app pubblica HubSpot al tuo account APIANT

Prima di completare la creazione dell'automazione, dobbiamo collegare la tua nuova app pubblica HubSpot al tuo account APIANT.

Fai clic su Connessioni nel menu

Fai clic sul pulsante Connetti app

Scegli HubSpot

Scegli la mia app pubblica

Segui le istruzioni sullo schermo (Apri la console per sviluppatori di HubSpot, ecc.) - Fai clic su OK

Ora riceverai l'URL da inserire nel campo "URL di recupero dati" nella tua app pubblica.

Copia il tuo ID client e il tuo segreto client e l'URL di installazione nella finestra di dialogo:

Scegli l'account HubSpot a cui vuoi collegare la tua app pubblica e fai clic su Scegli account:

Approva la connessione e la tua app pubblica dovrebbe ora essere collegata al tuo account APIANT:

Completa la configurazione dell'automazione in APIANT per interagire con la tua scheda CRM.

Modifica la tua automazione in APIANT:

Quindi fai clic e rimuovi l'azione Uppercase, che era solo un segnaposto per salvarla.

Al momento, nell'automazione abbiamo solo un trigger (servizio web):

Nel nostro esempio, ora dobbiamo aggiungere quanto segue per ricevere i dati da HubSpot, recuperare i dati dall'API di OpenWeatherMap e restituirli tutti a HubSpot:

1. Recupera il contatto da HubSpot per ottenere il codice postale

2. Converti il codice postale in geocodice con OpenWeatherMap

3. Ottieni le condizioni meteorologiche attuali da OpenWeatherMap in base al geocodice

4. Popola le proprietà della scheda CRM con i dati di OpenWeatherMap.

5. Crea un'opzione di menu per la scheda CRM che si colleghi alla mappa meteorologica.

6. Restituisci il JSON alla scheda CRM di HubSpot

Iniziamo!

1. Aggiungi l'azione HubSpot denominata Ottieni contatto:

Mappa l'hs_object_id dal trigger nel campo ID contatto:

2. Aggiungi l'azione denominata Geocodifica per codice postale

Inserisci il codice postale del contatto HubSpot nel campo "Codice postale" dell'azione "Geocodifica tramite codice postale". Se preferisci utilizzare lo strumento "Seleziona tramite diagramma" per farlo (io lo faccio!), ecco come:

3. Aggiungi ora l'azione "Ottieni le condizioni attuali" da Openweathermap e mappa la longitudine e la latitudine ottenute dall'azione precedente:

4. Aggiungi l'azione HubSpot denominata CRM Card: imposta i valori di visualizzazione:

Aggiungi le 5 proprietà che abbiamo creato nella scheda CRM e mappale (utilizzando il + cerchiato) ai rispettivi valori provenienti dall'azione precedente Ottieni condizioni attuali.

nome della proprietà della scheda CRM	Dati cartografici da OpenWeatherMap
condizioni	descrizione del tempo
temperatura	temperatura principale
temperatura_massima	temperatura massima principale
temp_min	temperatura principale min
vento	velocità del vento

Notate che si tratta delle stesse proprietà che abbiamo aggiunto nella nostra scheda CRM:

Scegli il nome che vuoi dare alla scheda, io qui la chiamo "Condizioni meteo per [nome mappato]". Ecco dove verrà visualizzata nella scheda:

6. Ora aggiungiamo l'ultima azione di HubSpot chiamata CRM Card: aggiungi l'opzione del menu iframe:

Mappa tutti i campi richiesti nell'azione e salvala.

Scheda CRM: aggiungi il nome del campo dell'opzione del menu iframe	Inserisci / Mappa nel campo
Scheda CRM JSON	Mappa: Scheda CRM JSON dalle azioni precedenti Scheda CRM: imposta i valori visualizzati
Etichetta del menu	Mappa meteorologica
URL	https://openweathermap.org/city/ [id emesso dall'azione Ottieni condizioni attuali] Questo è ciò che verrà trasmesso dal sito web di OpenWeatherMap con l'ID della città meteo in un iframe
Larghezza	1200
Altezza	1000

7. Infine, aggiungi l'azione denominata "Restituisci risposta HTTP" alla fine dell'automazione per inviare tutti i dati a HubSpot:

Mappa il JSON della scheda CRM generato dall'azione precedente nei dati di risposta e salva l'azione.

Salva l'automazione e attivala. Fatto! 🙌

Esecuzione e test della nuova scheda HubSpot CRM

Per testare la scheda, è sufficiente aggiornare il contatto in HubSpot e osservare l'automazione avviarsi automaticamente:

Ora puoi creare la tua scheda CRM personalizzata con qualsiasi logica e API...

Impara dagli altri e condividi la tua creazione con altri amministratori HubSpot su forum.apiant.com

Sei un amministratore HubSpot e desideri un account APIANT gratuito per amministratori HubSpot? In tal caso, puoi inviare la tua richiesta qui sotto:

Nome di battesimo*

Cognome*

Titolo professionale*

E-mail*

Numero di cellulare*

Nome dell'azienda*

Soluzioni mirate

Fred Lumière Cofondatore e CEO di APIANT