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

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

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

الخطوة 1. انسخ وأنشئ!

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

import React from 'react';

class ChatwootWidget extends React.Component {
  componentDidMount () {
    // Add Chatwoot Settings
    window.chatwootSettings = {
      hideMessageBubble: false,
      position: 'right', // This can be left or right
      locale: 'en', // Language to be set
      type: 'standard', // [standard, expanded_bubble]
    };

    // Paste the script from inbox settings except the <script> tag
    (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

ستتمكن الآن من رؤية ويدجت Chatwoot على الصفحة.