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

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

اگر یک برنامه Next.js دارید، می‌توانید ویجت لایو چت گپیفای را اضافه کرده و با بازدیدکنندگان خود به صورت هم‌زمان صحبت کنید. برای یکپارچه‌سازی گپیفای با برنامه Next.js خود، به یک کامپوننت نیاز دارید که اسکریپت گپیفای را بارگذاری کند.

این کار را می‌توانید در دو مرحله سریع انجام دهید. این مثال یک کامپوننت React را نشان می‌دهد که اسکریپت گپیفای را به صورت غیرهم‌زمان بارگذاری می‌کند.

مرحله ۱. کپی و ایجاد!

کد زیر را کپی کرده و فایلی در پوشه کامپوننت‌های خود با نام GapifyWidget.js ایجاد کنید.

import React from 'react';

class GapifyWidget extends React.Component {
  componentDidMount () {
    // Add Gapify Settings
    window.gapifySettings = {
      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.gapifySDK.run({
          websiteToken: '<your-website-token>',
          baseUrl: BASE_URL
        })
      }
    })(document,"script");
  }

  render () {
    return null;
  }
}

export default GapifyWidget

مرحله ۲. وارد کردن

کامپوننت را در صفحات یا کامپوننت layout خود وارد کنید، همانطور که در زیر نشان داده شده است.

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

import GapifyWidget from '../components/GapifyWidget'

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

export default Page

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