> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.
# تكامل Web SDK المخصص لـ Rokt Thanks
> هذا المقال مخصص للعلامات التجارية التي لا تستخدم Shopify Checkout لكنها لا تزال ترغب في الاستفادة من عروض Rokt Thanks في Aftersell.
نظرة عامة
إذا كان متجرك يستخدم **تدفق دفع مخصصًا**، فلا يزال بإمكانك الوصول إلى عروض Rokt Thanks عن طريق تثبيت **Rokt Web SDK** (مقتطف JavaScript صغير).
عادةً ما يكون تثبيت حزمة SDK بسيطًا ويتطلب خبرة تقنية محدودة. وعند الحاجة، يمكن لفريق الدعم التقني في Aftersell مساعدتك طوال العملية.
***
## أسئلة أولية
قبل البدء، أجب عن الأسئلة التالية لضمان تكامل سلس:
1. **هل يمكنك (أو أي شخص في فريق الهندسة لديك) إضافة مقتطف كود إلى صفحة التأكيد؟**\
تظهر صفحة التأكيد، المعروفة أيضًا باسم **صفحة الشكر**، مباشرةً بعد الدفع.
2. **ما بيانات المستخدم أو الخصائص المتاحة في صفحة التأكيد؟**\
سنحتاج إلى الوصول إلى [خصائص محددة](https://www.notion.so/rokt/Custom-Web-SDK-integration-for-Rokt-Thanks-306ee2db8608815899eadad3811b5ff3) تتعلق بالمنتجات المشتراة ومعلومات العملاء. كلما زادت البيانات المتاحة، كانت عروض Rokt Thanks لديك أكثر صلة ودقة.
3. **هل هناك طريقة سهلة للوصول إلى هذه البيانات باستخدام JavaScript؟**\
على سبيل المثال، هل يمكنك الاستعلام عن تفاصيل السلة أو الطلب في صفحة التأكيد؟
***
## خطوات التنفيذ
## الخطوة 1: المراجعة والتأكيد
* راجع الأسئلة أعلاه وأكّد أي خصائص البيانات يمكن الوصول إليها.
* عندما تكون جاهزًا للمتابعة، ستحتاج إلى **accountId**، وسيوفره لك مهندس من Aftersell.
لإنشاء حسابك، يرجى تقديم التفاصيل التالية:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
{
"firstName": "",
"lastName": "",
"primaryEmail": "",
"websiteUrl": "",
"countryCode": "",
"brand": ""
}
```
***
## الخطوة 2: اختيار طريقة التثبيت
حدّد ما إذا كنت تريد:
* **تثبيت التكامل بنفسك**، أو
* **العمل مباشرةً مع مهندس من Aftersell** (قد تكون هناك حاجة إلى بيئة اختبار للإعداد بمساعدتنا).
إذا اخترت التثبيت بنفسك، يمكنك اتباع [**وثائق Rokt**](https://docs.rokt.com/developers/integration-guides/getting-started/?layer1=siteMonetization) أو الخطوات الملخّصة أدناه.\
ليست كل الخطوات في دليل إعداد Rokt مطلوبة، لكن الدليل مقدَّم كمرجع.
***
## الخطوة 3: تثبيت سكربت التكامل
a. **انسخ [سكربت التكامل الأولي](#)** (المقدَّم أدناه).
b. **أضف السكربت** بين وسمي `` في أي صفحة تريد عرض عرض Rokt Thanks فيها (عادةً صفحة تأكيد الطلب لديك).
i. عبّئ جميع **خصائص بيانات العملاء والمعاملات** المطلوبة.
ii. استبدل `"rokt_account_id_here"` بقيمة **accountId** التي قدّمها لك مهندس Aftersell.
c. **اختبر تنفيذك** باستخدام [دليل الاختبار من Rokt](https://docs.rokt.com/developers/integration-guides/web/testing) للتأكد من تحميل المواضع بشكل صحيح.
d. اعمل مع فريقنا لتخصيص الموضع بحيث يتطابق مع مظهر علامتك التجارية وأسلوبها.
## الخصائص (الخصائص ***بالخط العريض والمائل*** موصى بها بشدة)
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
const cartItems = [
{
'itemPrice': '',
'itemQuantity': '',
'majorcat': '',
'majorcatid': '',
'minorcat': '',
'minorcatid': '',
'productname': '',
'sku': '',
},
{
...
}
]
```
خصائص العميل/الطلب
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
{
attributes: {
// Required
amount: '', //In $
firstname: '',
lastname: '',
billingzipcode: '',
Country: '',
Language: '',
currency: '',
cartItems: JSON.stringify(cartItems), //From above
email: '',
//Order Data
clientcustomerid: '',
cartId: '',
subtotal: '',
totalTax: '',
totalShipping: '',
margin: '',
paymenttype: '',
ccbin: '',
//Customer Data
customerType: '',
hasAccount: '',
isReturning: '',
lastVisited: '',
isLoyalty: '',
loyaltyTier: '',
mobile: '',
title: '',
age: '',
gender: '',
dob: '',
billingAddress1: '',
billingAddress2: '',
billingCity: '',
billingState: '',
billingCountry: '',
shippingAddress1: '',
shippingAddress2: '',
shippingCity: '',
shippingState: '',
shippingZipcode: '',
shippingCountry: '',
},
```
## السكربت الأولي
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```