כיצד להתקין את Notiondesk מסנג'ר עם React ו-Next.js

Notiondesk מספק ערכת פיתוח תוכנה רשמית של JavaScript להתקנת Messenger ביישומי React ו-Next.js.

השתמשו ב-SDK במקום בקטע הקוד הסטנדרטי של Messenger <script> כאשר האתר שלכם בנוי באמצעות React, Next.js או יישום אחר של עמוד יחיד.

לפני שאתם מתחילים

אתה צריך:

• מסנג'ר Notiondesk שהוגדר בסביבת העבודה שלך

• מזהה המסנג'ר שלך

• אפליקציית React או Next.js

• גישה לקוד המקור של האפליקציה שלך

ניתן למצוא את מזהה המסנג'ר ואפשרויות ההתקנה שלך בהגדרות Notiondesk של המסנג'ר .

התקן את ערכת פיתוח התוכנה של Messenger

התקן את החבילה הרשמית:

עם חוט:

עם pnpm:

החבילה הרשמית זמינה ב-npm .

התקנת מסנג'ר ב-React

ייבא את NotiondeskProvider ועטוף את החלק של האפליקציה שלך שבו אמור להיות זמין Messenger.

עבור רוב היישומים, מקם את הספק ליד שורש האפליקציה שלך:

החלף את YOUR_MESSENGER_ID במזהה Messenger מסביבת העבודה Notiondesk שלך.

Messenger זמין כעת לרכיבים המוצגים בתוך NotiondeskProvider.

פתיחת מסנג'ר מקומפוננטת React

השתמש ב-hook useNotiondesk כשאתה צריך לשלוט ב-Messenger מהממשק שלך.

לדוגמה, ניתן ליצור כפתור תמיכה משלכם:

הרכיב המשתמש ב-useNotiondesk חייב להיות מעובד בתוך NotiondeskProvider.

התקנת מסנג'ר ב-Next.js

Notiondesk ‏Messenger פועל בדפדפן, לכן יש לאתחל את שילוב המסנג'ר מרכיב לקוח.

הדוגמה הבאה משתמשת בנתב האפליקציות Next.js.

1. צור רכיב לקוח Notiondesk

צור רכיב כגון notiondesk-setup.tsx:

החלף את YOUR_MESSENGER_ID במזהה המסנג'ר שלך Notiondesk.

npm install @notiondesk-so/messenger-js-sdk

yarn add @notiondesk-so/messenger-js-sdk

pnpm add @notiondesk-so/messenger-js-sdk

import { NotiondeskProvider } from "@notiondesk-so/messenger-js-sdk/react";

export function App({ children }) {
  return (
    <NotiondeskProvider messengerId="YOUR_MESSENGER_ID">
      {children}
    </NotiondeskProvider>
  );
}

import { useNotiondesk } from "@notiondesk-so/messenger-js-sdk/react";

export function SupportButton() {
  const { show } = useNotiondesk();

  return (
    <button onClick={() => void show()}>
      Contact support
    </button>
  );
}

"use client";

import {
  NotiondeskProvider,
  useNotiondesk,
} from "@notiondesk-so/messenger-js-sdk/react";
import type { ReactNode } from "react";

function SupportButton() {
  const { show } = useNotiondesk();

  return (
    <button onClick={() => void show()}>
      Contact support
    </button>
  );
}

export function NotiondeskSetup({
  children,
}: {
  children: ReactNode;
}) {
  return (
    <NotiondeskProvider messengerId="YOUR_MESSENGER_ID">
      {children}
      <SupportButton />
    </NotiondeskProvider>
  );
}

2. הוסיפו את הספק לפריסה שלכם

עבדו את רכיב הלקוח מפריסת השורש שלכם:

הוספת NotiondeskSetup לפריסת הבסיס הופכת את Messenger לזמין בכל רחבי האפליקציה.

אם Messenger אמור להיות זמין רק בחלקים ספציפיים של האפליקציה שלך, מקם את הספק בפריסה או דף ספציפיים יותר במקום זאת.

שליטה תכנותית ב-Messenger

ה-hook של React חושף פקדי Messenger בהם ניתן להשתמש מהקומפוננטות שלכם.

לְדוּגמָה:

ניתן להשתמש בשיטות אלה כדי לחבר את Messenger לכפתורים, ניווט, תפריטי תמיכה או ממשק משתמש אחר של יישומים משלך.

ערכת ה-SDK תומכת גם בתצורה ובבקרות נוספות כגון שינוי השפה או התבנית.

טעינה מותנית של מסנג'ר

ניתן למנוע טעינה של מסנג'ר עבור משתמשים שאין להם גישה אליו באמצעות האפשרות enabled:

שמור על לוגיקת ההרשאות של האפליקציה שלך אחראית להחלטה האם יש להפעיל את Messenger.

זה שימושי כאשר מסנג'ר אמור להיות זמין רק ללקוחות מחוברים, תוכניות ספציפיות או אזורים מסוימים באפליקציה שלך.

import { NotiondeskSetup } from "./notiondesk-setup";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <NotiondeskSetup>
          {children}
        </NotiondeskSetup>
      </body>
    </html>
  );
}

const notiondesk = useNotiondesk();

await notiondesk.show();
await notiondesk.hide();
await notiondesk.toggle();

<NotiondeskProvider
  messengerId="YOUR_MESSENGER_ID"
  enabled={currentUser.canUseSupportWidget}
>
  {children}
</NotiondeskProvider>

זיהוי משתמשים מחוברים

Notiondesk מסנג'ר יכול לזהות משתמשים מאומתים באמצעות אסימון משתמש חתום שנוצר על ידי השרת האחורי שלך.

העבר את הטוקן לספק:

לעולם אל תחשוף את סוד האפליקציה Notiondesk שלך ב-React או בקוד אחר של דפדפן.

סוד האפליקציה חייב להישאר בשרת שלך. הקצה הקדמי שלך צריך לקבל רק את אסימון המשתמש החתום והקצרת הטווח שנוצר על ידי הקצה הקדמי שלך.

אימות ההתקנה

לאחר התקנת ה-SDK:

<NotiondeskProvider
  messengerId="YOUR_MESSENGER_ID"
  userToken={userToken}
>
  {children}
</NotiondeskProvider>

1. הפעל או פרוס את האפליקציה שלך.

2. פתח דף המוצג בתוך NotiondeskProvider

3. ודא שהמסנג'ר נטען כראוי

4. אם הוספת כפתור תמיכה מותאם אישית, לחץ עליו וודא ש-Messenger נפתח

5. בדיקת ניווט בין דפים ביישום שלך

6. בדוק את קונסולת הדפדפן עבור שגיאות JavaScript

עבור Next.js, יש לבדוק גם מבנה ייצור מכיוון שהתנהגות הרינדור של לקוח/שרת יכולה להיות שונה מפיתוח מקומי.

פתרון בעיות

"use client";

<NotiondeskProvider messengerId="YOUR_MESSENGER_ID">
  <SupportButton />
</NotiondeskProvider>

const { show } = useNotiondesk();

<button onClick={() => void show()}>
  Contact support
</button>