ক্লড কোড ব্যবহার করে কোনো কোড ছাড়াই একটি কাস্টম হাবস্পট সিআরএম কার্ড তৈরি করুন

APIANT ব্যবহার করে কোনো কোডিং ছাড়াই কীভাবে সহজে একটি কাস্টমাইজড HubSpot CRM কার্ড তৈরি করা যায় তা শিখুন।

লক্ষ্য দর্শক: হাবস্পট অ্যাডমিন

HubSpot CRM কার্ড বোঝা

HubSpot CRM কার্ড হলো এমন ডাইনামিক টুল যা সরাসরি HubSpot-এর ভেতর থেকেই বিভিন্ন উৎস থেকে প্রয়োজনীয় তথ্য ও ইন্টারঅ্যাকশনে দ্রুত অ্যাক্সেস দিয়ে আপনার ওয়ার্কফ্লোকে উন্নত করে। এক্সটার্নাল অ্যাপ এবং বৃহত্তর HubSpot ইকোসিস্টেমের সাথে নির্বিঘ্নে ইন্টিগ্রেট করার জন্য ডিজাইন করা এই কার্ডগুলো ব্যবহারকারীদের তাদের CRM থেকে বের না হয়েই সাপোর্ট টিকেট, বিলিং তথ্য বা কাস্টম অ্যাপ্লিকেশন ইনসাইটের মতো গুরুত্বপূর্ণ ডেটা দেখার সুযোগ দেয়। মূলত, এগুলো API-এর সাথে ইন্টারঅ্যাক্ট করে।

এই টিউটোরিয়ালে আমরা একটি CRM কার্ড তৈরি করব যা আপনার কন্ট্যাক্টের আবহাওয়ার তথ্য সংগ্রহ করবে এবং একটি ওয়েদার ম্যাপের সাথে লিঙ্ক করবে। ওপেনওয়েদারম্যাপ.অর্গ এপিআই।

আপনার নিজের HubSpot পাবলিক অ্যাপ তৈরি করা

কাস্টম CRM কার্ড তৈরি করার আগে, আপনাকে প্রয়োজন হবে আপনার নিজের HubSpot পাবলিক অ্যাপ তৈরি করুনআপনি না চাইলে এটি প্রকাশ্যে তালিকাভুক্ত করার দরকার নেই, তবে আপনি চাইলে করতে পারেন! 🤑 এর মাধ্যমে আপনি আপনার ক্লায়েন্টের HubSpot Hub-কে APIANT প্ল্যাটফর্মের সাথে সংযুক্ত করতে পারবেন।

আপনার নিজের পাবলিক অ্যাপ তৈরি করতে, এই সহজ ধাপগুলো অনুসরণ করুন:

আপনার যদি HubSpot ডেভেলপার অ্যাকাউন্ট না থাকে, তাহলে এখানে একটি তৈরি করুন। developers.hubspot.com

আপনি একটি অ্যাপ তৈরি করতে চান:

অ্যাপ পরিচালনা করতে ক্লিক করুন

উপরের ডানদিকে Create App-এ ক্লিক করুন

অ্যাপটির একটি নাম, বিবরণ এবং চাইলে একটি লোগো দিন, তারপর Auth-এ ক্লিক করুন।

আপনার রিডাইরেক্ট ইউআরএল (Redirect URL) লিখুন। আপনি যদি APIANT-এ HubSpot Admin Free বা HubSpot Admin Pro প্ল্যানে থাকেন, তাহলে apiant.com/oauth লিখতে পারেন। আপনি যদি টেন্যান্ট বা ডেডিকেটেড প্ল্যানে থাকেন, তাহলে আপনার সার্ভারের ইউআরএল (URL) লিখুন। আপনি যদি এটি না জানেন, তাহলে আপাতত আপনার ডোমেইন নেম লিখুন, এবং যখন আপনি অ্যাপটিকে APIANT সার্ভারের সাথে সংযুক্ত করবেন, তখন সিস্টেম আপনাকে এটি জানিয়ে দেবে, এবং তখন আপনি ফিরে এসে এটি লিখতে পারবেন।

আপনার স্কোপগুলি লিখুন। আপনার APIANT অ্যাকাউন্ট আপনাকে শুধু CRM কার্ডের চেয়েও আরও অনেক কিছু করার সুযোগ দেবে! (যেমন সম্পূর্ণ API অ্যাপ তৈরি করা)। তাই, আপনার প্রয়োজন অনুযায়ী আমরা এই স্কোপগুলি (নীচে দেখুন) সুপারিশ করছি। ২৪টি ট্রিগার এবং ৭৩টি অ্যাকশন আমাদের কাছে বর্তমানে উপলব্ধ আছে (১৭ই মার্চ, ২০২৪ অনুযায়ী)।

HubSpot-এ ডেটা অ্যাক্সেস করতে বা কোনো কাজ সম্পাদন করতে আপনার অ্যাপের কী কী অনুমতি থাকবে, তা স্কোপ নির্ধারণ করে। যারা আপনার অ্যাপ ইনস্টল করবেন, তাদের অবশ্যই অ্যাপটির অনুরোধ করা স্কোপগুলো অনুমোদন করতে হবে। আপনার অ্যাপের কার্যকারিতার জন্য যতটা সম্ভব কম স্কোপের প্রয়োজন রাখার জন্য জোরালোভাবে উৎসাহিত করা হয়।

স্ক্রিনের নিচে আপনার অ্যাপটি সংরক্ষণ করুন:

আপনার ডেটা ফেচ ইউআরএল (Data Fetch URL) পেতে APIANT-এ অটোমেশন তৈরি করা শুরু করুন।

আপনার কি একটি APIANT অ্যাকাউন্টের প্রয়োজন আছে? এখানে ক্লিক করুন একটি বিনামূল্যের HubSpot অ্যাডমিন অ্যাকাউন্টের জন্য আবেদন করতে।

আপনি যদি শুরু থেকে তৈরি করার পরিবর্তে অটোমেশনটি ইনস্টল করতে চান, তাহলে আপনি এটি এখান থেকে ইনস্টল করতে পারেন। এখানে.

চলুন এখন আপনার APIANT অ্যাকাউন্টে অটোমেশন তৈরি করা শুরু করি যা একটি CRM কার্ডের সাথে যোগাযোগ করবে।

অটোমেশন এডিটরে, 'Create an Automation'-এ ক্লিক করুন:

ট্রিগার ক্রস-এ ক্লিক করুন এবং 'ফাইন্ড এ ট্রিগার' বেছে নিন:

HTTP Request অনুসন্ধান করুন এবং HTTP request received (instant) নামক ট্রিগারটি নির্বাচন করুন।

নতুন কোয়েরি প্যারামিটার প্রবেশ করাতে + চিহ্নে ক্লিক করুন।

প্যারামিটার হিসেবে hs_object_id প্রবেশ করান

ডেটা ফিল্ড আনতে ক্লিক করুন

এরপর HubSpot-এ পেস্ট করার জন্য প্রয়োজনীয় ওয়েব সার্ভিস URL-টি দেখানো হবে। এটি আপনার ক্লিপবোর্ডে কপি করতে কপি আইকনে ক্লিক করুন।

উইন্ডোর নিচের ডানদিকে থাকা সেভ ট্রিগার-এ ক্লিক করুন:

আপারকেস (Uppercase) নামক অটোমেশনটি সংরক্ষণ করার জন্য একটি অস্থায়ী অ্যাকশন যোগ করুন:

আপনি আপারকেস অ্যাকশনটি খালি রাখতে পারেন, আমরা অটোমেশনটি পুনরায় সম্পাদনা করার সময় এটি সরিয়ে দেব।

অটোমেশনটির একটি নাম দিন এবং সংরক্ষণ করুন:

HubSpot-এ CRM কার্ড তৈরি করার জন্য প্রয়োজনীয় সবকিছু এখন আমাদের কাছে আছে। কার্ডটি তৈরি করতে আপনার HubSpot ডেভেলপার অ্যাকাউন্টে ফিরে যান:

আপনার পাবলিক অ্যাপে একটি CRM কার্ড তৈরি করা

আপনার HubSpot পাবলিক অ্যাপটি সেট আপ করা হয়ে গেলে, এখন একটি CRM কার্ড তৈরি করার পালা। এটি আপনার কার্ডের বিন্যাস এবং বিষয়বস্তু নির্ধারণ করবে।

ফিচারের অধীনে CRM কার্ডগুলিতে ক্লিক করুন:

সিআরএম কার্ড তৈরি করতে ক্লিক করুন

আপনার CRM কার্ডের নাম লিখুন। আমরা আমাদেরটির নাম দেব ‘Weather’। এটি একটি কন্টাক্ট রেকর্ড হবে, এবং আমরা HubSpot থেকে কন্টাক্ট রেকর্ডের hs_object_id-টি আপনার APIANT অ্যাকাউন্টে পাঠিয়ে দেব।

আপনার APIANT অটোমেশন থেকে ওয়েব সার্ভিস URL-টি ডেটা ফেচ URL-এ পেস্ট করুন।

কার্ড প্রোপার্টিজে ক্লিক করুন এবং অ্যাড প্রোপার্টিতে ক্লিক করে এই প্রোপার্টিগুলো প্রবেশ করান:

উপরে যেমন দেখানো হয়েছে, সেই অনুযায়ী প্রত্যেকের জন্য প্রপার্টি টাইপ অবশ্যই মেলাতে হবে।

ব্যাস! আপনার CRM কার্ড তৈরি করতে Create-এ ক্লিক করুন:

আপনার নতুন HubSpot পাবলিক অ্যাপকে আপনার APIANT অ্যাকাউন্টের সাথে সংযুক্ত করা

অটোমেশন তৈরি শেষ করার আগে, আপনার নতুন HubSpot পাবলিক অ্যাপটিকে আপনার APIANT অ্যাকাউন্টের সাথে সংযুক্ত করতে হবে।

মেনুতে সংযোগগুলিতে ক্লিক করুন

কানেক্ট অ্যাপ বোতামে ক্লিক করুন

হাবস্পট বেছে নিন

আমার পাবলিক অ্যাপ বেছে নিন

স্ক্রিনে দেওয়া নির্দেশাবলী অনুসরণ করুন (আপনার HubSpot ডেভেলপার কনসোল খুলুন, ইত্যাদি…) - OK ক্লিক করুন।

এখন আপনি আপনার পাবলিক অ্যাপে ডেটা ফেচ ইউআরএল (Data Fetch URL) হিসেবে প্রবেশ করানোর জন্য ইউআরএলটি পাবেন।

ডায়ালগ বক্সে আপনার ক্লায়েন্ট আইডি, ক্লায়েন্ট সিক্রেট এবং ইনস্টল ইউআরএল কপি করুন:

আপনার পাবলিক অ্যাপটি কোন HubSpot অ্যাকাউন্টের সাথে সংযুক্ত করতে চান তা বেছে নিন এবং 'অ্যাকাউন্ট বেছে নিন'-এ ক্লিক করুন:

সংযোগটি অনুমোদন করুন এবং আপনার পাবলিক অ্যাপটি এখন আপনার APIANT অ্যাকাউন্টের সাথে সংযুক্ত হয়ে যাবে:

আপনার CRM কার্ডের সাথে ইন্টারঅ্যাক্ট করার জন্য APIANT-এ অটোমেশন তৈরি করা শেষ করুন।

APIANT-এ আপনার অটোমেশন সম্পাদনা করুন:

এরপর, সংরক্ষণ করার জন্য আপারকেস অ্যাকশনটি (যা কেবল একটি প্লেসহোল্ডার ছিল) ক্লিক করে মুছে ফেলুন।

অটোমেশনে এখন আমাদের যা আছে তা হলো একটি ট্রিগার (ওয়েব সার্ভিস):

আমাদের উদাহরণের জন্য, HubSpot থেকে ডেটা গ্রহণ করতে, openweathermap API থেকে ডেটা আনতে এবং এই সবকিছু HubSpot-এ ফেরত পাঠাতে এখন আমাদের নিম্নলিখিত বিষয়গুলো যোগ করতে হবে:

1. জিপ কোড পেতে HubSpot থেকে কন্টাক্টটি পুনরুদ্ধার করুন।

2. ওপেনওয়েদারম্যাপ ব্যবহার করে জিপ কোডকে জিওকোডে রূপান্তর করুন

3. জিওকোডের উপর ভিত্তি করে ওপেনওয়েদারম্যাপ থেকে বর্তমান আবহাওয়ার অবস্থা জানুন।

4. ওপেনওয়েদারম্যাপ ডেটা দিয়ে CRM কার্ডের প্রোপার্টিগুলো পূরণ করুন।

5. আবহাওয়ার মানচিত্রের সাথে লিঙ্ক করার জন্য CRM কার্ডের একটি মেনু অপশন তৈরি করুন।

6. HubSpot CRM কার্ডে JSON ফেরত দিন

চলুন শুরু করা যাক!:

১. Get contact নামক HubSpot অ্যাকশনটি যোগ করুন:

ট্রিগার থেকে প্রাপ্ত hs_object_id-কে Contact ID ফিল্ডে ম্যাপ করুন:

২. ‘জিওকোড বাই পোস্টাল কোড’ নামক অ্যাকশনটি যোগ করুন।

'জিওকোড বাই পোস্টাল কোড' অ্যাকশনের 'পোস্টাল কোড' ফিল্ডে HubSpot কন্ট্যাক্টের জিপ কোডটি ম্যাপ করুন। আপনি যদি এটি করার জন্য 'সিলেক্ট ভায়া ডায়াগ্রাম' টুলটি ব্যবহার করতে পছন্দ করেন (আমি করি!), তাহলে পদ্ধতিটি হলো:

৩. এখন Openweathermap থেকে 'Get current conditions' অ্যাকশনটি যোগ করুন এবং পূর্ববর্তী অ্যাকশন থেকে প্রাপ্ত দ্রাঘিমাংশ ও অক্ষাংশ ম্যাপ করুন:

৪. CRM Card নামক HubSpot অ্যাকশনটি যোগ করুন: প্রদর্শনের মান নির্ধারণ করুন:

CRM কার্ডে আমরা যে ৫টি প্রপার্টি তৈরি করেছি, সেগুলোকে উপরের 'Get current conditions' অ্যাকশন থেকে আসা সংশ্লিষ্ট ভ্যালুগুলোর সাথে ম্যাপ করুন (বৃত্তাকার + চিহ্ন ব্যবহার করে)।

CRM কার্ড প্রপার্টির নাম	ওপেনওয়েদারম্যাপ থেকে প্রাপ্ত ডেটা
শর্ত	আবহাওয়ার বর্ণনা
তাপমাত্রা	প্রধান তাপমাত্রা
তাপমাত্রা_সর্বোচ্চ	প্রধান তাপমাত্রা সর্বোচ্চ
তাপমাত্রা_মিনিট	প্রধান তাপমাত্রা সর্বনিম্ন
বাতাস	বাতাসের গতি

লক্ষ্য করুন যে, এগুলো সেই একই প্রোপার্টি যা আমরা আমাদের CRM কার্ডে যোগ করেছিলাম:

আপনি কার্ডটির কী নাম দিতে চান তা বেছে নিন, এখানে আমি এর নাম দিয়েছি “[ম্যাপ করা প্রথম নাম]-এর জন্য আবহাওয়ার অবস্থা”। কার্ডে এটি এখানে দেখানো হবে:

৬. এবার চলুন CRM Card: append iframe menu option নামক চূড়ান্ত HubSpot অ্যাকশনটি যোগ করি:

অ্যাকশনটিতে সমস্ত প্রয়োজনীয় ফিল্ড ম্যাপ করুন এবং এটি সেভ করুন।

CRM কার্ড: আইফ্রেম মেনু বিকল্প ফিল্ডের নাম যুক্ত করুন	ক্ষেত্রে প্রবেশ করুন / মানচিত্র
CRM কার্ড JSON	মানচিত্র: CRM কার্ড JSON পূর্ববর্তী পদক্ষেপ থেকে CRM কার্ড: প্রদর্শনের মান নির্ধারণ করুন
মেনু লেবেল	আবহাওয়ার মানচিত্র
URL	https://openweathermap.org/city/ [বর্তমান পরিস্থিতি জানুন অ্যাকশন থেকে নির্গত আইডি] এর মাধ্যমেই ওপেনওয়েদারম্যাপ ওয়েবসাইটের ওয়েদার সিটি আইডি আইফ্রেমে পাস করা হবে।
প্রস্থ	1200
উচ্চতা	1000

৭. সবশেষে, সমস্ত ডেটা HubSpot-এ ফেরত পাঠানোর জন্য অটোমেশনের শেষে Return HTTP response নামক অ্যাকশনটি যোগ করুন:

উপরের অ্যাকশন থেকে প্রাপ্ত CRM কার্ড JSON-টি Response data-তে ম্যাপ করুন এবং অ্যাকশনটি সেভ করুন।

অটোমেশনটি সেভ করে চালু করে দিন। আপনার কাজ শেষ! 🙌

আপনার নতুন HubSpot CRM কার্ড চালানো এবং পরীক্ষা করা

কার্ডটি পরীক্ষা করতে, HubSpot-এ কন্ট্যাক্টটি রিফ্রেশ করুন এবং অটোমেশনটি স্বয়ংক্রিয়ভাবে চলতে দেখুন:

এখন আপনি যেকোনো লজিক এবং এপিআই ব্যবহার করে আপনার নিজস্ব সিআরএম কার্ড তৈরি করতে পারবেন…

অন্যদের থেকে শিখুন এবং আপনার সৃষ্টি অন্যান্য HubSpot অ্যাডমিনদের সাথে শেয়ার করুন। forum.apiant.com

আপনি কি একজন HubSpot অ্যাডমিন এবং HubSpot অ্যাডমিনদের জন্য একটি বিনামূল্যের APIANT অ্যাকাউন্ট পেতে চান? যদি তাই হয়, তাহলে আপনি নিচে একটি আবেদন জমা দিতে পারেন:

প্রথম নাম*

শেষ নাম*

পদের নাম*

ইমেইল*

মোবাইল ফোন নম্বর*

কোম্পানির নাম*

লক্ষ্য সমাধান

ফ্রেড লুমিয়ের এপিয়েন্ট-এর সহ-প্রতিষ্ঠাতা ও সিইও