สร้างการ์ด CRM ของ HubSpot แบบกำหนดเองโดยไม่ต้องเขียนโค้ด ด้วย Claude Code

เรียนรู้วิธีสร้าง HubSpot CRM Card ที่ปรับแต่งเองได้ง่ายๆ โดยไม่ต้องเขียนโค้ดด้วย APIANT

กลุ่มเป้าหมาย: ผู้ดูแลระบบ HubSpot

ทำความเข้าใจเกี่ยวกับ HubSpot CRM Cards

การ์ด CRM ของ HubSpot เป็นเครื่องมือแบบไดนามิกที่ช่วยเพิ่มประสิทธิภาพการทำงานของคุณโดยให้การเข้าถึงข้อมูลและการโต้ตอบที่สำคัญจากแหล่งต่างๆ ได้อย่างรวดเร็วโดยตรงภายใน HubSpot ออกแบบมาเพื่อผสานรวมอย่างราบรื่นกับแอปภายนอกและระบบนิเวศของ HubSpot การ์ดเหล่านี้ช่วยให้ผู้ใช้สามารถดูข้อมูลสำคัญ เช่น ตั๋วสนับสนุน ข้อมูลการเรียกเก็บเงิน หรือข้อมูลเชิงลึกของแอปพลิเคชันที่กำหนดเองได้โดยไม่ต้องออกจาก CRM โดยพื้นฐานแล้ว การ์ดเหล่านี้จะโต้ตอบกับ API

ในบทเรียนนี้ เราจะสร้าง CRM Card ที่ดึงข้อมูลสภาพอากาศสำหรับผู้ติดต่อของคุณและเชื่อมโยงไปยังแผนที่สภาพอากาศโดยใช้ OpenWeatherMap.org API

การสร้างแอป HubSpot Public ของคุณเอง

ก่อนที่คุณจะสามารถสร้างการ์ด CRM แบบกำหนดเองได้ คุณต้องทำสิ่งต่อไปนี้ สร้างแอป HubSpot สาธารณะของคุณเองคุณไม่จำเป็นต้องเปิดเผยต่อสาธารณะหากไม่ต้องการ แต่คุณสามารถทำได้! 🤑 วิธีนี้จะช่วยให้คุณเชื่อมต่อ HubSpot Hub ของลูกค้าเข้ากับแพลตฟอร์ม APIANT ได้

ในการสร้างแอปสาธารณะของคุณเอง ให้ทำตามขั้นตอนง่ายๆ เหล่านี้:

หากคุณยังไม่มีบัญชีนักพัฒนา HubSpot โปรดสร้างบัญชีได้ที่นี่ developers.hubspot.com

คุณต้องการสร้างแอปพลิเคชัน:

คลิก จัดการแอป

คลิก "สร้างแอป" ที่มุมบนขวา

ตั้งชื่อแอป ใส่คำอธิบาย และโลโก้ (ถ้าต้องการ) จากนั้นคลิกที่ปุ่ม อนุญาต

ป้อน URL การเปลี่ยนเส้นทางของคุณ หากคุณใช้แผน HubSpot Admin Free หรือ HubSpot Admin Pro บน APIANT คุณสามารถป้อน apiant.com/oauth ได้ หากคุณใช้แผนแบบเทนเนนต์หรือแบบเฉพาะ ให้ป้อน URL ของเซิร์ฟเวอร์ของคุณ หากคุณไม่ทราบ ให้ป้อนชื่อโดเมนของคุณไว้ก่อน และระบบจะแจ้งให้คุณทราบเมื่อคุณเชื่อมต่อแอปกับเซิร์ฟเวอร์ APIANT จากนั้นคุณสามารถกลับมาป้อน URL ได้ในภายหลัง

ป้อนขอบเขตของคุณ บัญชี APIANT ของคุณจะช่วยให้คุณทำอะไรได้มากกว่าแค่การ์ด CRM! (เช่น การสร้างแอป API ที่สมบูรณ์) ดังนั้นนี่คือขอบเขต (ดูด้านล่าง) ที่เราแนะนำโดยอิงจาก... ทริกเกอร์ 24 ตัว และการกระทำ 73 อย่าง ขณะนี้เรามีสินค้าพร้อมจำหน่าย (ณ วันที่ 17 มีนาคม 2567)

ขอบเขตสิทธิ์ (Scopes) กำหนดสิทธิ์ที่แอปของคุณมีในการเข้าถึงข้อมูลหรือดำเนินการต่างๆ ใน HubSpot ผู้ที่ติดตั้งแอปของคุณจะต้องอนุมัติขอบเขตสิทธิ์ที่แอปขอ ขอแนะนำอย่างยิ่งให้ขอขอบเขตสิทธิ์ให้น้อยที่สุดเท่าที่จะเป็นไปได้สำหรับฟังก์ชันการทำงานของแอปของคุณ

บันทึกแอปของคุณที่ด้านล่างของหน้าจอ:

เริ่มสร้างระบบอัตโนมัติใน APIANT เพื่อรับ URL สำหรับการดึงข้อมูลของคุณ

คุณต้องการบัญชี APIANT หรือไม่? คลิกที่นี่ เพื่อสมัครบัญชีผู้ดูแลระบบ HubSpot ฟรี

หากคุณต้องการติดตั้งระบบอัตโนมัติแทนการสร้างตั้งแต่เริ่มต้น คุณสามารถติดตั้งได้จาก ที่นี่.

ตอนนี้เรามาเริ่มสร้างระบบอัตโนมัติในบัญชี APIANT ของคุณที่จะทำงานร่วมกับ CRM Card กันเลย

ในโปรแกรมแก้ไขระบบอัตโนมัติ ให้คลิก สร้างระบบอัตโนมัติ:

คลิกที่เครื่องหมายกากบาท Trigger แล้วเลือก Find a trigger:

ค้นหา HTTP Request และเลือกทริกเกอร์ที่ชื่อว่า HTTP request received (instant)

คลิกเครื่องหมาย + เพื่อป้อนพารามิเตอร์การค้นหาใหม่

ป้อน hs_object_id เป็นพารามิเตอร์

คลิก "ดึงข้อมูลฟิลด์"

จากนั้น URL ของเว็บเซอร์วิสที่คุณต้องวางใน HubSpot จะปรากฏขึ้น คลิกไอคอนคัดลอกเพื่อคัดลอกไปยังคลิปบอร์ดของคุณ

คลิกที่ปุ่ม "บันทึกทริกเกอร์" ที่มุมล่างขวาของหน้าต่าง:

เพิ่มการดำเนินการชั่วคราวเพื่อบันทึกการทำงานอัตโนมัติที่ชื่อว่า Uppercase:

คุณสามารถเว้นช่องการดำเนินการเป็นตัวพิมพ์ใหญ่ว่างไว้ได้ เราจะลบออกเมื่อเราแก้ไขระบบอัตโนมัติอีกครั้ง

ตั้งชื่อให้กับการทำงานอัตโนมัติและบันทึกไว้:

ตอนนี้เรามีทุกอย่างที่จำเป็นในการสร้าง CRM Card ใน HubSpot แล้ว กลับไปที่บัญชีนักพัฒนา HubSpot ของคุณเพื่อสร้างการ์ด:

การสร้างการ์ด 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 เพื่อป้อนในช่อง Data Fetch URL ในแอปสาธารณะของคุณ

คัดลอก Client ID และ Client Secret ของคุณ แล้วใส่ URL สำหรับการติดตั้งลงในกล่องโต้ตอบ:

เลือกบัญชี HubSpot ที่คุณต้องการเชื่อมต่อแอปสาธารณะของคุณ แล้วคลิก เลือกบัญชี:

อนุมัติการเชื่อมต่อ และแอปสาธารณะของคุณก็จะเชื่อมต่อกับบัญชี APIANT เรียบร้อยแล้ว:

สร้างระบบอัตโนมัติใน APIANT ให้เสร็จสมบูรณ์เพื่อโต้ตอบกับ CRM Card ของคุณ

แก้ไขระบบอัตโนมัติของคุณใน APIANT:

จากนั้นคลิกและลบการกระทำ "ตัวพิมพ์ใหญ่" ซึ่งเป็นเพียงตัวยึดตำแหน่งเพื่อบันทึก

ตอนนี้ระบบอัตโนมัติของเรามีเพียงแค่ทริกเกอร์ (เว็บเซอร์วิส) เท่านั้น:

สำหรับตัวอย่างของเรา ตอนนี้เราจำเป็นต้องเพิ่มโค้ดต่อไปนี้เพื่อรับข้อมูลจาก HubSpot ดึงข้อมูลจาก API ของ openweathermap และส่งข้อมูลทั้งหมดกลับไปยัง HubSpot:

1. ดึงข้อมูลผู้ติดต่อจาก HubSpot เพื่อรับรหัสไปรษณีย์

2. แปลงรหัสไปรษณีย์เป็นพิกัดทางภูมิศาสตร์ด้วย openweathermap

3. รับข้อมูลสภาพอากาศปัจจุบันจาก openweathermap โดยอิงตามรหัสทางภูมิศาสตร์

4. กรอกข้อมูลในคุณสมบัติของการ์ด CRM ด้วยข้อมูลจาก openweathermap

5. สร้างตัวเลือกเมนูสำหรับการ์ด CRM เพื่อเชื่อมโยงไปยังแผนที่สภาพอากาศ

6. ส่งคืนค่า JSON ไปยัง HubSpot CRM Card

มาเริ่มกันเลย!

1. เพิ่มแอ็กชัน HubSpot ที่ชื่อว่า "รับข้อมูลติดต่อ":

แมป hs_object_id จากทริกเกอร์ไปยังฟิลด์ Contact ID:

2. เพิ่มการดำเนินการที่เรียกว่า Geocode by postal code

จับคู่รหัสไปรษณีย์จากรายชื่อติดต่อใน HubSpot กับช่องรหัสไปรษณีย์ในขั้นตอนการระบุตำแหน่งทางภูมิศาสตร์ด้วยรหัสไปรษณีย์ หากคุณต้องการใช้เครื่องมือเลือกผ่านแผนภาพเพื่อทำเช่นนี้ (ฉันก็ใช้!) วิธีการมีดังนี้:

3. เพิ่มการดำเนินการ "รับสภาพอากาศปัจจุบันจาก Openweathermap ตอนนี้" และแมปค่าลองจิจูดและละติจูดจากการดำเนินการก่อนหน้านี้:

4. เพิ่มแอ็กชัน HubSpot ที่ชื่อว่า CRM Card: ตั้งค่าการแสดงผล:

เพิ่มคุณสมบัติทั้ง 5 ข้อที่เราสร้างไว้ใน CRM card แล้วทำการแมป (โดยใช้เครื่องหมาย + ในวงกลม) กับค่าที่เกี่ยวข้องซึ่งได้มาจากแอ็กชันด้านบน "รับเงื่อนไขปัจจุบัน"

ชื่อคุณสมบัติการ์ด CRM	ข้อมูลที่นำมาแสดงจาก openweathermap
เงื่อนไข	คำอธิบายสภาพอากาศ
อุณหภูมิ	อุณหภูมิหลัก
อุณหภูมิสูงสุด	อุณหภูมิหลักสูงสุด
อุณหภูมิต่ำสุด	อุณหภูมิหลักต่ำสุด
ลม	ความเร็วลม

โปรดสังเกตว่าคุณสมบัติเหล่านี้เหมือนกับคุณสมบัติที่เราเพิ่มไว้ใน CRM Card ของเรา:

เลือกชื่อที่คุณต้องการตั้งให้กับการ์ด ในที่นี้ฉันตั้งชื่อว่า “สภาพอากาศสำหรับ [ชื่อจริงที่เชื่อมโยง]” ชื่อนี้จะปรากฏในส่วนใดของการ์ด:

6. ต่อไปเราจะเพิ่มแอ็กชันสุดท้ายของ HubSpot ที่เรียกว่า CRM Card: ตัวเลือกเมนู append iframe:

กำหนดค่าฟิลด์ที่จำเป็นทั้งหมดในแอ็กชันแล้วบันทึก

การ์ด CRM: เพิ่มชื่อฟิลด์ตัวเลือกเมนู iframe	ป้อน / แผนที่ในช่อง
การ์ด CRM ในรูปแบบ JSON	แผนที่: การ์ด CRM ในรูปแบบ JSON จากการกระทำครั้งก่อน การ์ด CRM: ตั้งค่าค่าที่แสดงผล
ป้ายกำกับเมนู	แผนที่สภาพอากาศ
URL	https://openweathermap.org/city/ [รหัสที่ได้จากการดำเนินการ รับเงื่อนไขปัจจุบัน] นี่คือสิ่งที่จะแสดงรหัสเมืองตามสภาพอากาศบนเว็บไซต์ OpenWeatherMap ใน iframe
ความกว้าง	1200
ความสูง	1000

7. สุดท้าย เพิ่มแอ็กชันที่ชื่อว่า "ส่งคืนการตอบสนอง HTTP" ไว้ที่ส่วนท้ายของระบบอัตโนมัติ เพื่อส่งข้อมูลทั้งหมดกลับไปยัง HubSpot:

แมปข้อมูล JSON ของการ์ด CRM ที่ได้จากแอ็กชันข้างต้นลงในข้อมูลการตอบกลับ แล้วบันทึกแอ็กชัน

บันทึกการตั้งค่าอัตโนมัติและเปิดใช้งาน เท่านี้ก็เสร็จแล้ว! 🙌

การใช้งานและทดสอบ HubSpot CRM Card ใหม่ของคุณ

เพื่อทดสอบการ์ด เพียงแค่รีเฟรชข้อมูลผู้ติดต่อใน HubSpot แล้วดูระบบอัตโนมัติทำงานโดยอัตโนมัติ:

ตอนนี้คุณสามารถสร้าง CRM Card ของคุณเองได้ด้วยตรรกะและ API ใดก็ได้...

เรียนรู้จากผู้อื่นและแบ่งปันผลงานของคุณกับผู้ดูแลระบบ HubSpot ท่านอื่นๆ ได้ที่นี่ ฟอรัม.apiant.com

คุณเป็นผู้ดูแลระบบ HubSpot และต้องการบัญชี APIANT ฟรีสำหรับผู้ดูแลระบบ HubSpot หรือไม่? ถ้าใช่ คุณสามารถส่งใบสมัครได้ด้านล่าง:

ชื่อจริง*

นามสกุล*

ตำแหน่งงาน*

อีเมล*

หมายเลขโทรศัพท์มือถือ*

ชื่อบริษัท*

โซลูชันเป้าหมาย

เฟร็ด ลูมิแยร์ ผู้ร่วมก่อตั้งและซีอีโอของ APIANT