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

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

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

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

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

import React from 'react';

class ChatwootWidget extends React.Component {
  componentDidMount () {
    // Add Super Chat 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

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