لدمج Chatwoot مع تطبيق Vue.js الخاص بك، تحتاج إلى لصق كود ودجت Chatwoot في ملف `index.html`  الخاص بتطبيق Vue.js الخاص بك. إليك كيفية القيام بذلك: ## الخطوة 1. الحصول على كود الودجت الخاص بك يمكنك العثور على كود الودجت الخاص بك في إعدادات صندوق الوارد الخاص بموقعك الإلكتروني. انتقل إلى الإعدادات -> صناديق الوارد -> اختر قناة موقعك > علامة التبويب `الإعدادات`. إذا لم تقم بإنشاء صندوق وارد لموقع إلكتروني بعد، يمكنك العثور على التعليمات خطوة بخطوة [هنا](https://www.chatwoot.com/hc/user-guide/articles/1788726252-). ## الخطوة 2. نسخ الكود انسخ الكود الذي تم إنشاؤه في حقل `code`  الخاص بالقناة. ![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBK2x6VHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--742964bf7893816db8255942c6e56582a9d9bc93/script%20for%20a%20website%20inbox.png) ## الخطوة 3. الصق الكود هنا افتح مشروع Vue الخاص بك والصق الكود في ملف index.html، مباشرة قبل وسم الإغلاق ``. ```
``` ## الخطوة 4. تحقق! ستتمكن الآن من رؤية ودجت Chatwoot على الصفحة. سيظهر بهذا الشكل تقريباً: ![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL2R6VHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--2f073ca9ea425355fb29783559691c9521a8f00b/vue.png) ### Vue.js، وحدة Nuxt.js هناك وحدة مطورة من قبل المجتمع (من فريق [@huntersofbook](https://github.com/productdevbook/chatwoot)) لدمج Chatwoot في مشاريعك باستخدام Vue 3 و Nuxt 3. يمكنك الاطلاع على [عرض توضيحي هنا](http://vue-chatwoot-plugin.vercel.app/). * عرض [وحدة Vue 3](https://github.com/productdevbook/chatwoot/tree/main/demo/vue3). * عرض [وحدة Nuxt 3](https://github.com/productdevbook/chatwoot/tree/main/demo/nuxt3).