Inline‑şablonlar: kartlar, siyahılar, karusellər və CTA

1. inline‑rejim nədir və niyə bu «defolt»dur

OpenAI‑nın rəsmi təlimatları vurğulayır: inline‑göstərmə — ChatGPT Apps üçün əsas rejimdir. Inline‑vidcet modelin cavabının üzərində, məhz çat lentində render olunur və kiçik UI bloku (kart, siyahı, karusel) plus onun altında GPT‑dən follow‑up mesajını əhatə edir.

İdeya sadədir: istifadəçini ayrıca böyük interfeysə aparmaq əvəzinə, söhbətin kontekstində birbaşa kompakt vizual «impuls» veririk: model nə baş verdiyini və növbəti variantları izah edir, vidcet isə strukturu və mövcud hərəkətləri səliqəli göstərir.

Inline‑vidcet:

• məzmun baxımından yüngüldür və çox addım tələb etmir;
• istifadəçini daxili tablar və şaquli skrollarla mürəkkəb naviqasiyaya salmır;
• bir‑iki kiçik işi həll edir: seçimləri göstərmək, seçdirmək, hərəkəti təsdiqləmək, statusu göstərmək.

Fullscreen‑rejim (bu haqda növbəti mühazirədə) iri addım‑addım bələdçilər və mürəkkəb məzmun üçün lazımdır. İndi əsas məqam budur: susmaya görə inline düşünün, fullscreen isə yalnız inline açıq‑aşkar öhdəsindən gəlməyəndə şüurlu şəkildə qoşun.

Bu mühazirədə vəzifəmiz — üç əsas inline‑şablonla rahat işləməyi və onların üzərində CTA ilə işləməyi öyrənməkdir:

• kartlar
• siyahılar
• karusellər

həmçinin onlara düzgün şəkildə CTA‑düymələr (Call to Action) bağlamaqdır.

2. inline nə zaman fullscreendən yaxşıdır

Sadələşdirsək, inline‑rejim «tez köməkçi», fullscreen isə «ChatGPT içində ayrıca tətbiq»dir.

Inline xüsusilə yaxşıdır, əgər:

• bir neçə variantı göstərmək və onlardan bir‑ikisinin seçimini vermək lazımdırsa;
• nəticəni kompakt struktura salmaq mümkündürsə: hədiyyə kartı, sifariş xülasəsi, mini‑cədvəl;
• istifadəçi qısa bir hərəkət edir: «seç», «daha ətraflı göstər», «filtri dəyiş»;
• dialoq əsas olaraq qalırsa: GPT izah edir, zarafat edir, şərh verir, vidcet isə sadəcə rahat forma və ya vizual təqdim edir.

GiftGenius baxımından inline — bu deməkdir ki:

• seçilmiş şəxs üçün 3–5 ən yaxşı hədiyyəni göstərmək;
• tez filtr vermək: «yalnız rəqəmsal hədiyyələri göstər»;
• seçimi təsdiqləmək: «budur sifarişin xülasəsi, hər şey qaydasındadır?».

Fullscreen sizə sonra mürəkkəb checkout üçün üç addımlı bələdçidə lazım olacaq. İndilik isə yüngül zonada qalırıq: bir alət çağırışının nəticəsi → bir inline‑vidcet.

Aydınlıq üçün — kiçik bir cədvəl:

Bunu dərk edərək, konkretliyə enək: bu şablonlar UI və kodda necə həyata keçirilir. Daha sonra hər şablonu eyni formatda müzakirə edəcəyik: əvvəlcə — UX baxımından nədir, sonra — GiftGenius üçün sadə React komponenti, və nəhayət, bunların hamısı inline‑vidcetə necə daxil edilir.

3. Kartlar: inline‑UI‑nın əsas kərpici

Apps SDK kontekstində kart nədir

OpenAI təlimatlarına görə, inline‑kart yüngül, tək‑istifadəçi vidcetidir; az miqdarda strukturlaşdırılmış məlumat və aşağıda 1–2 hərəkəti göstərir. Başlıq, şəkil, bir‑iki sətir meta‑məlumat və bir əsas CTA‑düymə (üstəlik ixtiyari ikinci dərəcəli) ola bilər.

GiftGenius‑da hər kart — bir hədiyyədir. Burada yerləşdirmək rahatdır:

• hədiyyənin adı;
• qiymət;
• kimə uyğundur (məsələn, «həmkar», «yaxın dost»);
• niyə yaxşı variant olduğuna dair qısa izah;
• «Bu hədiyyəni seç» və ya «Ətraflı» düyməsi.

Kart öz‑özünə kifayət olmalıdır: istifadəçi ona baxan kimi qarşısındakı obyekti və əsas hərəkəti başa düşsün.

Məlumat tipi və sadə GiftCard komponenti

Əvvəlcə hədiyyə üçün məlumat tipini müəyyənləşdirək. Tutaq ki, artıq belə obyektlərdən ibarət massiv qaytaran ToolOutput var; burada yalnız UI hissəsi bizi maraqlandırır.

// UI üçün hədiyyənin ümumi strukturu
export type GiftSuggestion = {
  id: string;
  title: string;
  priceLabel: string;         // məsələn "≈ 40 $"
  recipientLabel: string;     // "kim üçün"
  reason?: string;            // modelin izahı
  imageUrl?: string;
};

İndi isə sadə bir kart komponenti hazırlayaq:

type GiftCardProps = {
  gift: GiftSuggestion;
  onSelect: (gift: GiftSuggestion) => void;
};

export function GiftCard({ gift, onSelect }: GiftCardProps) {
  return (
    <div className="flex flex-col gap-2 rounded-lg border p-3">
      <div className="text-sm font-medium">{gift.title}</div>
      <div className="text-xs text-muted-foreground">
        Üçün: {gift.recipientLabel} · {gift.priceLabel}
      </div>
      {gift.reason && (
        <div className="text-xs text-muted-foreground">{gift.reason}</div>
      )}
      <button
        className="mt-2 self-start rounded bg-primary px-3 py-1 text-xs text-primary-foreground"
        onClick={() => onSelect(gift)}
      >
        Bu hədiyyəni seç
      </button>
    </div>
  );
}

Bir neçə məqam dərhal:

• kardı mətnlə yükləmirik, maksimum 2–3 sətir meta‑məlumat və qısa izah;
• bir əsas CTA — «Bu hədiyyəni seç»; 5 müxtəlif variantı bura yığmağa çalışmırıq;
• komponenti həm inline‑siyahıda, həm də karuselin içində asanlıqla təkrar istifadə etmək olar.

Kartlar ümumi vidcetə necə yerləşir

Tutaq ki, MCP vasitəsilə giftgenius.suggestGifts alət çağırışından sonra alınmış gifts massivimiz var. inline‑rejimdə vidcet onları 1–3 sütunlu şəbəkə kimi sadəcə render edə bilər.

type GiftGridProps = {
  gifts: GiftSuggestion[];
  onSelect: (gift: GiftSuggestion) => void;
};

export function GiftGrid({ gifts, onSelect }: GiftGridProps) {
  return (
    <div className="grid gap-3 sm:grid-cols-2">
      {gifts.map((gift) => (
        <GiftCard key={gift.id} gift={gift} onSelect={onSelect} />
      ))}
    </div>
  );
}

Burada biz:

• vidceti «kərpic divarı»na çevirməmək üçün 1–2 sütunlu şəbəkə istifadə edirik;
• kartların sayını asanlıqla məhdudlaşdıra bilərik, məsələn, yalnız ilk 3–6‑nı göstərmək.

onSelect işləyicisi checkout alətini çağırıb başlada və ya seçimi Widget State‑də saxlayıb modelə dialoqu davam etdirməyə imkan verə bilər. Alətlə inteqrasiyanın ən sadə nümunəsi:

async function handleSelect(gift: GiftSuggestion) {
  await window.openai.actions.call("giftgenius.startCheckout", {
    giftId: gift.id,
  });
}

Burada window.openai.actions.call — vidcetdən birbaşa qeydiyyatdan keçmiş MCP alətini çağırmaq üçün körpüdür.

Adətən belə çağırışdan sonra model ya statusu göstərir, ya da növbəti vidceti açır (məsələn, sifarişin xülasəsi). Əsas — bütün checkout məntiqini kartın içində etməyə çalışmamaqdır; kart növbəti açıq addımı işə salmalıdır.

4. Siyahılar: vizual əsas deyilkən

Kart «kiçik poster» kimidirsə, siyahı səliqəli mətn yığımıdır. Sənədləşmə və UX tövsiyələri göstərir ki, siyahılar mətni məzmun vacib olanda, parlaq vizual vurğudan daha uyğundur.

Siyahı uyğundur, əgər:

• 5–10 variant göstərmək lazımdır, lakin şəkilə ehtiyac yoxdur;
• istifadəçi sadəcə başlıqlara və qısa təsvirlərə göz gəzdirərək baxmaq istəyir;
• bütün maddələr üçün hərəkətlər eynidir və UI diqqəti yayındırmamalıdır.

GiftGenius nümunələri:

• detalsız «tez» hədiyyə ideyaları siyahısı;
• seçilmiş kateqoriyalar: «həmkarlar üçün», «valideynlər üçün», «uşaqlar üçün»;
• yadda saxlanmış toplular («HR şöbəsi üçün hədiyyələr», «20$‑a qədər yeni il xırdalıqları»).

Sadə siyahı komponenti

Sağda bir CTA‑düymə «Ətraflı» olan kompakt siyahı hazırlayaq.

type GiftListProps = {
  gifts: GiftSuggestion[];
  onSelect: (gift: GiftSuggestion) => void;
};

export function GiftList({ gifts, onSelect }: GiftListProps) {
  return (
    <ul className="flex flex-col gap-2">
      {gifts.map((gift) => (
        <li
          key={gift.id}
          className="flex items-center justify-between rounded-md border px-3 py-2 text-sm"
        >
          <span className="truncate">{gift.title}</span>
          <button
            className="text-xs text-primary"
            onClick={() => onSelect(gift)}
          >
            Ətraflı
          </button>
        </li>
      ))}
    </ul>
  );
}

Burada biz:

• uzun başlıqlar layoutu pozmasın deyə başlığa truncate veririk;
• yenə hər element üçün bir CTA istifadə edirik;
• bütün «zəngin» məlumatı (təsvir, şəkil, rəylər) növbəti addıma saxlayırıq — məsələn, kliklə ayrıca kart açmaq və ya fullscreen baxış.

Siyahı xüsusilə GPT‑dən gələn follow‑up təkliflərlə yaxşı birləşir. Vidcet «namizədlər» siyahısını göstərir, altda isə GPT təxminən belə yazır:

«30$‑a qədər olan hədiyyələrə endirə və ya yalnız rəqəmsal olanları göstərə bilərəm. Hansını seçək?» və iki‑üç follow‑up düyməsi təklif edir.

Ayrı bölmədə müxtəlif ssenarilər üçün inline‑vidcetləri və follow‑up mesajlarını necə daha yaxşı birləşdirməyi də müzakirə edəcəyik.

5. Karusellər: variant çoxdur, amma hamısı oxşardır

Karusel — üfüqi düzülmüş və svayp və ya naviqasiya düymələri ilə çevrilən kartlar toplusudur. Təlimatlar karuselləri kiçik bir oxşar elementlər siyahısını (adətən 3–8) göstərmək üçün tövsiyə edir — hər birində şəkil, başlıq və bir az meta‑məlumat olur.

Əsas fikir: istifadəçi sonsuz şaquli siyahı altında «yuxulamadan» variantları tez skan edə bilər.

GiftGenius‑da karusel faydalıdır, əgər:

• 10–15 uyğun hədiyyə var, amma inline‑vidcet yalnız «isti səkkizliyi» göstərməlidir;
• hər hədiyyə vizual baxımdan xoşdur (şəkil, tərtibat);
• istifadəçinin variantları çevirib baxması vacibdir, çatda çox aşağıya enmədən.

Karusellər üçün UX qaydaları

Təlimatlar və tədqiqatlara əsasən:

• karuseldəki kartların sayı — 3‑dən 8‑ə qədər; daha çoxdursa, «Daha çoxunu göstər» üçün ayrıca komanda vermək yaxşıdır;
• hər kart:
  • şəkil və ya digər vizual elementə sahib olmalıdır;
  • iki sətirdən çox meta‑mətn saxlamamalıdır;
  • bir aydın CTA olmalıdır, məsələn «Seç» və ya «Ətraflı»;
• kartın içində mürəkkəb daxili naviqasiyalar (tablar, alt keçidlər) olmamalıdır;
• daxili (şaquli) skroll çubuqlarından qaçın: kartın hündürlüyü məntiqli həddə uyğunlaşsın, amma öz skrollu olmasın.

«Bir dəfəyə bir kart» prinsipi ilə sadə karusel

Mürəkkəb üfüqi skrolla girməmək üçün ən sadə variantı reallaşdırmaq olar: bir dəfəyə bir kart göstərmək və «əvvəlki/sonrakı» düymələri vermək.

import { useState } from "react";

type GiftCarouselProps = {
  gifts: GiftSuggestion[];
  onSelect: (gift: GiftSuggestion) => void;
};

export function GiftCarousel({ gifts, onSelect }: GiftCarouselProps) {
  const [index, setIndex] = useState(0);
  const gift = gifts[index];

  return (
    <div className="flex flex-col gap-2">
      <GiftCard gift={gift} onSelect={onSelect} />
      <div className="flex items-center justify-between text-xs">
        <button
          disabled={index === 0}
          onClick={() => setIndex((i) => i - 1)}
        >
          ← Əvvəlki
        </button>
        <span>
          {index + 1} / {gifts.length}
        </span>
        <button
          disabled={index === gifts.length - 1}
          onClick={() => setIndex((i) => i + 1)}
        >
          Növbəti →
        </button>
      </div>
    </div>
  );
}

Bu artıq «karusel» hissini verir, üstəlik:

• kod kompakt qalır;
• vidcet konteynerinin eni və üfüqi skrollarla mübarizə lazım olmur;
• komponentə ötürməzdən əvvəl gifts‑i 8 elementə qədər məhdudlaşdırmaq asandır.

Daha «həqiqi» karusel istəsəniz, overflow-x-auto və kartlar üçün sabit en istifadə edə bilərsiniz, amma bu halda sıfırdan öz komponentinizi ixtira etməkdənsə hazır UI kitabxanasından (shadcn/ui, Radix‑uyğun həllər və s.) komponent götürmək daha asandır.

6. CTA‑düymələr: az, aydın, işə yarayan

CTA (Call to Action) — istənilən inline‑şablonun ürəyidir. Məhz düymələr vidcetinizi şəkildən iş alətinə çevirir.

Əsas prinsiplər

OpenAI sənədləri kifayət qədər sərt tövsiyələr verir:

• kartda — maksimum iki əsas düymə (biri əsas, ikinci — ikinci dərəcəli);
• karuseldə — imkandan asılı olaraq, hər element üçün bir CTA;
• CTA mətni konkret fel olmalıdır: «Ətraflı məlumatı göstər», «Siyahıya əlavə et», «Ödənişə keç», abstrakt «OK» və ya «Fəaliyyət» yox.

Düymələr nə qədər az olsa, bir o qədər həm model, həm də istifadəçi üçün asandır. Unutmayın ki, vidcetin üstündə və altında hələ mətn hissəsi və GPT‑dən follow‑up təkliflər var.

CTA‑nı tətbiqin məntiqinə bağlamaq

Bizim GiftGenius‑da CTA‑ların çoxu ya:

• filtrləri/mezonları dəyişir (yeni tool‑call giftgenius.refineSearch),
• checkout‑u başladır (giftgenius.startCheckout),
• xarici saytı açır (openExternal vasitəsilə; bunu ilkin mühazirələrdən tanıyırsınız).

«Filtrləri dəyiş» CTA‑sı üçün sadə işləyici nümunəsi:

async function handleRefineFilters(gift: GiftSuggestion) {
  await window.openai.actions.call("giftgenius.refineSearch", {
    baseGiftId: gift.id,
  });
}

UX baxımından çox vacibdir ki, system təlimatlarında modelin nə zaman və hansı CTA düymələrini təklif etməli olduğunu aydın yazasınız. Məsələn:

• istifadəçi «daha çox variant göstər» deyirsə, «Seç» düyməsi ilə yeni karusel göstərmək daha yaxşıdır;
• iş ödənişə gəlib çatıbsa, CTA «Ödənişə keç» ACP‑checkoutu işə salan alət çağırışına aparmalıdır (buna ticarət və ödənişlər modulunda gələcəyik).

Daha bir faydalı praktika — ChatGPT funksiyalarını CTA ilə təkrarlamamaqdır. «ChatGPT‑dən soruş» düyməsi lazım deyil — istifadəçinin artıq yazı və səs girişi var. Təlimatlar kartın içində «dublikat» girişlərdən birbaşa çəkinməyi tövsiyə edir.

7. Inline + follow‑up: duet oyunu

Inline‑vidcet heç vaxt vakuumda yaşamır. Cavabın strukturu adətən belədir:

1. model App‑inizi istifadə etməyə qərar verir və aləti çağırır;
2. MCP‑niz məlumatları qaytarır;
3. ChatGPT həmin məlumatlarla inline‑vidceti render edir;
4. altında model kiçik follow‑up mətn yazır və hazır davam variantları verir.

GiftGenius üçün bu belə görünə bilər:

• inline‑vidcet: «Seç» CTA‑lı üç hədiyyə kartı;
• altdakı mətn:
  «Həmkar üçün üç ideya: stolüstü lampa, ictimai çıxış kursu və kafe hədiyyə kartı. Bacarıram: — yalnız 30$‑a qədər variantları göstərmək; — oxşar üslubda bir neçə ideya da seçmək; — onlardan birini dərhal almağa kömək etmək.»

Model follow‑up‑da vidcetinizin CTA‑sına istinad edə bilər («bəyəndiyiniz variantın altındakı “Seç” düyməsinə klikləyin») və ya yenidən alət çağırışına və inline‑UI‑nın yenilənməsinə gətirən mətn komandaları təklif edə bilər.

Unutmayın: vidcet hər şeyi bacarmağa məcbur deyil. Bəzən ssenarinin bir hissəsini mətn dialoqunda saxlamaq, vidceti isə söhbətin içində «vizual blok» kimi istifadə etmək daha yaxşıdır.

8. Bütün bunlar GiftGenius ümumi axınına necə oturur

Anlaşıqlı olsun deyə, sadə ardıcıllıq diaqramına baxaq:

sequenceDiagram
  participant U as İstifadəçi
  participant C as ChatGPT
  participant A as GiftGenius Vidcet
  participant B as MCP/Backend

  U->>C: "Həmkar üçün 50$‑dək 3 hədiyyə seç"
  C->>B: call_tool(giftgenius.suggestGifts)
  B-->>C: 3 ən yaxşı variant
  C->>A: inline‑vidcetin render edilməsi (kartlar/karusel)
  A-->>U: «Seç» CTA‑lı kartlar
  U->>A: CTA düyməsinə klik
  A->>B: call_tool(giftgenius.startCheckout)
  B-->>A: status / ödəniş linki
  A-->>U: seçimin xülasəsi / status
  C-->>U: follow‑up: «Daha çox ideya seçə və ya təbrik açıqçasında kömək edə bilərəm»

Memarlıq baxımından:

• MCP «beyin» olaraq qalır (seçim, biznes məntiqi, ACP),
• vidcet — «üz»dür (kartlar/siyahılar/karusellər),
• ChatGPT — «dialoqu aparan»dır: nə baş verdiyini izah edir və növbəti addımları təklif edir.

Bu axın rahat olsun deyə:

• vidceti hərəkətlərlə yükləməyin;
• kartlarda məlumatı kompakt saxlayın;
• hər inline‑göstərmədən sonra hansı follow‑up variantlarının faydalı olacağını düşünün.

9. inline‑şablonların vizual tərəfi barədə bir az

Vizual dizaynı modulun növbəti mühazirələrindən birində detallı müzakirə edəcəyik, amma inline‑şablonlar üçün kritik bir neçə məqamı indidən qeyd edək.

Birincisi, kart və siyahılarınızın ChatGPT içində yad sayt kimi görünmədiyinə əmin olun. Rənglər və boşluqlar səliqəli olmalıdır; turş gradientlər və Comic Sans şriftlərindən uzaq durun. Inline‑vidcet — ChatGPT ümumi UI‑nın bir hissəsidir, 2007‑ci ilin banneri deyil.

İkincisi, daxili skroll çubuqlarından qaçın. Kartınız o qədər uzundursa ki, içində ayrıca skroll çubuğu yaranır, nəsə düzgün getmir: ya çox məzmunu ora dürtməyə çalışırsınız, ya da şablon səhv seçilib (bəlkə fullscreen lazımdır).

Üçüncüsü, sıxlığı nəzarətdə saxlayın:

• kartlar arasında görünən boşluq olsun;
• CTA rahat kliklənə bilsin (uyğun padding);
• mətn — mobil cihazlarda belə oxunaqlı olsun, mikroskopik şriftlərdən qaçın.

Bunlar «dizayner xırdalıqları» kimi səslənə bilər, amma təcrübə göstərir: inline‑vidcet «yerli» kimi görünürsə, model onu daha həvəslə istifadə edir və istifadəçilər daha az çaşır.

10. Praktika: mühazirəyə əsasən GiftGenius‑u necə inkişaf etdirməli

Materialı möhkəmləndirmək istəyirsinizsə, sadə bir praktik yoxlama siyahısı var:

Əvvəlcə giftgenius.suggestGifts alətinin cari nəticəsini (hədiyyələr massivi) götürün və:

1. Bir komponentdə üç fərqli UI variantı reallaşdırın:
   • kartlarla GiftGrid;
   • mətn siyahısı ilə GiftList;
   • «əvvəlki/sonrakı» naviqasiyalı GiftCarousel.
2. Onlara bir‑iki CTA‑düymə əlavə edin:
   • kartlar üçün — «Seç»;
   • siyahı üçün — «Ətraflı»;
   • karusel üçün — yenə «Seç», üstəlik vidcetin altında ayrıca «Daha çox variant göstər» düyməsi.
3. Vəziyyətdən asılı olaraq (məsələn, alətin qaytardığı hədiyyələrin sayına görə) hansı şablondan istifadə etməyi seçin:
   • variant azdırsa (≤ 3) — kart şəbəkəsi;
   • mətn ideyaları çoxdursa — siyahı;
   • vizual hədiyyələr çoxdursa — karusel.

Beləliklə, təkcə UI məşqi etməyəcək, həm də kontekstdən asılı olaraq şablonun dinamik seçimi barədə düşünməyə başlayacaqsınız — bu isə həm istifadəçiləri, həm də Store‑dakı baxışçıları sevindirəcək.

Ümumiyyətlə, inline‑şablonlar çat lentində birbaşa yaşayan, ayrı tətbiqi əvəz etməyə çalışmayan, sürətli və yüngül UI qatıdır. Kartlar, siyahılar və karusellər tipik işlərin 80%‑ni bağlayır: variantları göstərmək, seçdirmək və dialoqu səliqə ilə davam etdirmək.

Bu modulun növbəti mühazirəsində inline artıq «çatdırmayanda» nə etməli olduğumuza baxacağıq: fullscreen‑bələdçiləri, PiP‑rejimi və App‑inizin həqiqətən ChatGPT içində ayrıca böyük ekrana ehtiyac duyduğu ssenariləri müzakirə edəcəyik.

11. inline‑şablonlarla işləyərkən tipik səhvlər

Səhv №1: inline‑vidceti mini‑sayta çevirmək.
Bəzən tərtibatçılar bir karta tablar, akordeonlar, formalar, cədvəl və başqa elementlər yığmağa çalışırlar. Nəticədə ağır UI alınır, çatın ritmini pozur və mobil cihazlarda narahat olur. Təlimatlar birbaşa deyir: inline kartların içində dərin naviqasiya və mürəkkəb görünüşlər yoxdur; mürəkkəb ssenarilər fullscreen‑ə çıxarılır.

Səhv №2: çoxlu CTA‑düymə.
«Gəlin kartda “Ətraflı”, “Al”, “Sevimliyə”, “Paylaş”, “Şikayət et” və “Açıqca yarat” düymələrini edək». Nəticədə istifadəçi də, model də itir və düzgün düyməyə klik ehtimalı azalır. Qaydanı unutmayın: bir əsas CTA və maksimum bir ikinci dərəcəli. Qalan ssenariləri GPT‑nin follow‑up mesajına və ya sonrakı addımlara çıxarmaq daha yaxşıdır.

Səhv №3: səbəbsiz yerə bir cavabda siyahı, kart və karuseli qarışdırmaq.
Eyni məzmun gah siyahı, gah kart, gah da karusel kimi «bacardığımız üçün» göstərilirsə, istifadəçi ardıcıllıq hissini itirir. Həm məzmun növünə görə bir şablon seçmək (məsələn, şəkilsiz ideyalar — siyahı, şəkilli hədiyyələr — karusel) və ona sadiq qalmaq daha yaxşıdır.

Səhv №4: kartları mətnlə həddən artıq yükləmək.
Üç paraqraf təsvir, üç qiymət və iki «nəyə görə əladır» bloklu kart mətn divarına çevrilir. İstifadəçi artıq onu «skan» etmir, sadəcə yanından keçir. Kartda yalnız ən vacibi saxlayın: başlıq, bir açar parametr, bir qısa səbəb və CTA. Qalan hər şeyi yanında GPT‑nin mətn cavabında izah etmək olar.

Səhv №5: yalnız UI‑a güvənmək və follow‑up dialoqunu görməməzlikdən gəlmək.
Bəzən «hər şeyi düymələrlə edirik, istifadəçi danışmasın» yanaşmasına rast gəlmək olur. Bu, ChatGPT ideyasına ziddir. Inline‑vidcet dialoqu tamamlamalıdır, onu əvəz etməməlidir. Vidcetin altında modelin təklif edə biləcəyi follow‑up variantlarını düşünməyi unutmayın: filtrləri dəyişmək, daha çox variant istəmək, növbəti addıma keçmək.

Səhv №6: element sayına dair məhdudiyyətləri nəzərə almamaq.
Bir inline‑vidcetdə 25 kartlıq karusel və ya 50 maddəlik siyahı — istifadəçinin hamısının yanından skroll etməsinə aparan yoldur. Sənədlər karusel üçün 3–8 elementi, siyahı üçün 5–10 mövqeni tövsiyə edir. Məlumat daha çoxdursa, «Daha çoxunu göstər» və ya «Hamısını mətnlə göstər» kimi CTA əlavə etmək faydalıdır.

Səhv №7: artıq fullscreen lazım olan yerdə inline istifadə etmək.
Bəzən «hər şeyi inline etmək» cazibəsi olur — halbuki artıq 4 addım, onlarla sahəsi olan formalar və böyük cədvəllər var. Sonda ya bir «canavar» alınır, ya da kartların içində daxili skroll və saxta stepperlər ixtira etməyə başlayırsınız. Addımların və sahələrin sayı çoxalırsa — bu, fullscreen bələdçiyə keçidi düşünmək üçün siqnaldır, inline isə sürətli önbaxış və hərəkət xülasələri üçün qalsın.