TAWK.TO と NEXTjs の統合

開発者の皆さん!

この記事では、tawk.to と NEXTjs との統合について学びます。

TAWK.to について:
Tawk.to は、企業が Web サイト訪問者とリアルタイムで対話できるようにする、無料のクラウドベースのライブ チャット ソフトウェアです。チャット監視、自動トリガー、さまざまなプラットフォームとの統合などの機能を提供します。 Tawk.to は、使いやすさ、カスタマイズ オプション、手頃な価格で人気があります。

Nextjs と統合する手順
tawk.to ドキュメント https://help.tawk.to/article/react-js.

からヘルプを参照できます。

それ以外の場合は、次の手順に従ってください:

1- Nextjs アプリケーションにライブラリをインストールします
糸追加 @tawk.to/tawk-messenger-react

2- https://help.tawk.to/ に移動してサインアップします
3- ウィジェット/プロジェクトを作成し、ダッシュボードに移動します
4- nextjs アプリケーションの page.js ファイルに tawk-messenger-react をインポートします。次に、widgetId と propertyId の値を割り当てます。 API を使用する場合、useRef を使用して tawk-messenger-react コンポーネントからオブジェクト関数にアクセスする必要があります。

5- tawk.to のプロジェクト ダッシュボードに移動して ID を取得します。

以下の例では、プロパティ ID は xxxxxxxxxxxxxxxxxxxxxxxx で、widgetId は 123456789 です。

6- page.js 内:
`「クライアントを使用する」
import TawkMessengerReact から '@tawk.to/tawk-messenger-react';
import useUserStore from "../stores/userStore";
import {useRef} from "react";
デフォルト関数ページをエクスポート({ Children }) {
const tawkMessengerRef = useRef();
const {userData } = useUserStore();
const handleMinimize = () => {
tawkMessengerRef.current.minimize();
};
const onTawkLoad = () => {
console.log("Tawk.to ウィジェットがロードされました");

if (window.Tawk_API) {
  const userName = userData.full_name;// "Hussain Ahmed" 
  const userEmail = userData.email;"hussainsidd99@gmail.com"
  const userPhone=userData.phone_number; "+2342523"
  // Use Tawk.to's identify method to set the visitor's information
  window.Tawk_API.setAttributes({
    name: userName,
    email: userEmail,
    phone: userPhone,
  }, function (error) {
    if (error) {
      console.error("Error setting Tawk.to user details:", error);
    } else {
      console.log("User details successfully sent to Tawk.to");
    }
  });

  // Alternatively, use this to set visitor attributes directly
  window.Tawk_API.visitor = {
    name: userName,
    email: userEmail,
  };
} else {
  console.error("Tawk_API is not available");
}

};
戻る (

{子供たち}
チャットを最小限に抑える
propertyId="66be1852146b7af4a43ad88f"
ウィジェットId="1i5b8u1aq"
ref={tawkMessengerRef}
onLoad={onTawkLoad}
/>

);
}`

onLoad={onTawkLoad} これは、訪問者/ユーザー情報など、アプリケーションから tawk.to に送信する内容を定義します。

プロジェクトの要件に従ってコードを更新してください!
ありがとう

以上がTAWK.TO と NEXTjs の統合の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。