تضمين ربط WhatsApp

إذا كنت مزود SaaS أو حلولًا، وتريد أن يربط عملاؤك أرقام هواتف WhatsApp الخاصة بهم عبر حساب Chakra الخاص بك، فيمكنك فعل ذلك باتباع الخطوات أدناه

1. إنشاء رمز ربط

لتضمين زر الربط داخل صفحة الويب/تطبيق الويب، ستحتاج أولًا إلى إنشاء رمز ربط. يُرجى ملاحظة أن هذا الرمز صالح لمدة 1 ساعة.

استخدم واجهة API لإنشاء رمز ربط لهذا الغرض. من الأفضل إنشاؤه في الواجهة الخلفية وتمريره إلى الواجهة الأمامية.

المعلمات المطلوبة لواجهة API هذه عند استخدامها لعميل جديد، لا توجد له إضافة في Chakra:

• newPluginName - [اختياري] اسم الإضافة الجديدة التي سيتم إنشاؤها للعميل. إذا لم تُمرر أي قيمة، فسيكون اسم الإضافة "WhatsApp". يُوصى بإضافة اسم العميل أو معرّفات أخرى واضحة وذات معنى في هذا الحقل. سيكون هذا اسم الإضافة في Chakra، وستتمكن من البحث عنها في تطبيق Chakra على الويب باستخدام هذا الاسم.
• clientReferenceId - [اختياري] معرّف مرجعي فريد للعميل. عادةً ما يكون هذا هو معرّف المستخدم / المعرّف الفريد للعميل وفقًا لنظامك الداخلي. يساعد ذلك في الحفاظ على الترابط بين نظام Chakra ونظامك الداخلي.
• clientName - [اختياري] اسم العميل وفقًا لنظامك الداخلي. وعادةً ما يكون اسم المستخدم.
• clientEmail - [اختياري] عنوان البريد الإلكتروني للعميل
• clientPhone - [اختياري] رقم هاتف العميل

المعلمات المطلوبة لهذه الواجهة البرمجية عند استخدامها لعميل حالي لديه مكوّن إضافي في Chakra:

• `pluginId` - هذا هو معرّف المكوّن الإضافي WhatsApp الذي تُخزَّن فيه تفاصيل WABA المتصل. ستكون قد تلقيت معرّف pluginId هذا وخزّنته عندما أكمل العميل تدفق التسجيل المضمّن لأول مرة. لا تستخدم معرّف pluginId مشتركًا لجميع العملاء؛ إذ يُنصح بشدة بإنشاء مكوّن إضافي جديد لكل عميل. بالنسبة إلى العملاء الجدد، يجب عدم تضمين هذه المعلمة في معلمات المتن.

2. تضمين SDK

لتضمين SDK، أضف علامة script التالية إلى قسم head في صفحة الويب

<script src="https://embed.chakrahq.com/whatsapp-partner-connect/v1_0_1/sdk.js"></script>

أنشئ عنصر div حاويًا بمعرّف فريد في صفحة الويب، ثم أضف علامة script التالية إلى نهاية الصفحة. من المهم إضافة علامة script هذه بعد عنصر div الحاوي، وإلا فسيفشل التهيئة. فيما يلي مقتطف توضيحي:

  <div id="container">  </div>  <script>    const connectToken = "<CONNECT-TOKEN>";    const chakraWhatsappConnect = ChakraWhatsappConnect.init({      connectToken: connectToken,      container: '#container',   // optional, defaults to document.body      onMessage: (event, data) => console.log(event, data),      onReady: () => console.log('ready'),      onError: (err) => console.error(err),	  onSuccess: (data) => console.log('Connection successful, data:', data)    });    // Later, you can destroy the iframe:    // chakraWhatsappConnect.destroy();  </script>  

سيحتوي الوسيط data للدالة onSuccess على المفاتيح pluginId, whatsappBusinessAccounts و whatsappPhoneNumbers . يُنصح بشدة بتخزين قيمة pluginId التي تتلقاها هنا وربطها بالعميل / الزبون في نظامك الداخلي، ثم استخدام معرّف pluginId هذا مستقبلًا عند إنشاء connectToken لهذا العميل. وبذلك، إذا أراد العميل لاحقًا إضافة WABA أو رقم هاتف أو تعديله، فسيُربط بالمكوّن الإضافي الصحيح في Chakra.

3. تحقّق من نجاح عملية التكامل

إذا نجحت عملية التكامل، فسترى زر "Connect with Facebook" كما هو موضح في لقطة الشاشة أدناه

ربط رقم هاتف WhatsApp

يمكن لعميلك الآن النقر على زر "Connect with Facebook" وإكمال التسجيل المضمّن. سيبدو التدفق الناجح على نحو مشابه للعرض التوضيحي أدناه: