שלוט ב-Notiondesk Messenger באמצעות ערכת פיתוח התוכנה של JavaScript

ערכת פיתוח התוכנה ל-JavaScript של Messenger Notiondesk מאפשרת לך לשלב את Messenger ישירות עם הממשק והמצב של האפליקציה שלך.

אתה יכול:

• פתיחה וסגירה של מסנג'ר מממשק המשתמש שלך

• שלח מבקרים ישירות לעזרה, הודעות, יצירת קשר או יומן שינויים

• בנה את משגר המסנג'ר שלך

• תגובה לאירועי מסנג'ר

• סנכרן את Messenger עם ערכת הנושא והשפה של האפליקציה שלך

• עדכון משתמשים מאומתים מבלי לטעון מחדש את הדף

• שינוי מיקום וערימה בזמן ריצה

• שילוב של Messenger עם מצב האפליקציה React ו-Vue

• הסרה ואתחול מחדש של Messenger בעת הצורך

השתמש ב-SDK עבור יישומים הזקוקים לשליטה רבה יותר מזו שמספק קטע ההתקנה הסטנדרטי של Messenger.

התקן את ערכת ה-SDK

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

אפשר גם להשתמש בחוט:

או pnpm:

אתחול המסנג'ר

ייבא את initNotiondesk() וספק את מזהה המסנג'ר שלך:

initNotiondesk() נפתר כאשר Messenger מוכן לשימוש, כך שהתבנית הבטוחה ביותר היא להמתין לאתחול לפני קריאה לשיטות SDK:

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

להתקנת React ו-Next.js, ראו כיצד להתקין את Notiondesk Messenger עם React ו-Next.js.

פתיחה, סגירה והפעלת מסנג'ר

פתח את המסנג'ר

השתמש ב-show():

לְדוּגמָה:

סגור את המסנג'ר

השתמש ב-hide():

החלף/הפעל את המסנג'ר

השתמשו ב-toggle() כדי לפתוח את המסנג'ר כשהוא סגור ולסגור אותו כשהוא פתוח:

toggle() שימושי במיוחד כאשר האפליקציה שלך מספקת כפתור משלה ב-Messenger.

פתח מדור ספציפי ב-Messenger

השתמש ב-showTab() כדי לפתוח את Messenger ישירות במודול ספציפי:

הכרטיסיות הזמינות הן:

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

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

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

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

const notiondesk = await initNotiondesk({
  messengerId: "YOUR_MESSENGER_ID",
});

const notiondesk = await initNotiondesk({
  messengerId: "YOUR_MESSENGER_ID",
});

await notiondesk.show();

await notiondesk.show();

document.querySelector("#support")?.addEventListener("click", () => {
  void notiondesk.show();
});

await notiondesk.hide();

await notiondesk.toggle();

notiondesk.showTab("help");

לְדוּגמָה:

showTab() פותח גם את מסנג'ר אם הוא סגור כרגע.

המודול המבוקש חייב להיות מופעל בתצורת המסנג'ר שלך. לדוגמה, showTab("changelog") לא יעבור ליומן שינויים אם מודול יומן השינויים מושבת.

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

לְדוּגמָה:

helpButton.addEventListener("click", () => {
  notiondesk.showTab("help");
});

updatesButton.addEventListener("click", () => {
  notiondesk.showTab("changelog");
});

contactButton.addEventListener("click", () => {
  notiondesk.showTab("contact");
});

• מרכז עזרה → showTab("help")

• שאל את הבינה המלאכותית → showTab("messages")

• צור קשר עם התמיכה → showTab("contact")

• מה חדש → showTab("changelog")

השתמש בכפתור המסנג'ר שלך

אינך חייב להשתמש במפעיל ברירת המחדל Notiondesk.

כבו את "הצג את מפעיל האפליקציה" בהגדרות המסנג'ר, ולאחר מכן השתמשו ב-SDK כדי לפתוח את המסנג'ר מהממשק שלכם.

לְדוּגמָה:

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

בעת שימוש במפעיל מותאם אישית, עדיף להשתמש ב-toggle() אם אותו פקד אמור לפתוח ולסגור את Messenger גם יחד.

האזינו לאירועי מסנג'ר

ה-SDK חושף אירועים דרך on() ו- off().

לְדוּגמָה:

הפונקציה on() מחזירה פונקציית ביטול מנוי:

אירועי מסנג'ר זמינים

const notiondesk = await initNotiondesk({
  messengerId: "YOUR_MESSENGER_ID",
});

document.querySelector("#help")?.addEventListener("click", () => {
  void notiondesk.toggle();
});

notiondesk.on("messenger:show", () => {
  console.log("Messenger opened");
});

notiondesk.on("messenger:hide", () => {
  console.log("Messenger closed");
});

const unsubscribe = notiondesk.on("messenger:show", () => {
  console.log("Messenger opened");
});

// Later
unsubscribe();

עקוב אחר באיזה מדור מסנג'ר משתמשים מבקרים

האירוע messenger:tabChanged כולל את הכרטיסייה הנוכחית והקודמת.

לדוגמה, ניתן להעביר פעילות של מסנג'ר לפלטפורמת האנליטיקה שלך:

שמרו על סנכרון של המשגר ​​שלכם

אירועים יכולים גם לסנכרן את ממשק המשתמש שלך עם מצב Messenger:

שנה את ערכת הנושא של המסנג'ר

השתמשו ב-setTheme() כדי לעבור בין מצב בהיר למצב כהה מבלי לטעון מחדש את Messenger:

אוֹ:

לדוגמה, סנכרנו את Messenger עם ערכת הנושא של האפליקציה שלכם:

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

השתמש בלוח המחוונים Notiondesk עבור הצבעים, הגופנים, מראה המשגר ​​והגדרות מותג אחרות של המסנג'ר שלך. בקרת ערכת הנושא של SDK מיועדת להחלפת ערכת הצבעים הפעילה.

שנה את שפת המסנג'ר

השתמש ב-setLanguage():

זה שימושי כאשר לאפליקציה שלך כבר יש בורר שפה משלה:

יש להפעיל את המיקום המבוקש עבור המסנג'ר שלך ב-Notiondesk.

אם המיקום אינו מופעל, Messenger שומר במקום זאת שפה מוגדרת זמינה.

עדכון מסנג'ר לאחר אתחול

השתמש ב-updateConfig() כאשר מצב האפליקציה משתנה לאחר ש-Messenger כבר נטען.

notiondesk.on(
  "messenger:tabChanged",
  ({ tabName, previousTab }) => {
    console.log("Messenger tab:", tabName);
  },
);

notiondesk.on("messenger:show", () => {
  analytics.track("support_opened");
});

notiondesk.on("messenger:tabChanged", ({ tabName }) => {
  analytics.track("support_tab_opened", {
    tab: tabName,
  });
});

notiondesk.on("messenger:show", () => {
  helpButton.setAttribute("aria-expanded", "true");
});

notiondesk.on("messenger:hide", () => {
  helpButton.setAttribute("aria-expanded", "false");
});

notiondesk.setTheme("dark");

notiondesk.setTheme("light");

notiondesk.setTheme(
  isDarkMode ? "dark" : "light",
);

const colorScheme = window.matchMedia(
  "(prefers-color-scheme: dark)",
);

function syncMessengerTheme() {
  notiondesk.setTheme(
    colorScheme.matches ? "dark" : "light",
  );
}

syncMessengerTheme();

colorScheme.addEventListener(
  "change",
  syncMessengerTheme,
);

notiondesk.setLanguage("fr");

notiondesk.setLanguage(currentLocale);

עדכון משתמש מאומת

לאחר כניסה של משתמש:

מסנג'ר מעדכן את המשתמש הנוכחי מבלי לדרוש טעינה מחדש של הדף.

חזרה למשתמש אנונימי

כאשר משתמש מתנתק:

לקבלת תהליך האימות המלא, ראה זיהוי משתמשים מחוברים ב-Notiondesk Messenger .

שנה את מיקום המסנג'ר

ניתן להעביר את המסנג'ר בזמן ריצה:

תפקידים נתמכים הם:

notiondesk.updateConfig({
  userToken,
});

notiondesk.updateConfig({
  userToken: null,
});

notiondesk.updateConfig({
  position: "bottom-left",
});

• bottom-right

• bottom-left

מיקום ברירת המחדל של משגר המערכת אמור להיות מוגדר בדרך כלל בלוח המחוונים Notiondesk. השתמש ב-updateConfig() כאשר האפליקציה שלך זקוקה לעקיפה זמנית של זמן ריצה.

לדוגמה, ייתכן שתזיז את Messenger כאשר אלמנט צף אחר תופס את אותה פינה.

שנה את רמת הערימה

אם מסנג'ר צריך להופיע מעל רכיב אחר באפליקציה:

השתמש ב-Messenger עם משתמשים מאומתים

העבר אסימון משתמש חתום בעת אתחול Messenger:

ניתן גם להתחיל באופן אנונימי ולזהות את המשתמש מאוחר יותר:

הטוקן חייב להיווצר על ידי השרת האחורי שלך.

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

ראה זיהוי משתמשים מחוברים ב-Notiondesk Messenger לקבלת תהליך האימות וההתנתקות המלא.

הסר את המסנג'ר

השתמש ב-destroy() כדי להסיר לחלוטין את מופע המסנג'ר הנוכחי:

השתמש ב-destroy() כאשר:

notiondesk.updateConfig({
  zIndex: 10000,
});

const notiondesk = await initNotiondesk({
  messengerId: "YOUR_MESSENGER_ID",
  userToken,
});

const notiondesk = await initNotiondesk({
  messengerId: "YOUR_MESSENGER_ID",
});

notiondesk.updateConfig({
  userToken,
});

notiondesk.destroy();

• המסנג'ר לא אמור להתקיים עוד בדף הנוכחי

• חשבון משתמש מועבר

• האפליקציה שלך מנתקת את שילוב המסנג'ר

• עליך לאתחל סשן מסנג'ר חדש

ניתן לאתחל את המסנג'ר שוב לאחר השמדתו.

טען את המסנג'ר מבלי לאתחל אותו

עבור יישומים הזקוקים לשליטה רבה יותר על האתחול, השתמשו בפונקציה loadNotiondesk():

רוב היישומים צריכים להשתמש ב-initNotiondesk() במקום זאת.

loadNotiondesk() שימושי כאשר טעינת ה-SDK של Messenger והפעלת ה-Messenger עצמה צריכה להתרחש בנקודות שונות במחזור החיים של האפליקציה שלך.

גישה ל-API של Messenger שכבר טעון

השתמש ב-getNotiondesk() כדי לגשת באופן סינכרוני ל-API כאשר Messenger כבר נטען:

אם המסנג'ר עדיין לא נטען, getNotiondesk() מחזירה null.

לאתחול רגיל של יישומים, עדיף להשתמש ב-initNotiondesk().

בקרות ומצב של ריאקט

יישומי React צריכים להשתמש ב:

useNotiondesk() מספק גם פקדי Messenger וגם את מצב הטעינה הנוכחי שלו.

לְדוּגמָה:

הערכים הזמינים כוללים:

import {
  loadNotiondesk,
} from "@notiondesk-so/messenger-js-sdk";

const notiondesk = await loadNotiondesk();

await notiondesk.init({
  messengerId: "YOUR_MESSENGER_ID",
});

import {
  getNotiondesk,
} from "@notiondesk-so/messenger-js-sdk";

getNotiondesk()?.show();

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

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

  return (
    <button
      disabled={status !== "ready"}
      onClick={() => void show()}
    >
      Contact support
    </button>
  );
}

השתמש ב-api כשאתה זקוק ל-APIs כגון מנויי אירועים:

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

עבור שינויים בזמן ריצה, העדיפו setTheme(), setLanguage(), או updateConfig() במקום לשנות שוב ושוב את תצורת הספק.

בקרות ומצב Vue

יישומי Vue יכולים לגשת ל-Messenger באמצעות:

לְדוּגמָה:

האינטגרציה של Vue חושפת גם את ה-API של Messenger, את הסטטוס, השגיאות ואת אותם בקרות זמן ריצה כמו ערכת ה-SDK המרכזית.

מתכוני SDK נפוצים

צור כפתור עזרה מותאם אישית

כבה את משגר ברירת המחדל בהגדרות Notiondesk של המסנג'ר שלך:

פתח את מרכז העזרה שלך ישירות

פתח את עוזר הבינה המלאכותית שלך ישירות

יש להפעיל ולהגדיר את מודול ההודעות ב-Messenger.

פתח את טופס יצירת הקשר שלך ישירות

פתח את יומן השינויים שלך מקישור "מה חדש"

הסתר את Messenger בנתיב יישום ספציפי

הרחקת מסנג'ר מאלמנט צף אחר

מעקב אחר השימוש במסנג'ר

עדכון מסנג'ר לאחר כניסה

נקה את המשתמש לאחר יציאה

פתרון בעיות

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

function MessengerAnalytics() {
  const { api } = useNotiondesk();

  useEffect(() => {
    if (!api) {
      return;
    }

    return api.on("messenger:show", () => {
      analytics.track("support_opened");
    });
  }, [api]);

  return null;
}

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

<script setup lang="ts">
import {
  useNotiondesk,
} from "@notiondesk-so/messenger-js-sdk/vue";

const {
  show,
  showTab,
  isReady,
} = useNotiondesk();
</script>

<template>
  <button
    :disabled="!isReady"
    @click="show()"
  >
    Contact support
  </button>

  <button @click="showTab('changelog')">
    What's new
  </button>
</template>

helpButton.addEventListener("click", () => {
  void notiondesk.toggle();
});

notiondesk.showTab("help");

notiondesk.showTab("messages");

notiondesk.showTab("contact");

notiondesk.showTab("changelog");

if (window.location.pathname.startsWith("/checkout")) {
  await notiondesk.hide();
}

notiondesk.updateConfig({
  position: "bottom-left",
});

notiondesk.on("messenger:show", () => {
  analytics.track("support_opened");
});

notiondesk.on("messenger:tabChanged", ({ tabName }) => {
  analytics.track("support_section_opened", {
    section: tabName,
  });
});

notiondesk.updateConfig({
  userToken,
});

notiondesk.updateConfig({
  userToken: null,
});

try {
  const notiondesk = await initNotiondesk({
    messengerId: "YOUR_MESSENGER_ID",
  });
} catch (error) {
  console.error(
    "Could not initialize Notiondesk Messenger",
    error,
  );
}

notiondesk.updateConfig({
  zIndex: 10000,
});

notiondesk.updateConfig({
  userToken: null,
});

notiondesk.destroy();

const { show, status } = useNotiondesk();

return (
  <button
    disabled={status !== "ready"}
    onClick={() => void show()}
  >
    Contact support
  </button>
);