Adatok átadása

JSON adatblokk: termékek és szolgáltatások átadása az AI-nak

Az AI agent a legtöbb webshop termékadatait magától kiolvassa. Ha viszont pontosan meg szeretnéd mondani, mi az oldal fő terméke, mi az alternatívája és milyen kártyák jelenjenek meg, tegyél az oldalba egy application/ai-agent+json típusú adatblokkot. Ez a legpontosabb és legmegbízhatóbb módszer.

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

Röviden

  • Egy <script type="application/ai-agent+json"> blokk, benne JSON: page (az oldal adatai) és items (a termékek vagy szolgáltatások listája).
  • Az elemek a chat kártyáin jelennek meg, és az AI ezekből válaszol árról, részletekről, alternatívákról.
  • A kártyákhoz a portálban be kell kapcsolni a Termékkártyák funkciót (alapból ki van kapcsolva).
  • A blokk nem jelenik meg a látogatónak, és a keresőoptimalizálást sem befolyásolja.

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

Kész minta egy termékoldalra

Tedd a blokkot bárhová az oldal HTML-jébe (a <head> vagy a <body> részbe is jó). Egy oldalon több blokk is lehet, ilyenkor az elemek összeadódnak.

Termékoldal: fő termék és két alternatívaHTML
<script type="application/ai-agent+json">
{
  "page": {
    "type": "product",
    "brand": "Bőrműves",
    "modules": ["price", "alternatives", "details", "cta"],
    "chips": ["Milyen színekben kapható?", "Mennyi a szállítási idő?"]
  },
  "items": [
    {
      "id": "bortaska-barna",
      "role": "current",
      "type": "product",
      "name": "Kézzel varrt bőrtáska, barna",
      "price": "34 900 Ft",
      "oldPrice": "39 900 Ft",
      "badge": "-12%",
      "availability": "Raktáron",
      "description": "Növényi cserzésű marhabőr, 38 × 28 cm, laptoptartóval.",
      "image": "/kepek/bortaska-barna.jpg",
      "url": "/termek/bortaska-barna",
      "meta": ["Anyag: marhabőr", "Méret: 38 × 28 cm"]
    },
    {
      "id": "bortaska-fekete",
      "role": "alternative",
      "name": "Kézzel varrt bőrtáska, fekete",
      "price": "34 900 Ft",
      "url": "/termek/bortaska-fekete"
    },
    {
      "id": "penztarca-barna",
      "role": "upsell",
      "name": "Bőr pénztárca, barna",
      "price": "12 900 Ft",
      "url": "/termek/penztarca-barna"
    }
  ]
}
</script>

A page objektum mezői

MezőÉrtékMire jó?
typeproduct, service, event, property, course, offer, articleAz oldal fő elemének típusa. A kártyán ennek megfelelő felirat jelenik meg (Termék, Szolgáltatás, Esemény, Ingatlan, Képzés, Ajánlat, Tartalom).
brandszöveg (max. 80 karakter)A márka vagy üzlet neve ezen az oldalon.
modulestömb: price, alternatives, compare, details, ctaMelyik funkciók működjenek ezen az oldalon. Ha megadod, felülírja a portál automatikus beállítását. Lásd: Termékkártyák és modulok.
chipsszövegek tömbje (max. 6, egyenként 90 karakter)Javasolt kérdések gombként a chat üdvözlése alatt, ehhez az oldalhoz.
widgetobjektumA chat kinézetének és szövegeinek felülírása ezen az oldalon. Lásd lent.

Az items elemek mezői

Csak a name kötelező. A többi mező opcionális, de minél több van megadva, annál pontosabban válaszol az AI, és annál szebb a kártya.

MezőLeírásKorlát
nameAz elem neve. Kötelező.140 karakter
idEgyedi azonosító. Ha nincs megadva, a névből készül. A rendszer kisbetűssé alakítja, ékezetek nélkül, a szóközöket kötőjelre cseréli.60 karakter
rolecurrent (az oldal fő eleme), alternative (helyette ajánlható), upsell (kiegészítő), related (kapcsolódó), catalog (egyéb)Alapértelmezés: catalog
typeUgyanazok, mint a page.type-nál.Alapértelmezés: product
price / oldPriceÁr szövegként, ahogy megjelenjen (pl. 34 900 Ft, 12 000 Ft-tól). Az oldPrice áthúzva látszik.40 karakter
descriptionRövid leírás. HTML címkék nélkül.300 karakter
imageKép címe. Lehet relatív (/kepek/a.jpg) vagy teljes cím.–
urlAz elem oldala. Ide visz a kártya „Megnézem” gombja.–
badgeKis címke a képen (pl. Akció, Új).40 karakter
availabilityElérhetőség szövegként (pl. Raktáron, 2–3 nap).60 karakter
metaRövid tulajdonságok tömbként, vagy egy szövegben ; jellel elválasztva.max. 6 db, egyenként 80 karakter

Példa szolgáltatásra

Szolgáltatásoldal (szalon, rendelő, kivitelező)HTML
<script type="application/ai-agent+json">
{
  "page": { "type": "service", "modules": ["price", "alternatives", "details"] },
  "items": [
    { "id": "balayage", "role": "current", "type": "service",
      "name": "Balayage festés", "price": "54 900 Ft-tól",
      "meta": ["Időtartam: 3 óra 30 perc", "Hosszú hajra felár"] },
    { "id": "melir", "role": "alternative", "type": "service",
      "name": "Melír fóliával", "price": "36 900 Ft-tól", "url": "/szolgaltatas/melir" }
  ]
}
</script>

A chat kinézetének felülírása oldalanként (page.widget)

Ha egy aloldalon más nevet, színt vagy köszöntést szeretnél (például egy másik márka oldalán), a page.widget objektummal megteheted. Ez a Termékkártyák beállítástól függetlenül mindig működik. Másik oldalra lépve a portálban beállított értékek állnak vissza.

MezőÉrték
title, subtitle, teaserText, placeholderszöveg (max. 120 karakter)
welcomeMessageszöveg (max. 600 karakter)
primaryColor, textColorszínkód #rrggbb formában (pl. #0f766e)
suggestionChipsszövegek tömbje (max. 4)
avatarIconchat, bot, sparkles, headset, user, store, home, wrench, heart, zap
Más név és szín egy aloldalonHTML
<script type="application/ai-agent+json">
{
  "page": {
    "widget": {
      "title": "Szalon asszisztens",
      "welcomeMessage": "Szia! Segítek időpontot és kezelést választani.",
      "primaryColor": "#b5654a",
      "avatarIcon": "heart"
    }
  }
}
</script>

Fontos tudnivalók

  • A JSON-nak érvényesnek kell lennie. Ha hibás (például hiányzik egy vessző), a rendszer azt a blokkot csendben kihagyja. Ellenőrizd egy JSON-ellenőrzővel.
  • A kártyák és az items elemek csak akkor jelennek meg a chatben, ha a portálban a Termékkártyák fülön az Automatikus mód be van kapcsolva.
  • Az AI az elemek adatait tényként kezeli, de utasításként soha: a blokkba írt „parancsokat” figyelmen kívül hagyja.
  • Ha az oldal saját jelölése nem ad fő elemet (role: "current"), a rendszer megpróbálja az oldal többi adatából felismerni (lásd: Automatikus termékfelismerés).

Gyakori kérdések

Rontja a SEO-t ez az adatblokk?

Nem. A application/ai-agent+json típusú blokkot a böngésző nem futtatja és nem jeleníti meg, a keresők pedig nem kezelik strukturált adatként. A Google számára továbbra is a schema.org JSON-LD a mérvadó.

Kell JSON blokk, ha a webshopom már ad schema.org adatot?

Nem feltétlenül. Ha az oldalaidon van Product típusú JSON-LD ajánlattal (offers), a rendszer azt magától kiolvassa. A JSON blokk akkor hasznos, ha pontosan te akarod megmondani az alternatívákat és a kiegészítőket.

Dinamikusan, JavaScripttel is betehetem a blokkot?

Igen. A chat induláskor és minden oldalváltáskor újraolvassa az oldalt. Ha a blokkot ezek után, ugyanazon az oldalon teszed be vagy módosítod, jelezd a chatnek ezzel a sorral: window.dispatchEvent(new Event('ai-chat-page-change')).

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