Wie installiert man Live-Chat in einer Next.js-App?

Wenn Sie eine Next.js-App haben, können Sie das Chatwoot Live-Chat-Widget hinzufügen und in Echtzeit mit Ihren Besuchern sprechen. Um Chatwoot in Ihre Next.js-Anwendung zu integrieren, benötigen Sie eine Komponente, die das Chatwoot-Skript lädt.

Sie können dies in zwei einfachen Schritten erledigen. Lassen Sie uns dies an einem Beispiel verdeutlichen. Dieses Beispiel zeigt eine React-Komponente, die das Chatwoot-Skript asynchron lädt.

Schritt 1. Kopieren und Erstellen!

Kopieren Sie den folgenden Code und erstellen Sie eine Datei im Ordner components mit dem Namen 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

Schritt 2. Importieren​

Importieren Sie die Komponente in Ihren Seiten oder Ihre Layout-Komponente, wie unten gezeigt.

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

import ChatwootWidget from '../components/ChatwootWidget'

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

export default Page

Jetzt sollten Sie das Chatwoot-Widget auf der Seite sehen können.