React va Next.js

Manzillar va ko‘lamni tayyorlash#

Agent uchun joylashtirishni yoqing va mahalliy/preview/ishlab chiqarish muhitlarining aniq manzillarini ruxsat etilganlar ro‘yxatiga kiriting. Ishga tushiruvchi har bir mijoz navigatsiyasida saqlanishi (asosiy layout) yoki faqat tanlangan yo‘nalishlarda bo‘lishini (ichki layout/komponent) belgilang.

Next.js App Router#

Ishga tushiruvchiga egalik qiluvchi layout render qiladigan komponentda next/scriptdan foydalaning. Slugni ochiq ko‘rsatish xavfsiz; API kaliti yoki maxfiy muhit o‘zgaruvchisidan foydalanmang.

import Script from "next/script";

export function AgentEmbed() {
  return (
    <Script
      id="maf-agent"
      src="https://makeagent.fast/embed.js?v=20260728-widget-v2"
      strategy="afterInteractive"
      data-agent="YOUR_SITE_SLUG"
      data-position="right"
      data-label="Ask us"
    />
  );
}

Butun sayt agenti uchun <AgentEmbed />ni app/layout.tsx ichida bir marta, yo‘nalish guruhi uchun esa ichki layoutda render qiling. Har bir sahifa komponentidan alohida nusxa chiqarmang. afterInteractive server tomonda DOMʼga murojaatni chetlab o‘tadi va dastlabki HTML tahlilini to‘xtatmaydi.

Next.js Pages Routerʼda butun sayt ishlashi uchun shu komponentni pages/_app.tsx ichidan bir marta render qiling. Uni alohida sahifada render qilish faqat o‘sha sahifadan chiqishda agent ham olib tashlanishi kerak bo‘lsa mos; bunday holatda quyidagi aniq effect/tozalash usulidan foydalaning, chunki yuklangan tashqi skript React daraxtidan tashqarida DOM yaratgan bo‘ladi.

Next.jsʼsiz React#

Skriptni effect ichida yarating. Barqaror script ID ishlab chiqishdagi Strict Modeʼda takroriy qo‘shishni to‘sadi. Komponent yo‘nalishga bog‘langan bo‘lsa, tozalash skript va yuklagich yaratgan rootni birga olib tashlashi kerak.

import { useEffect } from "react";

const slug = "YOUR_SITE_SLUG";

export function AgentEmbed() {
  useEffect(() => {
    if (document.getElementById(`maf-embed-root-${slug}`)) return;

    const script = document.createElement("script");
    script.id = "maf-agent";
    script.src = "https://makeagent.fast/embed.js?v=20260728-widget-v2";
    script.dataset.agent = slug;
    script.dataset.position = "right";
    script.async = true;
    document.body.appendChild(script);

    return () => {
      script.remove();
      document.getElementById(`maf-embed-root-${slug}`)?.remove();
    };
  }, []);

  return null;
}

Butun sayt ishga tushiruvchisi uchun komponentni routerdan yuqorida ulang va yo‘nalishga bog‘liq unmountdan foydalanmang. Rootni saqlash navigatsiya davomida iframe/suhbatni ham saqlaydi.

Muhit sozlamalari#

Build vaqtida ochiq o‘zgaruvchida slug saqlanishi mumkin, chunki u maxfiy emas. Render qilishdan oldin uni tekshiring, haqiqiy MAF API kalitlari/provayder maʼlumotlarini esa faqat serverda saqlang. Slug bo‘lmasa, yuklagich ogohlantirish chiqaradi va ishga tushiruvchi yaratmasdan to‘xtaydi.

React buildi bir nechta mijoz tenantiga xizmat qilsa, allaqachon ishlagan skriptdagi data-agentni almashtirmang. Joriy tenantga bitta barqaror slug bering, autentifikatsiya qilingan tenant almashuvida eski slug rootini o‘chiring va yangi skriptni ulang. Ishonchsiz query parametri boshqa tenant slugini tanlashiga hech qachon yo‘l qo‘ymang.

Hydration va navigatsiyani tekshirish#

1. Ochiq yo‘nalishni to‘g‘ridan-to‘g‘ri yuklab, bitta ishga tushiruvchi borligini tekshiring.
2. U saqlanishi kerak bo‘lgan yo‘nalishlar bo‘ylab mijoz tomonida o‘ting.
3. Ichki/yo‘nalishga xos o‘rnatishda tashqariga chiqing, skript va root yo‘qolishini tekshiring, qaytib esa bitta yangi ishga tushiruvchi yaratilishini tasdiqlang.
4. Network/CSP holatini ko‘ring va haqiqiy xabar yuboring.
5. Ishlab chiqarish buildini ishga tushiring; faqat ishlab chiqishdagi Strict Mode yakuniy holat emas.

Muammolarni hal qilish#

Hozircha npm uchun React/Next adapteri chiqarilmagan; misollar qo‘llab-quvvatlanadigan, RESTʼdan mustaqil ochiq yuklagichdan foydalanadi.