JobbSEO.hu
Bejelentkezés

Fejlesztőknek

JavaScript API: nyisd meg a chatet a saját gombjaidról

A chat nemcsak a sarokban lévő gombbal nyitható meg. A weboldalad bármelyik gombja, linkje vagy szkriptje megnyithatja egy előre megírt kérdéssel, például egy termékoldalon a „Kérdezd az AI-t a méretről” gombbal. Ezen az oldalon a teljes, nyilvános JavaScript felületet találod.

  • Fejlesztőknek
  • 5 perc olvasás
  • Frissítve:

Röviden

  • window.__AI_CHAT_WIDGET_ASK__('kérdés') megnyitja a chatet, és elküldi a kérdést.
  • Ugyanez eseménnyel: window.dispatchEvent(new CustomEvent('ai-chat-ask', { detail: { message: 'kérdés' } })).
  • Csak a chat betöltése után működik, ezért ellenőrizd, hogy létezik-e a függvény.
  • A data-ai-chat-ignore attribútummal kizárhatsz részeket abból, amit az AI az oldalból elolvas.

Inkább kérdeznél? Az AI ennek az oldalnak a lényegével segít.

A gomb megnyitja az AI-t, és beírja a kérdést az oldal lényegével és a kódokkal együtt.

ChatGPTClaude

Chat megnyitása egy kérdéssel

A window.__AI_CHAT_WIDGET_ASK__(üzenet) függvény megnyitja a chatet, és a látogató nevében elküldi az üzenetet. Ha nem adsz meg üzenetet, csak megnyitja a chatet. Visszatérési értéke true, ha sikerült, és false, ha a chat még nem töltődött be. Az üzenet legfeljebb 500 karakter lehet.

Egyszerű gombHTML
<button type="button" onclick="window.__AI_CHAT_WIDGET_ASK__ && window.__AI_CHAT_WIDGET_ASK__('Milyen méretet válasszak?')">
  Kérdezd az AI-t a méretről
</button>
Biztonságos változat, ami megvárja a betöltéstJavaScript
function kerdezdAzAIt(uzenet) {
  let probalkozas = 0;
  (function probald() {
    if (typeof window.__AI_CHAT_WIDGET_ASK__ === 'function' && window.__AI_CHAT_WIDGET_ASK__(uzenet)) return;
    if (++probalkozas < 20) setTimeout(probald, 250); // legfeljebb 5 másodpercig vár
  })();
}

document.querySelector('#meret-gomb').addEventListener('click', () => {
  kerdezdAzAIt('Milyen méretet válasszak 168 cm-hez?');
});

Események

EseményKi küldi?Mire jó?
ai-chat-askA te kódodUgyanaz, mint a függvény: detail.message mezőben adod át a kérdést. Akkor kényelmes, ha nem akarsz globális függvényre hivatkozni.
ai-chat-page-changeA chat és a te kódod isJelzi, hogy megváltozott az oldal tartalma. A chat ilyenkor újraolvassa a termékadatokat és az oldalt. Akkor küldd, ha oldalváltás nélkül cserélsz tartalmat (pl. termékváltozat választásakor).
Események használataJavaScript
// Kérdés küldése eseménnyel
window.dispatchEvent(new CustomEvent('ai-chat-ask', {
  detail: { message: 'Mutass hasonlót olcsóbban' }
}));

// Termékváltozat váltása után: olvassa újra az oldalt
window.dispatchEvent(new Event('ai-chat-page-change'));

A chat eltávolítása

A window.__AI_CHAT_WIDGET_DISPOSE__() teljesen eltávolítja a chatet az oldalról (például egy egyoldalas alkalmazásban, ha egy bizonyos nézetben nem szeretnéd). Újra megjelenítéshez töltsd be ismét a szkriptet.

Tartalom kizárása: data-ai-chat-ignore

Az AI minden kérdésnél megkapja az aktuális oldal szövegének kivonatát. Ha egy részt nem szeretnél, hogy figyelembe vegyen (például egy belső megjegyzést, egy elavult ajánlatot vagy egy hosszú jogi szöveget), tedd rá a data-ai-chat-ignore attribútumot.

Rész kizárása az AI által olvasott szövegbőlHTML
<section data-ai-chat-ignore>
  <!-- Ezt az AI nem olvassa el -->
  <p>A régi, 2025-ös akció feltételei…</p>
</section>

Példa React komponensre

React gombReact
export function AskAiButton({ question, children }) {
  const ask = () => {
    const send = window.__AI_CHAT_WIDGET_ASK__;
    if (typeof send === 'function') send(question);
  };
  return <button type="button" onClick={ask}>{children}</button>;
}

// Használat:
// <AskAiButton question="Mennyi a szállítási idő?">Kérdezd az AI-t</AskAiButton>

Gyakori kérdések

Kiválthatja a chatet egy link?

Igen, egy link onclick eseményében hívd meg a függvényt, és akadályozd meg a link alapértelmezett működését (event.preventDefault()), hogy ne navigáljon el.

Megjelenik a látogatónak, hogy a kérdést egy gomb küldte?

A kérdés úgy jelenik meg a chatben, mintha a látogató írta volna be. Ezért fogalmazd meg az ő hangján (pl. „Milyen méretet válasszak?”).

Mi történik, ha a chat éppen válaszol, amikor újabb kérdést küldök?

A chat megnyílik, de az új kérdést nem küldi el, amíg az előző válasz be nem fejeződik.

Elakadtál? Kérdezd meg az AI-t erről az oldalról.

A gomb megnyitja az AI-t, és beírja a kérdést az oldal lényegével és a kódokkal együtt.

ChatGPTClaude