A ShopChatly 24 preset ikont kínál (gyémánt, robot, ember, ruha-stílusú), de a webshop-tulajdonosok 30%-a saját ikont szeretne — ami illik a brand-arculathoz. Ez a cikk gyakorlatban végigmegy a tervezésen.

A specifikáció

A ShopChatly automatikusan átalakítja a feltöltött képet. De ha a forrás-kép pontosan ennek megfelel, az eredmény a leg-jobb:

Paraméter	Érték
Méret	256×256 px (négyzet)
Formátum	PNG (átlátszó háttérrel) vagy JPG
Max fájlméret	2 MB
Min méret	64×64 px
Max méret	4 000×4 000 px
Színprofil	sRGB

A widget a chat-buborékon 48×48 px-en, a chat fejlécében 32×32 px-en jeleníti meg, kör alakú vágással.

Tervezési alapszabályok

1. Fókusz a középen

A chatbuborék kör alakú — a négyszög-forma sarkai levágódnak. A fő grafikai elem (logó, ikon) a kép középén legyen, a kép szélétől legalább 10-15% margóval.

┌────────────────────┐
│                    │  ← biztonsági margó
│     ┌──────┐       │
│     │      │       │  ← fő ikon (60-70%-os méretű)
│     │ logo │       │
│     │      │       │
│     └──────┘       │
│                    │
└────────────────────┘

2. Egyszerű, felismerhető

48×48 px-en (a buborékon) sok részlet nem látható. Az ikon legyen egyszerű — egy fő elem, max 2-3 szín. Bonyolult rajzok elveszik.

3. Brand-szín kontrasztos

Ha a brand-színed lila (#6e1f5e), a chat-buborék is lila. Az ikon belső szín ne legyen lila — különben elveszik a háttérben. Inkább fehér, arany, vagy más kontrasztos szín.

4. Szöveg kerülése

48×48 px-en nincs olvasható szöveg. Csak rövid betű (pl. „S” mint „ShopChatly”, vagy a webshopod monogramja) működik.

Példák — különböző stílusok

Példa 1: ékszer-webshop monogramja

A „Panacha” boltnál a P betűt egy fehér körre helyezve:

Háttér: kör alakú vágás (a buborék színe a brand-szín)
Belső: fehér kör 80%-os méretű
Belső kép: nagy „P” arany betűvel

Eredmény: tiszta, brand-konzisztens, felismerhető.

Példa 2: divatbolt — egyszerű ruhalogó

Háttér: kör (lila)
Belső: minimalistikus ruhalogó (fehér sziluett)
Színskála: lila + fehér + 1 akcent (rózsaszín)

Példa 3: étrend-kiegészítő — levél vagy mortar

Háttér: kör (zöld)
Belső: stilizált levél-szimbólum (egyszerű, 2-tónusú)
Színskála: zöld + fehér

Ingyenes tervező-eszközök

Canva (canva.com)

A leg-egyszerűbb. Nyiss egy „Logo” sablont, méret 1080×1080 (utána szűkítheted 256×256-ra).

Háttér: kör elem, brand-színnel
Center-elem: ikon-grafika (a Canva ingyenes kínálatából)
Export: PNG, átlátszó háttér opcióval

Figma (figma.com)

Profibb opció:

New file → Frame 256×256
Ellipszis tool: 256×256-os kör, brand-színnel
Center: ikon (Iconify plugin-ban van 100 000+ ingyenes ikon)
Export: PNG

Photopea (photopea.com)

Online Photoshop-szerű:

New file 256×256, transparent background
Layer 1: kör (Ellipse tool, brand-szín)
Layer 2: ikon (Free elements vagy saját)
Export: PNG

Tipikus hibák

1. Felirat túl sok szöveggel

❌ Egy 256×256-os kép, ahol a „ShopChatly Asszisztens” felirat van végigírva a kör peremén.

48×48 px-en olvashatatlan, zsúfolt lesz. Egy betűt vagy szimbólumot tegyél középre.

2. Túl detáljos rajz

❌ Egy 256×256-os fényképszerű emberi arc, részletes vonásokkal.

Kicsinyítve homályos folt lesz. Egy stilizált, lapos rajz a megoldás.

3. Brand-színektől eltérő

❌ A webshopod fő színe lila, de az ikon zöld háttérrel.

A buborék a primary_color-ból jön, az ikon háttér átmegy a buborék-háttér alá. Ha a kép sarka másszínű (pl. zöld), vágáskor különös perem lesz.

4. Túl magas felbontás

❌ Egy 4 000×4 000 px, 8 MB-os PNG.

A ShopChatly automatikusan átméretezi 256×256-ra, de a feltöltés lassú. Inkább már 256×256 vagy 512×512 méretben mentsd ki.

A feltöltés folyamata

A ShopChatly admin felületen:

Beállítások → 1. Bot személyiség → Bot ikon
„Saját ikon feltöltése” gomb
Kiválasztod a fájlt
Automatikus validáció és átméretezés (256×256, kör alakú vágás középről)
Előnézet a chat-buborékban
Mentés — a következő óránkénti szinkronnál érvénybe lép

Mentés után azonnal él a webshopodon, ha hard reload-olod.

Mit válassz, ha bizonytalan vagy?

Az alapértelmezett SVG chat-buborék-ikon mindig profi. Ne erőltesd a saját ikont, ha:

Nincs grafikai tapasztalatod
Nincs brand-konzisztens fő-elemed (logó, monogram)
Nincs időd 1-2 órás tervezésre

A 24 preset ikon vegyes stílusú — gyémánt, ember, robot, ruha. Ha a saját webshopod stílusához valamelyik passzol, válaszd azt.

Pro tipp

Ha a brand-arculatod több webshopot érint (multi-store), egyetlen ikon mindenhova ráadod? Általában igen — a vásárlók így ismerik fel a brand-et különböző bolt-felületeken.

Kivéve ha a 3-10 boltod különböző brand-eken van (pl. ezüst-ékszer + ruha + parfüm). Akkor minden bolt saját ikont kapjon.

Próbáld ki itt — a saját ikon-feltöltést a 14 napos próba alatt is megteheted.

Hogyan készíts saját chatbot-ikont a webshopodhoz — tervezés