בנה כרטיס CRM מותאם אישית של HubSpot ללא קוד באמצעות Claude Code

למד כיצד ליצור בקלות כרטיס CRM מותאם אישית של HubSpot ללא כל קידוד עם APIANT.

קהל יעד: מנהל HubSpot

הבנת כרטיסי HubSpot CRM

כרטיסי CRM של HubSpot הם כלים דינמיים המשפרים את זרימת העבודה שלך על ידי מתן גישה מהירה למידע חיוני ואינטראקציות ממקורות שונים, ישירות בתוך HubSpot. כרטיסים אלה, שנועדו להשתלב בצורה חלקה עם אפליקציות חיצוניות ועם המערכת האקולוגית הרחבה יותר של HubSpot, מאפשרים למשתמשים לצפות בנתונים מרכזיים כגון כרטיסי תמיכה, פרטי חיוב או תובנות אפליקציות מותאמות אישית מבלי לצאת ממערכת ה-CRM שלהם. בעיקרון, הם מקיימים אינטראקציה עם ממשקי API.

עבור מדריך זה נבנה כרטיס CRM אשר יביא מידע על מזג האוויר עבור איש הקשר שלך ויקשר למפת מזג אוויר באמצעות OpenWeatherMap.org ממשק API.

יצירת אפליקציית HubSpot ציבורית משלך

לפני שתוכל ליצור כרטיס CRM מותאם אישית, עליך צור את אפליקציית HubSpot הציבורית שלךאתם לא חייבים לפרסם את זה בפומבי אם אתם לא רוצים, אבל אתם יכולים! 🤑 זה יאפשר לכם לחבר את HubSpot Hub של הלקוח שלכם לפלטפורמת APIANT.

כדי ליצור אפליקציה ציבורית משלך, בצע את השלבים הפשוטים הבאים:

אם אין לך חשבון מפתח HubSpot, צור אחד בכתובת developers.hubspot.com

אתם רוצים לבנות אפליקציה:

לחץ על ניהול אפליקציות

לחץ על צור אפליקציה בצד ימין למעלה

תנו לאפליקציה שם, תיאור ולוגו אם תרצו, לאחר מכן לחצו על אימות

הזן את כתובת האתר שלך להפניה מחדש. אם אתה בתוכנית HubSpot Admin Free או HubSpot Admin Pro ב-APIANT, תוכל להזין את הכתובת apiant.com/oauth. אם אתה בתוכנית Tenant או Dedicated, הזן את כתובת האתר של השרת שלך. אם אינך יודע אותה, הזן את שם הדומיין שלך לעת עתה, והמערכת תודיע לך מתי תחבר את האפליקציה לשרת APIANT ובנקודה זו תוכל לחזור ולהזין אותה.

הזינו את התחומים שלכם. חשבון ה-APIANT שלכם יאפשר לכם לעשות הרבה יותר מסתם כרטיסי CRM! (כמו בניית אפליקציות API שלמות). אז אלו התחומים (ראו להלן) שאנו ממליצים עליהם בהתבסס על... 24 טריגרים ו-73 פעולות יש לנו זמין כעת (נכון ל-17 במרץ 2024).

היקפים קובעים את ההרשאות שיש לאפליקציה שלך לגשת לנתונים או לבצע פעולות ב-HubSpot. אנשים שמתקינים את האפליקציה שלך חייבים לאשר את ההיקפים שהיא מבקשת. מומלץ מאוד לדרוש כמה שפחות היקפים לתפקוד האפליקציה שלך.

שמור את האפליקציה שלך בתחתית המסך:

התחל לבנות את האוטומציה ב-APIANT כדי לקבל את כתובת ה-URL של אחזור הנתונים שלך.

האם אתה צריך חשבון APIANT? לחץ כאן כדי להגיש בקשה לחשבון מנהל HubSpot בחינם.

אם אתם מעדיפים להתקין את האוטומציה במקום לבנות אותה מאפס, תוכלו להתקין אותה מ... כָּאן.

בואו נתחיל עכשיו לבנות את האוטומציה בחשבון ה-APIANT שלכם שתקיים אינטראקציה עם כרטיס CRM.

בעורך האוטומציה, לחץ על צור אוטומציה:

לחצו על הצלב טריגר ובחרו חפש טריגר:

חפש בקשת HTTP ובחר את הטריגר שנקרא בקשת HTTP שהתקבלה (מיידית)

לחץ על ה-+ כדי להזין פרמטר שאילתה חדש

הזן hs_object_id כפרמטר

לחץ על אחזור שדות נתונים

כתובת ה-URL של שירות האינטרנט שעליך להדביק ב-HubSpot תוצג לאחר מכן. לחץ על סמל ההעתקה כדי להעתיק אותה ללוח הגזירים שלך.

לחץ על שמור טריגר בפינה הימנית התחתונה של החלון:

הוסף פעולה זמנית כדי לשמור את האוטומציה שנקראת Uppercase:

ניתן להשאיר את הפעולה אותיות גדולות ריקה, נסיר אותה כשנערוך מחדש את האוטומציה.

תנו שם לאוטומציה ושמרו אותה:

כעת יש לנו את כל מה שאנחנו צריכים כדי ליצור את כרטיס ה-CRM ב-HubSpot. חזור לחשבון HubSpot Developer שלך כדי ליצור את הכרטיס:

יצירת כרטיס CRM באפליקציה הציבורית שלך

כעת, לאחר שהגדרתם את אפליקציית HubSpot הציבורית שלכם, הגיע הזמן ליצור כרטיס CRM. זה יגדיר את הפריסה והתוכן של הכרטיס.

לחצו על כרטיסי CRM תחת תכונות:

לחץ על צור כרטיס CRM

הזן את שם כרטיס ה-CRM שלך. נקרא לשלנו "Weather". זו תהיה רשומת איש קשר, ואנחנו פשוט נשלח את רשומת איש הקשר hs_object_id מ-HubSpot לחשבון ה-APIANT שלך.

הדבק את כתובת ה-URL של שירות האינטרנט שלך מאוטומציה של ה-APIANT בכתובת ה-URL של אחזור הנתונים.

לחצו על מאפייני כרטיס והזינו מאפיינים אלה על ידי לחיצה על הוסף מאפיין:

יש לוודא שסוג הנכס מתאים לכל אחד מהם כפי שמוצג לעיל.

זהו! לחצו על צור כדי ליצור את כרטיס ה-CRM שלכם:

חיבור אפליקציית HubSpot Public החדשה שלך לחשבון APIANT שלך

לפני שנסיים לבנות את האוטומציה, עלינו לחבר את אפליקציית HubSpot Public החדשה שלך לחשבון ה-APIANT שלך.

לחץ על חיבורים בתפריט

לחץ על כפתור "התחבר לאפליקציה"

בחר HubSpot

בחר את האפליקציה הציבורית שלי

פעל לפי ההוראות שעל המסך (פתח את קונסולת המפתחים של HubSpot וכו') - לחץ על אישור

כעת תקבלו את כתובת ה-URL שלכם להזנה בכתובת ה-URL של אחזור הנתונים באפליקציה הציבורית שלכם

העתק את מזהה הלקוח ואת סוד הלקוח ואת כתובת ה-URL להתקנה בתיבת הדו-שיח:

בחר לאיזה חשבון HubSpot ברצונך לחבר את האפליקציה הציבורית שלך ולחץ על בחר חשבון:

אשר את החיבור והאפליקציה הציבורית שלך אמורה להיות מחוברת כעת לחשבון ה-APIANT שלך:

סיים את בניית האוטומציה ב-APIANT כדי לתקשר עם כרטיס ה-CRM שלך

ערוך את האוטומציה שלך ב-APIANT:

לאחר מכן לחץ והסר את הפעולה 'אותיות גדולות', שהייתה רק מציין מיקום, כדי לשמור אותה.

כל מה שיש לנו עכשיו באוטומציה הוא טריגר (שירות אינטרנט):

עבור הדוגמה שלנו, כעת עלינו להוסיף את הדברים הבאים כדי לקבל נתונים מ-HubSpot, לאחזר נתונים מ-openweathermap API ולהחזיר את הכל ל-HubSpot:

1. אחזר את איש הקשר מ-HubSpot כדי לקבל את המיקוד

2. המרת מיקוד לגיאוגרפיה באמצעות openweathermap

3. קבל את תנאי מזג האוויר הנוכחיים מ-openweathermap בהתבסס על ה-Geocode

4. אכלוס מאפייני כרטיס ה-CRM בנתוני openweathermap

5. בנה אפשרות תפריט עבור כרטיס ה-CRM כדי לקשר אותו למפת מזג האוויר.

6. החזר את ה-JSON לכרטיס HubSpot CRM

בואו נתחיל!:

1. הוסף את פעולת HubSpot שנקראת Get contact:

מפה את ה-hs_object_id מהטריגר בשדה מזהה איש קשר:

2. הוסיפו את הפעולה שנקראת קידוד גיאוגרפי לפי מיקוד

מפו את המיקוד מאיש הקשר של HubSpot בשדה המיקוד בפעולה קידוד גיאוגרפי לפי מיקוד. אם אתם מעדיפים להשתמש בכלי בחר באמצעות דיאגרמה כדי לעשות זאת (אני עושה זאת!), כך תעשו זאת:

3. הוסיפו את הפעולה "קבל תנאים נוכחיים מ-Openweathermap" כעת ומפו את קו האורך והרוחב מהפעולה הקודמת:

4. הוסף את פעולת HubSpot שנקראת CRM Card: הגדר ערכי תצוגה:

הוסף את 5 המאפיינים שיצרנו בכרטיס ה-CRM והמפה (באמצעות סימן ה-+ המוקף בעיגול) לערכים המתאימים המגיעים מהפעולה לעיל קבל תנאים נוכחיים.

שם מאפיין כרטיס CRM	נתונים ממופים מ-openweathermap
תנאים	תיאור מזג האוויר
טמפ'	טמפרטורה ראשית
טמפ_מקסימום	טמפרטורה ראשית מקסימלית
טמפ_דקות	טמפרטורת מינימום ראשית
רוּחַ	מהירות הרוח

שימו לב שאלו אותם מאפיינים שהוספנו בכרטיס ה-CRM שלנו:

בחרו כיצד תרצו לקרוא לכרטיס, כאן אני קורא לו "תנאי מזג אוויר עבור [שם פרטי ממופה]". כאן זה יופיע בכרטיס:

6. כעת נוסיף את הפעולה האחרונה של HubSpot שנקראת CRM Card: הוסף אפשרות תפריט iframe:

מפה את כל השדות הנדרשים בפעולה ושמור אותה.

כרטיס CRM: הוסף שם שדה אפשרות תפריט iframe	הזן / מפה בשדה
JSON של כרטיס CRM	מַפָּה: JSON של כרטיס CRM מפעולה קודמת כרטיס CRM: הגדרת ערכי תצוגה
תווית תפריט	מפת מזג אוויר
URL	https://openweathermap.org/city/ [מזהה שנפלט מהפעולה קבל תנאים נוכחיים] זה מה שיעביר את אתר האינטרנט של openweathermap, מזהה עיר מזג האוויר, ב-iframe
רוֹחַב	1200
גוֹבַה	1000

7. לבסוף, הוסיפו את הפעולה שנקראת Return HTTP response בסוף האוטומציה כדי לשלוח את כל הנתונים בחזרה ל-HubSpot:

מפה את קובץ ה-JSON של כרטיס ה-CRM שנפלט מהפעולה לעיל בנתוני התגובה ושמור את הפעולה.

שמור את האוטומציה והפעל אותה. סיימת! 🙌

הרצת ובדיקה של כרטיס ה-CRM החדש של HubSpot

כדי לבדוק את הכרטיס, פשוט רענן את איש הקשר ב-HubSpot וצפה באוטומציה פועלת באופן אוטומטי:

עכשיו תוכלו לבנות כרטיס CRM משלכם עם כל לוגיקה ו-API…

למד מאחרים ושתף את היצירה שלך עם מנהלי HubSpot אחרים ב- forum.apiant.com

האם אתה מנהל HubSpot ומעוניין חשבון APIANT חינמי עבור מנהלי HubSpot? אם כן, תוכל להגיש בקשה למטה:

שֵׁם פְּרַטִי*

שֵׁם מִשׁפָּחָה*

שם המשרה*

אֶלֶקטרוֹנִי*

מספר טלפון נייד*

שם החברה*

פתרונות יעד

פרד לומייר מייסד שותף ומנכ"ל APIANT