لدمج Chatwoot مع تطبيق Vue.js الخاص بك، تحتاج إلى لصق كود ودجت Chatwoot في ملف index.html الخاص بتطبيق Vue.js الخاص بك.
إليك كيفية القيام بذلك:
الخطوة 1. الحصول على كود الودجت الخاص بك
يمكنك العثور على كود الودجت الخاص بك في إعدادات صندوق الوارد الخاص بموقعك الإلكتروني. انتقل إلى الإعدادات -> صناديق الوارد -> اختر قناة موقعك > علامة التبويب الإعدادات.
إذا لم تقم بإنشاء صندوق وارد لموقع إلكتروني بعد، يمكنك العثور على التعليمات خطوة بخطوة هنا.
الخطوة 2. نسخ الكود
انسخ الكود الذي تم إنشاؤه في حقل code الخاص بالقناة.
الخطوة 3. الصق الكود هنا
افتح مشروع Vue الخاص بك والصق الكود في ملف index.html، مباشرة قبل وسم الإغلاق </body>.
<body>
<noscript>
<strong
>نعتذر ولكن <%= htmlWebpackPlugin.options.title %> لا يعمل بشكل صحيح
بدون تفعيل الجافاسكريبت. يرجى تفعيلها للاستمرار.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- Chatwoot script goes here -->
<script>
(function (d, t) {
var BASE_URL = "https://example.com";
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = BASE_URL + "/packs/js/sdk.js";
g.defer = true;
g.async = true;
s.parentNode.insertBefore(g, s);
g.onload = function () {
window.chatwootSDK.run({
websiteToken: "yZ7USzaEs7hrwUAHLGwjbxJ1",
baseUrl: BASE_URL,
});
};
})(document, "script");
</script>
<!-- Chatwoot script goes here -->
</body>
الخطوة 4. تحقق!
ستتمكن الآن من رؤية ودجت Chatwoot على الصفحة. سيظهر بهذا الشكل تقريباً:
Vue.js، وحدة Nuxt.js
هناك وحدة مطورة من قبل المجتمع (من فريق @huntersofbook) لدمج Chatwoot في مشاريعك باستخدام Vue 3 و Nuxt 3. يمكنك الاطلاع على عرض توضيحي هنا.
-
عرض وحدة Vue 3.
-
عرض وحدة Nuxt 3.