Создайте собственную карточку CRM HubSpot без написания кода, используя код Клода.

Узнайте, как легко создать персонализированную карточку HubSpot CRM без программирования с помощью APIANT.

Целевая аудитория: администраторы HubSpot

Понимание карточек HubSpot CRM

Карточки HubSpot CRM — это динамические инструменты, которые оптимизируют рабочий процесс, обеспечивая быстрый доступ к важной информации и взаимодействиям из различных источников непосредственно в HubSpot. Разработанные для бесшовной интеграции с внешними приложениями и более широкой экосистемой HubSpot, эти карточки позволяют пользователям просматривать ключевые данные, такие как заявки в службу поддержки, платежную информацию или пользовательские аналитические данные приложений, не покидая свою CRM-систему. По сути, они взаимодействуют с API.

В этом уроке мы создадим карточку CRM, которая будет получать информацию о погоде для вашего контакта и ссылаться на карту погоды с помощью... OpenWeatherMap.org API.

Создание собственного общедоступного приложения HubSpot.

Прежде чем создавать пользовательские карточки CRM, необходимо выполнить следующие действия: создайте собственное общедоступное приложение HubSpotВы можете не публиковать это в открытом доступе, если не хотите, но можете! 🤑 Это позволит вам подключить HubSpot Hub вашего клиента к платформе APIANT.

Чтобы создать собственное общедоступное приложение, выполните следующие простые шаги:

Если у вас нет учетной записи разработчика HubSpot, создайте ее по адресу: developers.hubspot.com

Вы хотите создать приложение:

Нажмите «Управление приложениями».

Нажмите «Создать приложение» в правом верхнем углу.

При желании дайте приложению название, описание и логотип, затем нажмите «Авторизация».

Введите URL-адрес перенаправления. Если вы используете тарифный план HubSpot Admin Free или HubSpot Admin Pro на APIANT, вы можете ввести apiant.com/oauth. Если вы используете тарифный план для арендаторов или выделенных серверов, введите URL-адрес вашего сервера. Если вы его не знаете, пока введите доменное имя, и система сообщит вам об этом при подключении приложения к серверу APIANT, после чего вы сможете вернуться и ввести его.

Введите ваши области действия (Scopes). Ваша учетная запись APIANT позволит вам делать гораздо больше, чем просто создавать CRM-карты! (Например, разрабатывать полноценные API-приложения). Поэтому мы рекомендуем следующие области действия (см. ниже), исходя из ваших потребностей. 24 триггера и 73 действия В настоящее время у нас есть в наличии (по состоянию на 17 марта 2024 г.).

Области действия (scopes) определяют разрешения, которые ваше приложение имеет для доступа к данным или выполнения действий в HubSpot. Пользователи, устанавливающие ваше приложение, должны подтвердить запрашиваемые им области действия. Настоятельно рекомендуется запрашивать как можно меньше областей действия для обеспечения функциональности вашего приложения.

Сохраните приложение внизу экрана:

Начните создавать автоматизацию в APIANT для получения URL-адреса для получения данных.

Вам нужна учетная запись APIANT? Кликните сюда чтобы подать заявку на бесплатный административный аккаунт HubSpot.

Если вы предпочитаете установить автоматизацию самостоятельно, а не создавать её с нуля, вы можете установить её следующим образом: здесь.

Давайте теперь начнем создавать автоматизацию в вашем аккаунте APIANT, которая будет взаимодействовать с карточкой CRM.

В редакторе автоматизации нажмите «Создать автоматизацию»:

Нажмите на крестик «Триггер» и выберите «Найти триггер»:

Найдите HTTP-запрос и выберите триггер с названием «Получен HTTP-запрос (мгновенно)».

Нажмите кнопку «+», чтобы ввести новый параметр запроса.

Введите hs_object_id в качестве параметра.

Нажмите «Получить поля данных».

После этого отобразится URL-адрес веб-сервиса, который необходимо вставить в HubSpot. Нажмите значок копирования, чтобы скопировать его в буфер обмена.

Нажмите кнопку «Сохранить триггер» в правом нижнем углу окна:

Добавьте временное действие для сохранения автоматизации под названием Uppercase:

Поле "Верхний регистр" можно оставить пустым, мы удалим его при повторном редактировании автоматизации.

Присвойте автоматизации имя и сохраните её:

Теперь у нас есть все необходимое для создания карточки CRM в HubSpot. Вернитесь в свою учетную запись разработчика HubSpot, чтобы создать карточку:

Создание карточки CRM в вашем общедоступном приложении

Теперь, когда ваше общедоступное приложение HubSpot настроено, пришло время создать карточку CRM. Она определит макет и содержимое вашей карточки.

Нажмите на карточки CRM в разделе «Функции»:

Нажмите «Создать карточку CRM»

Введите название вашей карточки CRM. Мы назовем ее «Погода». Это будет запись контакта, и мы просто отправим hs_object_id записи контакта из HubSpot в ваш аккаунт APIANT.

Вставьте URL-адрес веб-сервиса из вашей автоматизации APIANT в поле «URL-адрес получения данных».

Нажмите на «Свойства карточки» и введите следующие свойства, нажав «Добавить свойство»:

Убедитесь, что тип недвижимости для каждого объекта совпадает с указанным выше.

Вот и всё! Нажмите «Создать», чтобы создать карточку CRM:

Подключение вашего нового общедоступного приложения HubSpot к вашей учетной записи APIANT.

Прежде чем завершить создание автоматизации, нам необходимо подключить ваше новое общедоступное приложение HubSpot к вашей учетной записи APIANT.

В меню выберите «Подключения».

Нажмите кнопку «Подключить приложение».

Выберите HubSpot

Выберите мое общедоступное приложение

Следуйте инструкциям на экране (откройте консоль разработчика HubSpot и т. д.) — нажмите ОК.

Теперь вы получите URL-адрес, который нужно ввести в поле "URL-адрес получения данных" в вашем общедоступном приложении.

Скопируйте свой идентификатор клиента (Client ID) и секретный ключ клиента (Client Secret), а также URL-адрес установки (Install URL) в диалоговом окне:

Выберите учетную запись HubSpot, к которой вы хотите подключить свое общедоступное приложение, и нажмите «Выбрать учетную запись»:

Подтвердите подключение, и ваше общедоступное приложение должно быть подключено к вашей учетной записи APIANT:

Завершите создание автоматизации в APIANT для взаимодействия с вашей CRM-карточкой.

Редактируйте свою автоматизацию в APIANT:

Затем щелкните и удалите действие Uppercase, которое было всего лишь заполнителем для сохранения.

В автоматизации у нас сейчас есть только триггер (веб-сервис):

В нашем примере нам теперь нужно добавить следующее, чтобы получать данные из HubSpot, извлекать данные из API openweathermap и возвращать их все в HubSpot:

1. Чтобы получить почтовый индекс, воспользуйтесь функцией поиска контакта в HubSpot.

2. Преобразуйте почтовый индекс в геокод с помощью openweathermap

3. Получите актуальные погодные условия с помощью OpenWeatherMap на основе геокода.

4. Заполните свойства карточки CRM данными из OpenWeatherMap.

5. Добавьте пункт меню для карточки CRM, который будет ссылаться на карту погоды.

6. Верните JSON-данные в карточку CRM HubSpot.

Давайте начнём!

1. Добавьте действие HubSpot под названием «Получить контакт»:

Сопоставьте значение hs_object_id из триггера в поле Contact ID:

2. Добавьте действие под названием «Геокодирование по почтовому индексу».

В действии «Геокодирование по почтовому индексу» сопоставьте почтовый индекс из контакта HubSpot с этим индексом. Если вы предпочитаете использовать для этого инструмент «Выбор по диаграмме» (я так делаю!), вот как это сделать:

3. Теперь добавьте действие «Получить текущие условия» из Openweathermap и отобразите на карте долготу и широту из предыдущего действия:

4. Добавьте действие HubSpot под названием CRM Card: установите значения для отображения:

Добавьте 5 свойств, которые мы создали в карточке CRM, и сопоставьте их (используя обведенный кружком +) с соответствующими значениями, полученными в результате действия «Получить текущие условия» выше.

Название свойства карточки CRM	Данные для карты взяты из OpenWeatherMap.
условия	описание погоды
температура	основной температурный
temp_max	максимальная основная температура
temp_min	основная температура мин
ветер	скорость ветра

Обратите внимание, что это те же самые свойства, которые мы добавили в нашу CRM-карту:

Выберите название для карточки. Я, например, назвал её «Погодные условия для [имя на карте]». Вот как это будет отображаться на карточке:

6. Теперь добавим последнее действие HubSpot под названием «Карточка CRM»: добавить пункт меню iframe:

Сопоставьте все необходимые поля в действии и сохраните его.

Карточка CRM: добавить имя поля в меню iframe	Введите / Сопоставьте в поле
JSON-файл карточки CRM	Карта: JSON-файл карточки CRM из предыдущего действия Карточка CRM: установка отображаемых значений
Метка меню	Карта погоды
URL	https://openweathermap.org/city/ [id, полученный в результате действия «Получить текущие условия»] Вот что будет передаваться через веб-сайт openweathermap с идентификатором города, используемым для отображения погоды, в iframe.
Ширина	1200
Высота	1000

7. Наконец, добавьте в конец автоматизации действие под названием «Вернуть HTTP-ответ», чтобы отправить все данные обратно в HubSpot:

В поле "Ответ" вставьте JSON-данные карточки CRM, полученные в результате выполнения указанного выше действия, и сохраните действие.

Сохраните автоматизацию и включите её. Готово! 🙌

Запуск и тестирование новой карточки HubSpot CRM

Чтобы проверить работу карточки, просто обновите контакт в HubSpot и наблюдайте, как автоматизация запускается автоматически:

Теперь вы можете создавать собственные CRM-карты с любой логикой и API…

Учитесь у других и делитесь своими разработками с другими администраторами HubSpot. forum.apiant.com

Вы являетесь администратором HubSpot и хотели бы получить бесплатный аккаунт APIANT для администраторов HubSpot? Если да, вы можете подать заявку ниже:

Имя*

Фамилия*

Должность*

Электронная почта*

Номер мобильного телефона*

Название компании*

Целевые решения

Фред Люмьер Соучредитель и генеральный директор APIANT