Cách cài đặt live chat trên ứng dụng Next.js?

Nếu bạn có ứng dụng Next.js, bạn có thể thêm widget live chat SquareHub và trò chuyện với khách truy cập theo thời gian thực. Để tích hợp SquareHub với ứng dụng Next.js của bạn, bạn cần một component tải script SquareHub.

Bạn có thể thực hiện điều này trong hai bước nhanh. Hãy minh họa điều này với ví dụ bên dưới. Ví dụ này trình bày một React component tải script SquareHub bất đồng bộ.

Bước 1. Sao chép và tạo file!

Sao chép đoạn code sau và tạo một file trong thư mục components của bạn với tên SquareHubWidget.js.

import React from 'react';

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

  render () {
    return null;
  }
}

export default SquareHubWidget

Bước 2. Import​

Import component vào các trang hoặc layout component của bạn, như minh họa bên dưới.

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

import SquareHubWidget from '../components/SquareHubWidget'

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

export default Page

Bạn sẽ thấy widget SquareHub xuất hiện trên trang ngay bây giờ.