استفاده از ویجت در React و Next.js

ویجت Plexit به فریم‌ورک خاصی وابسته نیست و در React و Next.js هم با همان اسکریپت نصب کار می‌کند. نکتهٔ اصلی این است که اسکریپت را یک بار و در سطح کل اپلیکیشن بارگذاری کنید، نه داخل یک صفحهٔ خاص.

Next.js (App Router)

در Next.js بهترین جا برای اسکریپت، فایل layout ریشه است. کامپوننت Script ویژگی‌های data-* را عیناً روی تگ script قرار می‌دهد:

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fa" dir="rtl">
      <body>
        {children}
        <Script
          src="https://WIDGET_HOST/loader.js"
          data-site-key="wk_YOUR_SITE_KEY"
          data-widget-src="https://WIDGET_HOST"
          data-api-base="https://WIDGET_API_HOST"
          data-position="right"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

React (بدون Next.js)

در یک اپلیکیشن React معمولی، ساده‌ترین راه چسباندن کد نصب در فایل index.html است. اگر ترجیح می‌دهید از داخل کد React بارگذاری کنید، یک کامپوننت کوچک در ریشهٔ اپلیکیشن بسازید:

import { useEffect } from "react";

export function PlexitWidget() {
  useEffect(() => {
    if (document.querySelector("script[data-plexit-widget]")) return;
    const script = document.createElement("script");
    script.src = "https://WIDGET_HOST/loader.js";
    script.async = true;
    script.setAttribute("data-plexit-widget", "");
    script.setAttribute("data-site-key", "wk_YOUR_SITE_KEY");
    script.setAttribute("data-widget-src", "https://WIDGET_HOST");
    script.setAttribute("data-api-base", "https://WIDGET_API_HOST");
    script.setAttribute("data-position", "right");
    document.body.appendChild(script);
  }, []);

  return null;
}

سپس این کامپوننت را یک بار در کامپوننت ریشه، مثلاً App، قرار دهید.

ناوبری سمت کاربر

در اپلیکیشن‌های تک‌صفحه‌ای، جابه‌جایی بین صفحات بدون بارگذاری مجدد انجام می‌شود. چون اسکریپت در سطح layout یا ریشه است، ویجت در همهٔ صفحات باقی می‌ماند و گفت‌وگوی جاری قطع نمی‌شود. خود اسکریپت هم در برابر بارگذاری تکراری محافظت شده است: اگر به هر دلیلی دو بار اجرا شود، فقط یک ویجت ساخته می‌شود.

انتخاب نسخهٔ کامل

برای بارگذاری نسخهٔ کامل ویجت که پاسخ‌ها را با قالب‌بندی Markdown و منابع نشان می‌دهد، ویژگی data-ui را با مقدار elements اضافه کنید. تفاوت دو نسخه در نصب با یک اسکریپت آمده است.

توسعهٔ محلی

ویجت فقط روی دامنه‌های مجاز پاسخ می‌دهد. اگر می‌خواهید آن را روی localhost امتحان کنید، localhost را هم به فهرست اضافه کنید و پیش از انتشار نهایی، از حذف یا نگه‌داشتنش آگاهانه تصمیم بگیرید.