صفحه اصلی لایو چت وبسایت نحوه اضافه کردن ویجت لایوچت به یک برنامه Vue.js

نحوه اضافه کردن ویجت لایوچت به یک برنامه Vue.js

آخرین به‌روزرسانی در تاریخ Aug 01, 2024

چگونه ویجت لایو چت را در یک برنامه Vue.js نصب کنیم؟

برای یکپارچه‌سازی گپیفای با برنامه Vue.js خود، باید اسکریپت ویجت گپیفای را در فایل index.html برنامه Vue.js خود قرار دهید.

در اینجا نحوه انجام این کار آورده شده است:

مرحله ۱. دریافت اسکریپت ویجت

می‌توانید اسکریپت ویجت خود را در تنظیمات صندوق ورودی وب‌سایت خود پیدا کنید. به مسیر تنظیمات -> صندوق های ورودی -> انتخاب کانال وبسایت -> تب پیکربندی ، بروید.

اگر هنوز صندوق ورودی وب‌سایت ایجاد نکرده‌اید، می‌توانید راهنمای مرحله به مرحله را از این لینک پیدا ببینید.

مرحله ۲. کپی کردن اسکریپت

اسکریپتی را که در قسمت کد کانال ایجاد شده است، کپی کنید.

مرحله ۳. جایگذاری اسکریپت

پروژه Vue خود را باز کنید و اسکریپت را در فایل index.html، درست قبل از تگ پایانی </body> جایگذاری کنید.

<body>
  <noscript>
    <strong
      >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
      properly without JavaScript enabled. Please enable it to continue.</strong
    >
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->

  <!-- Gapify 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.gapifySDK.run({
          websiteToken: "yZ7USzaEs7hrwUAHLGwjbxJ1",
          baseUrl: BASE_URL,
        });
      };
    })(document, "script");
  </script>
  <!-- Gapify script goes here -->
</body>

مرحله۴.بررسی

اکنون باید بتوانید ویجت گپیفای را روی صفحه ببینید.مانند تصویر زیر: