SPA کے لیے

SEATEXT AI JavaScript اسنیپٹ کو اپنی سنگل پیج ایپلیکیشن (SPA) میں شامل کرنے کے لیے فراہم کردہ کوڈ کو اپنے پروجیکٹ میں ایمبیڈ کرنا ضروری ہے۔ یہ گائیڈ اس اسنیپٹ کو شامل کرنے کے لیے درکار مراحل کو بیان کرتا ہے، تاکہ یہ React، Vue اور Angular جیسے مختلف SPA فریم ورک کے ساتھ بغیر کسی رکاوٹ کے یکجا ہو سکے۔

SEATEXT AI اسنیپٹ

یہ وہ SEATEXT AI اسنیپٹ ہے جسے آپ کو شامل کرنا ہے:

SEATEXTCODEINTEGRATION

عام ہدایات

انٹری پوائنٹ کی شناخت کریں: یہ طے کریں کہ آپ کی SPA کہاں شروع ہوتی ہے۔ عام طور پر یہ index.html فائل یا مرکزی JavaScript/TypeScript فائل میں ہوتا ہے جہاں آپ کا فریم ورک ایپلیکیشن کو ماؤنٹ کرتا ہے۔ اسنیپٹ شامل کریں: SEATEXT AI اسنیپٹ کو اپنی index.html فائل کے body ٹیگ کے اندر یا SPA فریم ورک کے مساوی انیشیئلائزیشن سیکشن میں داخل کریں۔

خاص SPA فریم ورک کے لیے ہدایات

1. React

In a React application, the entry point is usually the public/index.html file. Locate index.html: Find the public/index.html file in your React project. Insert the Snippet: Add the SEATEXT AI snippet just before the closing </body> tag.

مثال

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React App</title> </head> <body> <div id="root"></div> <script> localStorage.setItem('seatext_id', "96733aab-aaad-4e0e-90ec-5c899e524514"); window.globalSeatextID = "96733aab-aaad-4e0e-90ec-5c899e524514"; </script> <script async src="https://login.seatext.com/seatext.js?id=96733aab-aaad-4e0e-90ec-5c899e524514"></script> </body> </html>

2. Vue.js

In a Vue.js application, the entry point is typically the public/index.html file. Locate index.html: Find the public/index.html file in your Vue project. Insert the Snippet: Add the SEATEXT AI snippet just before the closing </body> tag.

مثال

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue App</title> </head> <body> <div id="app"></div> <script> localStorage.setItem('seatext_id', "96733aab-aaad-4e0e-90ec-5c899e524514"); window.globalSeatextID = "96733aab-aaad-4e0e-90ec-5c899e524514"; </script> <script async src="https://login.seatext.com/seatext.js?id=96733aab-aaad-4e0e-90ec-5c899e524514"></script> </body> </html>

3. Angular

In an Angular application, the entry point is usually the src/index.html file. Locate index.html: Find the src/index.html file in your Angular project. Insert the Snippet: Add the SEATEXT AI snippet just before the closing </body> tag.

مثال

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Angular App</title> </head> <body> <app-root></app-root> <script> localStorage.setItem('seatext_id', "96733aab-aaad-4e0e-90ec-5c899e524514"); window.globalSeatextID = "96733aab-aaad-4e0e-90ec-5c899e524514"; </script> <script async src="https://login.seatext.com/seatext.js?id=96733aab-aaad-4e0e-90ec-5c899e524514"></script> </body> </html>

اضافی غور و فکر

اضافی نکات بےہموار لوڈنگ: سنیپٹ اسکرپٹ ٹیگ کے لیے async صفت شامل کرتا ہے، جس سے SEATEXT AI اسکرپٹ بےہموار طور پر لوڈ ہوتا ہے، جس سے پیج لوڈ کی کارکردگی برقرار رہتی ہے۔ لوکل اسٹوریج استعمال: اسکرپٹ لوکل اسٹوریج میں ایک ID محفوظ کرتا ہے۔ یقینی بنائیں کہ آپ کی ایپلیکیشن کے پاس لوکل اسٹوریج تک رسائی اور استعمال کی ضروری اجازت ہے۔ کروس-آورجن نکات: اگر آپ کی SPA متعدد ڈومینوں کے ساتھ تعامل کرتی ہے، تو یقینی بنائیں کہ SEATEXT AI اسکرپٹ مطابقت رکھتا ہے اور کروس-آورجن مسائل کا سامنا نہیں کرتا۔

انٹیگریشن کی جانچ

اس اسنیپٹ کو شامل کرنے کے بعد، یہ اقدامات کریں تاکہ یہ درست طریقے سے انٹیگریٹ ہو: بلڈ اور سروس: اپنے فریم ورک کے معیاری کمانڈز (npm start، npm run serve، یا ng serve) استعمال کرتے ہوئے اپنی ایپلیکیشن کو بنائیں اور سروس کریں۔ صفحے کا معائنہ: اپنے براؤزر کے ڈویلپر ٹولز (F12) کھولیں اور کنسول اور نیٹ ورک ٹیبز چیک کریں تاکہ یہ تصدیق ہو سکے کہ SEATEXT AI اسکرپٹ بغیر کسی غلطی کے لوڈ ہو رہا ہے۔ فنکشنلٹی چیک: اس بات کو یقینی بنائیں کہ SEATEXT AI کی خصوصیات آپ کے SPA میں متوقع طور پر کام کر رہی ہیں۔

نتیجہ

اس قدم بہ قدم گائیڈ پر عمل کر کے آپ SEATEXT AI JavaScript اسنیپٹ کو اپنی سنگل پیج ایپلیکیشن میں بغیر کسی رکاوٹ کے شامل کر سکتے ہیں۔ اگر آپ کو کوئی مسئلہ درپیش ہو یا مزید مدد کی ضرورت ہو تو براہ کرم سپورٹ سے رابطہ کریں۔