क्लाउड कोड का उपयोग करके बिना कोड लिखे एक कस्टम हबस्पॉट सीआरएम कार्ड बनाएं

APIANT की मदद से बिना किसी कोडिंग के आसानी से कस्टमाइज्ड हबस्पॉट सीआरएम कार्ड बनाना सीखें।

लक्षित दर्शक: हबस्पॉट एडमिन

हबस्पॉट सीआरएम कार्ड को समझना

हबस्पॉट सीआरएम कार्ड गतिशील उपकरण हैं जो हबस्पॉट के भीतर ही विभिन्न स्रोतों से आवश्यक जानकारी और इंटरैक्शन तक त्वरित पहुंच प्रदान करके आपके वर्कफ़्लो को बेहतर बनाते हैं। बाहरी ऐप्स और व्यापक हबस्पॉट इकोसिस्टम के साथ सहजता से एकीकृत होने के लिए डिज़ाइन किए गए ये कार्ड उपयोगकर्ताओं को अपने सीआरएम को छोड़े बिना ही सपोर्ट टिकट, बिलिंग जानकारी या कस्टम एप्लिकेशन इनसाइट्स जैसे महत्वपूर्ण डेटा देखने की अनुमति देते हैं। संक्षेप में, ये एपीआई के साथ इंटरैक्ट करते हैं।

इस ट्यूटोरियल में हम एक CRM कार्ड बनाएंगे जो आपके संपर्क के लिए मौसम की जानकारी प्राप्त करेगा और उसे मौसम के मानचित्र से लिंक करेगा। OpenWeatherMap.org एपीआई.

अपना खुद का हबस्पॉट पब्लिक ऐप बनाना

कस्टम सीआरएम कार्ड बनाने से पहले, आपको निम्नलिखित कार्य करने होंगे: अपना खुद का हबस्पॉट पब्लिक ऐप बनाएंअगर आप चाहें तो इसे सार्वजनिक रूप से सूचीबद्ध करना ज़रूरी नहीं है, लेकिन आप कर सकते हैं! 🤑 इससे आप अपने क्लाइंट के हबस्पॉट हब को APIANT प्लेटफॉर्म से कनेक्ट कर पाएंगे।

अपना खुद का पब्लिक ऐप बनाने के लिए, इन सरल चरणों का पालन करें:

यदि आपके पास हबस्पॉट डेवलपर खाता नहीं है, तो एक खाता बनाएं। developers.hubspot.com

आप एक ऐप बनाना चाहते हैं:

ऐप्स प्रबंधित करें पर क्लिक करें

ऊपरी दाएं कोने में "ऐप बनाएं" पर क्लिक करें।

आप चाहें तो ऐप को एक नाम, विवरण और लोगो दे सकते हैं, फिर ऑथेंटिकेशन पर क्लिक करें।

अपना रीडायरेक्ट यूआरएल दर्ज करें। यदि आप APIANT पर HubSpot Admin Free या HubSpot Admin Pro प्लान का उपयोग कर रहे हैं, तो आप apiant.com/oauth दर्ज कर सकते हैं। यदि आप टेनेंट या डेडिकेटेड प्लान का उपयोग कर रहे हैं, तो अपने सर्वर का यूआरएल दर्ज करें। यदि आपको अपना डोमेन नाम नहीं पता है, तो अभी के लिए अपना डोमेन नाम दर्ज करें। जब आप ऐप को APIANT सर्वर से कनेक्ट करेंगे, तब सिस्टम आपको बता देगा। उस समय आप वापस जाकर अपना डोमेन नाम दर्ज कर सकते हैं।

अपने स्कोप दर्ज करें। आपका APIANT खाता आपको CRM कार्ड से कहीं अधिक काम करने की अनुमति देगा! (जैसे कि संपूर्ण API ऐप्स बनाना)। इसलिए, नीचे दिए गए स्कोप हैं जिन्हें हम निम्नलिखित के आधार पर सुझाते हैं: 24 ट्रिगर और 73 क्रियाएँ वर्तमान में हमारे पास उपलब्ध विकल्प (17 मार्च, 2024 तक) हैं।

स्कोप यह निर्धारित करते हैं कि आपके ऐप को हबस्पॉट में डेटा एक्सेस करने या कार्रवाई करने के लिए कौन सी अनुमतियाँ प्राप्त हैं। आपके ऐप को इंस्टॉल करने वाले लोगों को इसके द्वारा अनुरोधित स्कोप को स्वीकृत करना होगा। यह दृढ़ता से सलाह दी जाती है कि आपके ऐप की कार्यक्षमता के लिए यथासंभव कम स्कोप की आवश्यकता हो।

अपनी ऐप को स्क्रीन के नीचे सेव करें:

अपना डेटा फ़ेच URL प्राप्त करने के लिए APIANT में ऑटोमेशन बनाना शुरू करें।

क्या आपको APIANT खाते की आवश्यकता है? यहाँ क्लिक करें एक निःशुल्क हबस्पॉट एडमिन खाते के लिए आवेदन करने हेतु।

यदि आप इसे शुरू से बनाने के बजाय स्वचालित प्रणाली को स्थापित करना पसंद करते हैं, तो आप इसे यहां से स्थापित कर सकते हैं। यहाँ.

चलिए अब आपके APIANT खाते में ऑटोमेशन बनाना शुरू करते हैं जो CRM कार्ड के साथ इंटरैक्ट करेगा।

ऑटोमेशन एडिटर में, क्रिएट एन ऑटोमेशन पर क्लिक करें:

ट्रिगर क्रॉस पर क्लिक करें और "ट्रिगर ढूंढें" चुनें:

HTTP अनुरोध खोजें और HTTP अनुरोध प्राप्त हुआ (तत्काल) नामक ट्रिगर का चयन करें।

नया क्वेरी पैरामीटर दर्ज करने के लिए + पर क्लिक करें

hs_object_id को पैरामीटर के रूप में दर्ज करें

डेटा फ़ील्ड प्राप्त करें पर क्लिक करें

इसके बाद आपको वह वेब सर्विस यूआरएल दिखाई देगा जिसे आपको हबस्पॉट में पेस्ट करना है। इसे अपने क्लिपबोर्ड पर कॉपी करने के लिए कॉपी आइकन पर क्लिक करें।

विंडो के निचले दाएं कोने में सेव ट्रिगर पर क्लिक करें:

ऑटोमेशन को सेव करने के लिए Uppercase नामक एक अस्थायी एक्शन जोड़ें:

आप अपरकेस एक्शन को खाली छोड़ सकते हैं, हम ऑटोमेशन को दोबारा एडिट करते समय इसे हटा देंगे।

इस ऑटोमेशन को एक नाम दें और इसे सेव करें:

अब हमारे पास हबस्पॉट में सीआरएम कार्ड बनाने के लिए आवश्यक सभी सामग्री मौजूद है। कार्ड बनाने के लिए अपने हबस्पॉट डेवलपर खाते पर वापस जाएं:

अपने पब्लिक ऐप में सीआरएम कार्ड बनाना

अब जब आपने अपना हबस्पॉट पब्लिक ऐप सेटअप कर लिया है, तो सीआरएम कार्ड बनाने का समय आ गया है। यह आपके कार्ड के लेआउट और सामग्री को परिभाषित करेगा।

फीचर्स के अंतर्गत CRM कार्ड पर क्लिक करें:

CRM कार्ड बनाएं पर क्लिक करें

अपने CRM कार्ड का नाम दर्ज करें। हम इसे मौसम कहेंगे। यह एक संपर्क रिकॉर्ड होगा, और हम हबस्पॉट से संपर्क रिकॉर्ड hs_object_id को आपके APIANT खाते में भेज देंगे।

अपने APIANT ऑटोमेशन से प्राप्त वेब सेवा URL को डेटा फ़ेच URL में पेस्ट करें।

कार्ड प्रॉपर्टीज़ पर क्लिक करें और ऐड प्रॉपर्टी पर क्लिक करके ये प्रॉपर्टीज़ दर्ज करें:

ऊपर दिखाए गए अनुसार प्रत्येक के लिए संपत्ति के प्रकार का मिलान करना सुनिश्चित करें।

बस इतना ही! अपना सीआरएम कार्ड बनाने के लिए क्रिएट पर क्लिक करें:

अपने नए हबस्पॉट पब्लिक ऐप को अपने APIANT खाते से कनेक्ट करना

ऑटोमेशन का निर्माण पूरा करने से पहले, हमें आपके नए हबस्पॉट पब्लिक ऐप को आपके एपीआईएएनटी खाते से कनेक्ट करना होगा।

मेनू में कनेक्शन पर क्लिक करें

कनेक्ट ऐप बटन पर क्लिक करें

हबस्पॉट चुनें

मेरा सार्वजनिक ऐप चुनें

स्क्रीन पर दिए गए निर्देशों का पालन करें (अपना हबस्पॉट डेवलपर कंसोल खोलें, इत्यादि...) - ओके पर क्लिक करें

अब आपको अपना URL मिल जाएगा जिसे आपको अपने पब्लिक ऐप में डेटा फ़ेच URL में दर्ज करना होगा।

डायलॉग बॉक्स में अपना क्लाइंट आईडी, क्लाइंट सीक्रेट और इंस्टॉल यूआरएल कॉपी करें:

वह हबस्पॉट खाता चुनें जिससे आप अपना सार्वजनिक ऐप कनेक्ट करना चाहते हैं और "खाता चुनें" पर क्लिक करें:

कनेक्शन को मंजूरी दें और आपका पब्लिक ऐप अब आपके APIANT खाते से कनेक्ट हो जाना चाहिए:

अपने CRM कार्ड के साथ इंटरैक्ट करने के लिए APIANT में ऑटोमेशन का निर्माण पूरा करें।

APIANT में अपने ऑटोमेशन को संपादित करें:

फिर क्लिक करें और अपरकेस एक्शन को हटा दें, जो इसे सेव करने के लिए सिर्फ एक प्लेसहोल्डर था।

फिलहाल हमारे पास स्वचालन में केवल एक ट्रिगर (वेब सेवा) है:

हमारे उदाहरण के लिए, अब हमें हबस्पॉट से डेटा प्राप्त करने, ओपनवेदरमैप एपीआई से डेटा लाने और उसे वापस हबस्पॉट को भेजने के लिए निम्नलिखित को जोड़ना होगा:

1. हबस्पॉट से संपर्क प्राप्त करके ज़िप कोड प्राप्त करें।

2. ओपनवेदरमैप का उपयोग करके ज़िप कोड को जियोकोड में बदलें।

3. जियोकोड के आधार पर ओपनवेदरमैप से वर्तमान मौसम की जानकारी प्राप्त करें।

4. ओपनवेदरमैप डेटा के साथ सीआरएम कार्ड प्रॉपर्टीज़ को भरें

5. मौसम मानचित्र से लिंक करने के लिए CRM कार्ड के लिए एक मेनू विकल्प बनाएं।

6. JSON को HubSpot CRM कार्ड पर वापस भेजें

आएँ शुरू करें!:

1. हबस्पॉट में "संपर्क प्राप्त करें" नामक एक्शन जोड़ें:

ट्रिगर से hs_object_id को Contact ID फ़ील्ड में मैप करें:

2. पोस्टल कोड द्वारा जियोकोड नामक एक्शन जोड़ें।

हबस्पॉट संपर्क से ज़िप कोड को जियोकोड बाय पोस्टल कोड एक्शन के पोस्टल कोड फ़ील्ड में मैप करें। यदि आप इसके लिए सेलेक्ट वाया डायग्राम टूल का उपयोग करना पसंद करते हैं (मैं करता हूँ!), तो यह इस प्रकार है:

3. अब ओपनवेदरमैप से 'वर्तमान स्थितियों को प्राप्त करें' क्रिया जोड़ें और पिछली क्रिया से देशांतर और अक्षांश को मैप करें:

4. हबस्पॉट में CRM कार्ड नामक एक्शन जोड़ें: डिस्प्ले मान सेट करें:

हमने CRM कार्ड में जो 5 प्रॉपर्टी बनाई हैं, उन्हें जोड़ें और ऊपर दिए गए एक्शन "वर्तमान स्थितियां प्राप्त करें" से प्राप्त संबंधित मानों से मैप करें (गोलाकार + का उपयोग करके)।

सीआरएम कार्ड प्रॉपर्टी नाम	ओपनवेदरमैप से प्राप्त डेटा का मानचित्रण किया गया।
स्थितियाँ	मौसम का विवरण
अस्थायी	मुख्य तापमान
temp_max	मुख्य तापमान अधिकतम
तापमान_न्यूनतम	मुख्य तापमान न्यूनतम
हवा	हवा की गति

ध्यान दें कि ये वही गुण हैं जिन्हें हमने अपने सीआरएम कार्ड में जोड़ा था:

आप कार्ड को जो भी नाम देना चाहें, चुन सकते हैं। यहाँ मैं इसे "[मानचित्रित प्रथम नाम] के लिए मौसम की स्थिति" नाम देता हूँ। यह कार्ड में यहाँ दिखाई देगा:

6. अब आइए हबस्पॉट की अंतिम क्रिया, जिसे CRM कार्ड कहा जाता है, को जोड़ते हैं: iframe मेनू विकल्प जोड़ें:

एक्शन में सभी आवश्यक फ़ील्ड को मैप करें और इसे सेव करें।

सीआरएम कार्ड: आईफ़्रेम मेनू विकल्प फ़ील्ड नाम जोड़ें	फ़ील्ड में / मैप दर्ज करें
सीआरएम कार्ड JSON	मानचित्र: सीआरएम कार्ड JSON पिछली कार्रवाई से सीआरएम कार्ड: प्रदर्शन मान सेट करें
मेनू लेबल	मौसम मानचित्र
URL	https://openweathermap.org/city/ [वर्तमान स्थितियों को प्राप्त करने की क्रिया से उत्सर्जित आईडी] यह वह कोड है जो ओपनवेदरमैप की वेबसाइट पर मौसम शहर आईडी को आईफ्रेम में पास करेगा।
चौड़ाई	1200
ऊंचाई	1000

7. अंत में, ऑटोमेशन के अंत में "रिटर्न HTTP रिस्पॉन्स" नामक एक्शन जोड़ें ताकि सारा डेटा हबस्पॉट को वापस भेजा जा सके:

उपरोक्त क्रिया से प्राप्त CRM कार्ड JSON को प्रतिक्रिया डेटा में मैप करें और क्रिया को सहेजें।

ऑटोमेशन को सेव करें और इसे चालू करें। बस हो गया! 🙌

अपने नए हबस्पॉट सीआरएम कार्ड को चलाना और उसका परीक्षण करना

कार्ड का परीक्षण करने के लिए, बस हबस्पॉट में संपर्क को रीफ़्रेश करें और स्वचालित रूप से चलने वाली प्रक्रिया को देखें:

अब आप किसी भी लॉजिक और एपीआई का उपयोग करके अपना खुद का सीआरएम कार्ड बना सकते हैं...

दूसरों से सीखें और अपनी रचना को अन्य हबस्पॉट एडमिन के साथ साझा करें। forum.apiant.com

क्या आप हबस्पॉट एडमिन हैं और हबस्पॉट एडमिन के लिए एक निःशुल्क APIANT खाता चाहते हैं? यदि हां, तो आप नीचे दिए गए फॉर्म के माध्यम से आवेदन जमा कर सकते हैं:

पहला नाम*

उपनाम*

पद का नाम*

ईमेल*

मोबाइल फोन नंबर*

कंपनी का नाम*

लक्ष्य समाधान

फ्रेड लुमियर एपीआईएएनटी के सह-संस्थापक और सीईओ