الرئيسية الدردشة المباشرة على الموقع الإلكتروني كيفية تثبيت الدردشة الحية على تطبيق Vue.js؟

كيفية تثبيت الدردشة الحية على تطبيق Vue.js؟

آخر تحديث في May 28, 2026

لدمج Voxys Connect مع تطبيق Vue.js الخاص بك، تحتاج إلى لصق سكريبت أداة Voxys Connect في ملف index.html لتطبيق Vue.js الخاص بك.

إليك كيفية القيام بذلك:

الخطوة 1. الحصول على سكريبت الأداة​

يمكنك العثور على سكريبت الأداة في إعدادات صندوق الوارد لموقعك الإلكتروني. اذهب إلى الإعدادات -> صناديق الوارد -> اختر قناة موقع الويب الخاصة بك > تبويب Configuration.

إذا لم تقم بإنشاء صندوق وارد لموقع الويب بعد، يمكنك العثور على التعليمات خطوة بخطوة هنا.

الخطوة 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. التحقق

ستتمكن الآن من رؤية أداة Voxys Connect على الصفحة. شيء مثل هذا:

وحدة Vue.js و Nuxt.js​

تتوفر وحدة تتم صيانتها من قبل المجتمع (صنعها الفريق الرائع في @huntersofbook) لدمج Voxys Connect في مشاريع Vue 3 و Nuxt 3 الخاصة بك. يمكنك العثور على عرض تجريبي هنا.