Chatbot w Vue: jak dodać chatbota AI do aplikacji Vue 3 lub Nuxt

Potrzebujesz konta Nexoply i klucza swojego chatbota. Zarejestruj się za darmo (plan Darmowy obejmuje 50 rozmów miesięcznie, bez karty), dodaj informacje o firmie lub zaimportuj je ze strony, a potem otwórz stronę Chatbot w panelu i skopiuj kod instalacyjny. Wygląda tak:

<script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>

Wartość data-chatbot to Twój klucz. Jest publiczny, a nie tajny: informuje tylko widżet, do której firmy należy, więc może bez problemu trafić do kodu po stronie klienta i do Twojego repozytorium. Zachowaj nazwę atrybutu i src zawierający widget.js dokładnie tak, jak pokazano, bo widżet odczytuje ustawienia z własnego tagu script.

Utwórz plik src/components/Chatbot.vue. Komponent sam niczego nie renderuje: po zamontowaniu dodaje skrypt Nexoply do strony jeden raz, a przycisk i okno czatu rysuje widżet.

<!-- src/components/Chatbot.vue -->
<script setup lang="ts">
import { onMounted } from "vue";

const props = defineProps<{ chatbotKey: string }>();

onMounted(() => {
  // Brak klucza albo skrypt jest już na stronie: nie ma nic do zrobienia.
  if (!props.chatbotKey || document.querySelector("script[data-chatbot]")) return;
  const s = document.createElement("script");
  s.src = "https://nexoply.com/widget.js";
  s.async = true;
  s.dataset.chatbot = props.chatbotKey;
  document.body.appendChild(s);
});
</script>

<template><slot /></template>

Wyrenderuj go raz w App.vue, który pozostaje zamontowany przez całą wizytę. Zapisz klucz w .env jako VITE_NEXOPLY_KEY=YOUR-KEY:

<!-- src/App.vue -->
<script setup lang="ts">
import Chatbot from "./components/Chatbot.vue";

const nexoplyKey = import.meta.env.VITE_NEXOPLY_KEY;
</script>

<template>
  <!-- Twój layout i trasy -->
  <Chatbot :chatbot-key="nexoplyKey" />
</template>

W projekcie JavaScript usuń lang="ts" i zamiast argumentu typu napisz defineProps({ chatbotKey: String }). Ponieważ to zwykły komponent, możesz też renderować go z v-if, np. v-if="hasConsent", aby ładować czat dopiero po zaakceptowaniu przez odwiedzającego banera zgody.

Nie potrzebujesz komponentu? Najprostsza instalacja to wklejenie tagu do index.html w katalogu głównym projektu, tuż przed </body>. Ładuje się asynchronicznie i nigdy nie blokuje renderowania:

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
  <script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>
</body>

W Nuxt nie potrzebujesz komponentu: dodaj skrypt dla całej witryny w nuxt.config.ts. tagPosition: "bodyClose" umieszcza go tuż przed </body>:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://nexoply.com/widget.js",
          async: true,
          "data-chatbot": "YOUR-KEY",
          tagPosition: "bodyClose",
        },
      ],
    },
  },
});

Możesz też dodać go za pomocą useHead w app.vue. Jeśli wolisz trzymać klucz w zmiennej środowiskowej, zadeklaruj runtimeConfig: { public: { nexoplyKey: "" } } w nuxt.config.ts i ustaw NUXT_PUBLIC_NEXOPLY_KEY; w przeciwnym razie po prostu wpisz klucz bezpośrednio:

<script setup lang="ts">
useHead({
  script: [
    {
      src: "https://nexoply.com/widget.js",
      async: true,
      "data-chatbot": useRuntimeConfig().public.nexoplyKey,
      tagPosition: "bodyClose",
    },
  ],
});
</script>

Renderowanie po stronie serwera nie stanowi problemu: Nuxt renderuje tag w HTML, a widżet działa tylko w przeglądarce. Nie ingeruje w kod HTML Twojej aplikacji, więc nie ma niezgodności hydracji.

Wyszukiwanie hasła „chatbot Vue” zwraca dwa rodzaje narzędzi, które rozwiązują różne problemy:

• Biblioteka UI do chatbota daje Ci komponenty Vue dla samego czatu: listę wiadomości, pole tekstowe, dymki, czasem zaprogramowane kroki rozmowy. Wszystko za interfejsem budujesz sam: stałe scenariusze albo backend, który wywołuje model AI z Twoim własnym kluczem API, a do tego treści, na podstawie których odpowiada, przechowywanie rozmów i ochronę przed nadużyciami. Sprawdza się, gdy czat jest częścią Twojego produktu, na przykład asystent pracujący na danych Twoich użytkowników.
• Hostowany chatbot AI, taki jak Nexoply, dostarcza interfejs, AI i backend razem. Odpowiada na pytania odwiedzających tylko na podstawie dodanych lub zaimportowanych przez Ciebie informacji o firmie (usługi i ceny, FAQ, zasady, godziny otwarcia) i mówi, gdy czegoś nie wie. Nie ma klucza AI ani kodu serwerowego; rozmowy, pytania bez odpowiedzi i ochrona przed spamem są obsługiwane w panelu. Sprawdza się na stronie dla klientów, która ma odpowiadać na pytania o firmę.

Jeśli chcesz mieć pełną kontrolę nad interfejsem i modelem, zacznij od biblioteki. Jeśli celem jest odpowiadanie na pytania odwiedzających bez budowania i utrzymywania backendu, hostowany widżet wymaga mniej pracy. Zobacz, jak Nexoply odpowiada na podstawie informacji o Twojej firmie.

• Poza Twoją aplikacją. Montuje się w document.body, poza #app (lub elementem głównym Nuxt), więc ponowne renderowania, zmiany layoutu i zmiany tras nigdy go nie usuwają.
• Nawigacja Vue Router. Rozmowa trwa dalej, gdy odwiedzający przechodzą między stronami po stronie klienta, a reguły stron (np. zakładka boczna tylko na /pricing) są sprawdzane ponownie przy zmianie adresu URL, bez dodatkowego kodu.
• Shadow DOM. Twój CSS, klasy Tailwind czy biblioteka UI nie przenikają do czatu, a jego style nie przenikają do Twojej aplikacji.
• Niewielki narzut. Ładuje się asynchronicznie, nie ustawia plików cookie i przechowuje tylko anonimowy identyfikator odwiedzającego w localStorage oraz bieżącą rozmowę w sessionStorage.

Chcesz mieć przycisk „Masz pytania? Zapytaj nas” w sekcji hero albo w tabeli cen? Wyślij zdarzenie nexoply:open-chat z procedury obsługi kliknięcia:

<script setup lang="ts">
function openChat() {
  window.dispatchEvent(new Event("nexoply:open-chat"));
}
</script>

<template>
  <button type="button" @click="openChat">Zadaj nam pytanie</button>
</template>

Aby otwierać czat od razu po załadowaniu strony, dodaj do tagu script data-open="true" (lub "data-open": "true" w Nuxt).

• Dozwolone strony. Jeśli na stronie Chatbot wypełniono pole Zezwalaj tylko na tych stronach, dodaj też swój host deweloperski z portem: localhost:5173 dla Vite, localhost:3000 dla Nuxt. Możesz też zostawić listę pustą na czas testów.
• Content-Security-Policy. Jeśli Twoja aplikacja wysyła nagłówek CSP, zezwól na https://nexoply.com w script-src, connect-src i img-src.
• Przetestuj. Uruchom serwer deweloperski, otwórz aplikację, zadaj prawdziwe pytanie i sprawdź, czy rozmowa pojawia się w sekcji Rozmowy w panelu.

Jeśli przycisk się nie pojawia:

• Sprawdź tag. W narzędziach deweloperskich przeglądarki poszukaj skryptu z atrybutem data-chatbot i src zawierającym widget.js. Jeśli go nie ma, klucz może być pusty: sprawdź, czy ustawiono VITE_NEXOPLY_KEY lub NUXT_PUBLIC_NEXOPLY_KEY, i zrestartuj serwer deweloperski po edycji .env.
• Sprawdź konsolę i kartę Network. Błąd CSP oznacza, że nexoply.com nie jest jeszcze dozwolony; zablokowane żądanie może też pochodzić od blokera reklam, więc spróbuj w oknie prywatnym bez rozszerzeń.
• Sprawdź panel. Upewnij się, że przełącznik Chatbot włączony jest włączony, a Twoja domena (lub localhost z portem) jest na liście dozwolonych stron, jeśli z niej korzystasz.
• Ukryty celowo? Reguła strony ustawiona na „Bez przycisku” ukrywa go na pasujących stronach.

Gdy tag jest już na miejscu, wszystko inne odbywa się w panelu, a zmiany docierają na stronę w ciągu około minuty, bez ponownego wdrażania. W sekcji Chatbot → Personalizacja możesz dopasować przycisk czatu (ikona lub własny obrazek, etykieta, kształt, rozmiar, kolory, położenie) albo zamiast niego użyć zakładki bocznej przy krawędzi ekranu. Ustaw inny wygląd na telefonach i użyj reguł stron, aby zmienić lub ukryć przycisk na wybranych stronach (np. /blog/*). Dopasuj okno czatu do marki i dodaj na ekranie startowym przyciski takie jak Rezerwacja, Telefon czy WhatsApp.

Zobacz, jak asystent poznaje Twoją firmę, i wszystkie opcje personalizacji albo porównaj plany i limity rozmów. Pracujesz z innym frameworkiem? Zajrzyj do poradnika o komponencie chatbota dla React i sprawdź, jak dodać chatbota do Next.js za pomocą next/script.