Vue va Nuxt

Joylashtirishni tayyorlash#

Agent uchun joylashtirishni yoqing va mahalliy, oldindan ko‘rish hamda ishlab chiqarish muhitlarining aniq manzillarini qo‘shing. Agent butun ilovaga yoki faqat tanlangan yo‘nalish komponentlariga tegishli bo‘lishini belgilang.

Butun sayt uchun Nuxt plagini#

Serverda render qilish vaqtida DOM kodi ishlamasligi uchun .client.ts plagin yarating. Nuxt uni brauzerda bir marta yuklaydi va shu orqali mijoz navigatsiyasi davomida ishga tushiruvchi hamda suhbat barqaror qoladi.

// plugins/make-agent-fast.client.ts
const slug = "YOUR_SITE_SLUG";

export default defineNuxtPlugin(() => {
  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.dataset.label = "Ask us";
  script.async = true;
  document.body.appendChild(script);
});

runtimeConfig.public ichiga sir qo‘ymang; brauzerda faqat ochiq sayt slugʼi va ko‘rinish sozlamalari bo‘lishi mumkin. Haqiqiy MAF API/provayder kalitlari serverning yopiq runtime sozlamalarida qoladi.

Butun sayt plagini ataylab unmount tozalash funksiyasiga ega emas: u Nuxt ilovasining butun hayot sikliga tegishli. Ishlab chiqishda hot-module replacement paytida to‘liq yangilashgacha eski root qolishi mumkin; root tekshiruvi ikkinchi ishga tushiruvchini to‘sadi. Bir ochiq tabda plagin kodini qayta-qayta tahrirlash bilan emas, toza ishlab chiqarish buildi orqali yakuniy holatni tekshiring.

Yo‘nalishga bog‘langan Vue komponenti#

Tanlangan yo‘nalishlar uchun onMounted ichida ulang va onBeforeUnmount ichida skript hamda yaratilgan rootni birga olib tashlang.

<script setup lang="ts">
import { onBeforeUnmount, onMounted } from "vue";

const slug = "YOUR_SITE_SLUG";
let script: HTMLScriptElement | null = null;

onMounted(() => {
  if (document.getElementById(`maf-embed-root-${slug}`)) return;
  script = document.createElement("script");
  script.id = "maf-agent";
  script.src = "https://makeagent.fast/embed.js?v=20260728-widget-v2";
  script.dataset.agent = slug;
  script.async = true;
  document.body.appendChild(script);
});

onBeforeUnmount(() => {
  script?.remove();
  document.getElementById(`maf-embed-root-${slug}`)?.remove();
});
</script>

Bitta komponent egasidan foydalaning. Turli slugli bir nechta komponent ataylab bir nechta agent yaratadi, bu odatda kerakli holat emas.

Vue ilovasi sahifani to‘liq yuklamasdan autentifikatsiya qilingan tenantni almashtirsa, buni aniq uzish/qayta ulash amali sifatida ko‘ring. Eski slug rootini olib tashlang, yangi tenantning ochiq slugini ishonchli ilova holatida tekshiring va yangi skript qo‘shing. Yuklagich ishlagandan keyin script.dataset.agentni almashtirish mavjud iframeʼni boshqa agentga yo‘naltirmaydi.

Hosting xavfsizlik sarlavhalari Nuxt/Vue natijasiga ham taʼsir qiladi. Yuklagich/iframe manzilini CSPʼga qo‘shing va faqat ovoz yoqilganda mikrofonga ruxsat bering; faqat mijozda ishlaydigan plagin javob darajasidagi brauzer siyosatini chetlab o‘ta olmaydi.

SSR va yo‘naltirishni tekshirish#

1. Nuxt/Vue ishlab chiqarish buildini ishga tushirib, document is not defined xatosi yo‘qligini tekshiring.
2. Embed bor yo‘nalishni to‘g‘ridan-to‘g‘ri yuklab, bitta rootni tasdiqlang.
3. Mijoz tomonida yo‘nalishlar bo‘ylab o‘tib, butun sayt va yo‘nalishga xos ishlashni tekshiring.
4. embed.js, iframe, CSP va aniq manzilni ko‘ring.
5. Xabar yuboring va mobil/mikrofon ishlashini sinang.

Muammolarni hal qilish#

Hozircha npm uchun Vue/Nuxt adapteri chiqarilmagan; bu qo‘llanma qo‘llab-quvvatlanadigan joylashtirilgan yuklagichdan bevosita foydalanadi.