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

إذا كان لديك تطبيق Next.js، يمكنك إضافة أداة الدردشة الحية Voxys Connect والتحدث مع زوارك في الوقت الحقيقي. لدمج Voxys Connect مع تطبيق Next.js الخاص بك، تحتاج إلى مكون يقوم بتحميل سكريبت Voxys Connect.

يمكنك القيام بذلك في خطوتين سريعتين. دعنا نوضح ذلك بمثال أدناه. يُظهر هذا المثال مكون React يقوم بتحميل سكريبت Voxys Connect بشكل غير متزامن.

الخطوة 1. النسخ والإنشاء!

انسخ الكود التالي وأنشئ ملفًا في مجلد components بالاسم ChatwootWidget.js.

import React from 'react';

class ChatwootWidget extends React.Component {
  componentDidMount () {
    // إضافة إعدادات Chatwoot
    window.chatwootSettings = {
      hideMessageBubble: false,
      position: 'right', // يمكن أن تكون left أو right
      locale: 'en', // اللغة المراد تعيينها
      type: 'standard', // [standard, expanded_bubble]
    };

    // الصق السكريبت من إعدادات البريد الوارد باستثناء وسم <script>
    (function(d,t) {
      var BASE_URL="<your-installation-url>";
      var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
      g.src=BASE_URL+"/packs/js/sdk.js";
      s.parentNode.insertBefore(g,s);
      g.async=!0;
      g.onload=function(){
        window.chatwootSDK.run({
          websiteToken: '<your-website-token>',
          baseUrl: BASE_URL
        })
      }
    })(document,"script");
  }

  render () {
    return null;
  }
}

export default ChatwootWidget

الخطوة 2. الاستيراد​

استورد المكون في صفحاتك أو مكون التخطيط، كما هو موضح أدناه.

import React, { Fragment } from 'react'
// ...

import ChatwootWidget from '../components/ChatwootWidget'

const Page = () => (
  <Fragment>
    <ChatwootWidget />
    <Component {...}>
  </Fragment>
)

export default Page

ستتمكن الآن من رؤية أداة Voxys Connect على الصفحة.