--- title: "WooCommerce AI Görünürlüğü: ChatGPT Alışveriş Rehberi" description: "WooCommerce ürün özellikleri, varyant, feed, şema, taranabilirlik ve ChatGPT görünürlük ölçümü için uygulamalı rehber." source_url: "https://brantial.ai/tr/blog/woocommerce-ai-gorunurlugu-chatgpt-alisveris/" lang: "tr" updated: "2026-09-15T00:00:00.000Z" --- Rehber 15 Eylül 2026 # WooCommerce AI Görünürlüğü: ChatGPT Alışveriş Rehberi WooCommerce ürün özellikleri, varyant, feed, şema, taranabilirlik ve ChatGPT görünürlük ölçümü için uygulamalı rehber. ## Öne Çıkanlar: WooCommerce AI Görünürlüğü 5 - WooCommerce satıcıları Google ürün feed’ini ChatGPT’ye değiştirmeden gönderebileceğini varsaymamalı; dosya OpenAI’ın güncel şemasına ve başvuru yoluna göre eşlenmelidir. - Ürün kimliği, global özellikler, varyasyonlar, fiyat, stok ve görseller dağınık sayfa metni yerine yapılandırılmış katalog verisi olarak yönetilmelidir. - Eklentiler veriyi dışa aktarabilir; feed, yapılandırılmış veri ve görünür sayfa arasındaki çelişkiyi satıcının ayrıca kontrol etmesi gerekir. - Performans, bot erişimi, canonical ve satıştan kalkan ürün yönetimi ürün keşfinin parçasıdır; ayrı teknik işler değildir. - Feed hataları, ürün doğruluğu ve yönlendirme dönüşümleri kontrollü bir alışveriş prompt setiyle birlikte ölçülmelidir. [Atiye Berika Ertaş Proje Koordinatörü](https://brantial.ai/tr/yazarlar/atiye-berika-ertas/) 7 dk okuma Paylaş [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fbrantial.ai%2Ftr%2Fblog%2Fwoocommerce-ai-gorunurlugu-chatgpt-alisveris%2F) [X](https://x.com/intent/post?text=WooCommerce%20AI%20G%C3%B6r%C3%BCn%C3%BCrl%C3%BC%C4%9F%C3%BC%3A%20ChatGPT%20Al%C4%B1%C5%9Fveri%C5%9F%20Rehberi%20https%3A%2F%2Fbrantial.ai%2Ftr%2Fblog%2Fwoocommerce-ai-gorunurlugu-chatgpt-alisveris%2F) [Facebook](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbrantial.ai%2Ftr%2Fblog%2Fwoocommerce-ai-gorunurlugu-chatgpt-alisveris%2F) [ChatGPT ile özetle](https://chatgpt.com/?q=Brantial%20i%C3%A7eri%C4%9Fini%20%C3%B6zetle%3A%20https%3A%2F%2Fbrantial.ai%2Ftr%2Fblog%2Fwoocommerce-ai-gorunurlugu-chatgpt-alisveris%2F) ![WooCommerce AI Görünürlüğü: ChatGPT Alışveriş Rehberi](https://brantial.ai/images/blog/woocommerce-ai-visibility-chatgpt-shopping/cover-tr.webp) ![WooCommerce AI Görünürlüğü: ChatGPT Alışveriş Rehberi](https://brantial.ai/images/blog/woocommerce-ai-visibility-chatgpt-shopping/cover-tr-dark.webp) WooCommerce ürünlerini ChatGPT alışverişe hazırlamak, tek bir “AI SEO eklentisi” bulmaktan çok mevcut kataloğu düzenlemekle ilgilidir. Ürün adı, varyasyon, özellik, fiyat, stok ve kimlikler; sayfada gösterilebilen ve her kanalın istediği feed’e dönüştürülebilen tutarlı bir kayıt oluşturmalıdır. Shopify’dan farklı olarak OpenAI’ın güncel satıcı sayfası bütün WooCommerce kataloglarının otomatik biçimde entegre olduğunu söylemiyor. WooCommerce satıcıları mevcut Google feed’inin zaten bağlı olduğunu varsaymak yerine [OpenAI satıcı başvurusunu](https://chatgpt.com/merchants/) ve [Stable ürün feed spesifikasyonunu](https://developers.openai.com/commerce/specs/file-upload/products) kontrol etmelidir. ## Feed Eklentisinden Önce Kataloğu Kurun Feed aracı yalnızca erişebildiği veriyi dışa aktarabilir. Renk bir üründe serbest metin, diğerinde yerel özellik, üçüncüsünde başlığın bir parçasıysa hangi eklentiyi seçerseniz seçin çıktı tutarsız olur. Önce katalog modelini tanımlayın: | Ürün bilgisi | Önerilen WooCommerce kaynağı | Neden önemli | | --- | --- | --- | | Ürün kimliği | Kalıcı ürün/varyasyon kimliği ve benzersiz SKU | Kayıtların birleşmesini veya yeniden kullanımını önler | | Marka | Tutarlı marka sınıflandırması veya alan | Ürünü doğru marka varlığına bağlar | | GTIN / MPN | Geçerli ürün veya varyasyon alanı | Tam olarak hangi ticari ürün olduğunu gösterir | | Kategori | Düzenli ürün kategori yapısı | Ürünün bağlamını sağlar | | Özellikler | Tekrar kullanılacaksa global özellikler | Renk, beden ve malzemeyi tutarlı tutar | | Fiyat | Ürün veya varyasyon fiyatı | Güncel satın alınabilir teklifi temsil eder | | Stok | Stok durumu ve ön sipariş politikası | Teklifin karşılanıp karşılanamayacağını gösterir | | Görsel | Ürün ve varyasyon medyası | Doğru seçeneği doğru görselle eşleştirir | WooCommerce, bir değer farklı ürünlerde tekrar kullanılacaksa global özellikleri önerir. Bu alanlar, değişken ürünlerde ve mağaza özelliklerini kanala özel feed alanlarına eşleyen araçlarda da önemlidir. ## 1. Basit ve Değişken Ürünleri Ayrı İnceleyin Basit ürün tek satın alınabilir seçeneğe sahiptir. Değişken ürün ise beden, renk veya kapasite gibi ayrı varyasyonların üst kaydıdır. Her varyasyonda şunları doğrulayın: - benzersiz kimlik, - etkin ve satın alınabilir durum, - fiyat ve kampanya tarihleri, - stok veya ön sipariş durumu, - atanmışsa SKU, GTIN ya da MPN, - varyasyon görseli, - seçenek değerleri, - açılış URL’sinin davranışı. Müşteri satın almak için varyasyon seçmek zorundaysa yalnızca üst ürünü dışa aktarmayın. OpenAI keşif feed’i satın alınabilir her ürün veya varyant için ayrı satır ister. Sağlıklı feed aynı ayrıntı düzeyini korumalıdır. ## 2. Özellikleri Kullanışlı Ürün Bilgisine Dönüştürün Tekrar kullanılan bilgiler için global özellik oluşturun: - renk, - beden, - malzeme, - desen, - kapasite, - uyumluluk, - yaş grubu, - ürün durumu. Müşterinin anlayacağı ad ve değerler kullanın. `attr_07` gibi iç etiketler veritabanında çalışabilir; dışa aktarılırken anlamlı bir başlığa eşlenmelidir. WooCommerce’ın Google entegrasyonu marka, renk, durum, GTIN, malzeme, MPN ve beden gibi alanlar için özellik eşlemesi sunar. Bu eşleme Google için faydalıdır; OpenAI çıktısı yine kendi şema adaptörüne ve doğrulamasına ihtiyaç duyar. ## 3. Sayfayı Satın Alma Kararı İçin Yazın Ürün açıklaması üreticiden gelen düzenlenmemiş metin olmamalıdır. Satıcının teklifini ve müşterinin bugün ihtiyaç duyduğu bilgiyi anlatmalıdır. Şu sırayı kullanın: 1. Ürünün sade tanımı, 2. En uygun kullanıcı veya kullanım alanı, 3. Kararı değiştiren özellikler, 4. Teknik bilgiler ve ölçüler, 5. Uyumluluk ve sınırlar, 6. Kutu içeriği, 7. Kargo, iade ve garanti. Önemli bilgileri okunabilir HTML içinde sunun. Erişilebilir sekme ve akordeon kullanılabilir; ancak içerik yalnızca çalışmayan bir API çağrısından sonra gelmemelidir. ## 4. Kanala Özgü Feed Üretin WooCommerce ürünleri Google Merchant Center ile eşitleyen veya dosya üreten farklı feed eklentileri sunar. Hedef kanalın istediği değer ve çıktı formatını kontrol edebileceğiniz yöntemi seçin. ChatGPT keşfi için OpenAI’ın Stable spesifikasyonu şu alanları zorunlu tutuyor: - `item_id` - `title` - `description` - `url` - `brand` - `seller_name` - `image_url` - `availability` - `price` Mevcut aracınız `id`, `link` ve `image_link` gibi Google alanları üretiyorsa belgelenmiş bir dönüşüm katmanı ekleyin. Çalışan Merchant Center bağlantısını bozacaksa Google feed’inin kendisini değiştirmeyin. Temel alan eşlemesini [ChatGPT ve Google Merchant Center ürün feed karşılaştırmasında](https://brantial.ai/tr/blog/chatgpt-urun-feedi-google-merchant-center-karsilastirmasi/) bulabilirsiniz. ## 5. Vitrindeki Yapılandırılmış Veriyi Kontrol Edin WooCommerce, etkin tema ve SEO eklentileri yapılandırılmış veriyi aynı anda etkileyebilir. Daha fazla işaretleme her zaman daha iyi değildir. Farklı fiyat veya stok söyleyen iki `Product` nesnesi belirsizlik oluşturur. Temsilî basit ve değişken ürün sayfalarında şunları inceleyin: - tek ana `Product` veya `ProductGroup` modeli, - doğru ürün adı ve görsel, - `Offer` fiyatı ve para birimi, - seçili seçenekle eşleşen stok, - marka, SKU, GTIN veya MPN, - varsa kargo ve iade bilgisi, - hedeflenen ürün sayfasıyla eşleşen canonical URL. Google’ın [Merchant Listing dokümanı](https://developers.google.com/search/docs/appearance/structured-data/merchant-listing), alışveriş senaryolarında ürün yapılandırılmış verisinin ilk HTML içinde bulunmasını öneriyor. Rich Results Test ile doğruladıktan sonra çıkarılan değerleri gerçek sayfa ve feed ile karşılaştırın. ## 6. Fiyat ve Stoku Güncel Tutun Önbellek WooCommerce mağazasını hızlandırabilir; ancak eski ürün bilgisini saklayan cache, kullanıcı ve tarayıcıya farklı fiyat veya stok gösterebilir. Fiyat ya da stok değiştiğinde: - WooCommerce kaynak kaydını güncelleyin, - etkilenen ürün sayfasının cache’ini temizleyin, - kanal feed’lerini yenileyin veya sıraya alın, - yapılandırılmış veri çıktısını doğrulayın, - başarısız eşitleme işlerini kaydedin. Takvimi kataloğun değişim hızına göre belirleyin. Stoku sık değişen mağazada haftalık tam dışa aktarma yeterli değildir. ## 7. Taranabilirlik ve Performansı Koruyun Ürün keşfini oturum kapalı tarayıcıdan ve tarayıcı benzeri istekle kontrol edin. Şunlara bakın: - aktif ürün sayfasında 200 yanıtı, - yanlışlıkla eklenmiş `noindex` bulunmaması, - HTML çıktısında yararlı içerik, - erişilebilir görseller, - doğru canonical, - normal tarayıcıları engellemeyen güvenlik katmanı, - önemli ürünlere iç bağlantılar, - yük altında kabul edilebilir sunucu yanıtı. WordPress güvenlik ve cache eklentileri kullanıcı aracına göre farklı davranabilir. Yalnızca ayar ekranına değil, production’daki gerçek yanıta bakın. ## 8. Satıştan Kalkan Ürünleri Bilinçli Yönetin Stokta olmayan her ürünü hemen silmeyin. Durumun geçici stok tükenmesi, kalıcı olarak satıştan kalkma veya yeni modelle değişme olduğunu belirleyin. | Durum | Sayfa işlemi | Feed işlemi | | --- | --- | --- | | Geçici stok tükenmesi | Faydalı sayfayı koruyup doğru durumu gösterin | Desteklenen stokta yok değerini gönderin | | Ön sipariş | Teslimat zamanını açıklayın | Desteklenen ön sipariş değerini kullanın | | Kalıcı olarak kalkmış | Faydalı arşiv tutun veya gerçek devam ürününe yönlendirin | Kanal politikasına göre kaldırın | | Yeni modelle değişmiş | İlişkiyi açıklayıp yeni modele bağlayın | Yeni modeli kendi kimliğiyle yayımlayın | Satıştan kalkan her ürünü ana sayfaya yönlendirmeyin. Bu, hem müşteri hem de eski ürünü anlamaya çalışan sistem için bağlamı ortadan kaldırır. ## 9. Görünürlükle Ticareti Birlikte Ölçün Katalogdaki gerçek kararları temsil eden prompt seti kullanın: bütçe, teknik özellik, uyumluluk, teslimat, karşılaştırma ve kullanım alanı. Şunları takip edin: 1. İlgili yanıtlarda ürünün listeye girme durumu, 2. Fiyat, özellik ve stok bilgisinin doğruluğu, 3. Markanın belirlenen rakiplere göre konumu, 4. Yanıtta kullanılan kaynaklar, 5. Ürün sayfasına gelen AI yönlendirmeleri, 6. Bu oturumların sepete ekleme ve geliri, 7. Feed reddi ve eski veri oranı. Tek metrik bütün yolu açıklayamaz. Ürün yanlış fiyatla anılabilir veya yönlendirme stokta olmayan varyanta gidebilir. [Brantial AI Görünürlük Analizi](https://brantial.ai/tr/features/ai-visibility/) yanıt katmanını izler; [Site Health](https://brantial.ai/tr/features/site-health/) ise ürün URL’lerinde tekrar eden teknik ve sayfa sağlığı sorunlarını bulmaya yardımcı olur. ## WooCommerce AI Görünürlük Kontrol Listesi - Ürün ve varyasyon kimlikleri kalıcı. - Global özellikler tutarlı ad ve değerler kullanıyor. - Her satın alınabilir varyasyonun fiyat, stok ve görseli doğru. - Marka, GTIN ve MPN gerçek ve doğru eşlenmiş. - Ürün metni gerçek karar sorularını yanıtlıyor. - OpenAI ve Google feed’leri ayrı doğrulanmış çıktı olarak üretiliyor. - Yapılandırılmış veri görünür sayfayla eşleşiyor. - Canonical, robots kuralları ve durum kodları doğru. - Fiyat ve stok değişiminden sonra cache temizleniyor. - Satıştan kalkan ürünler belgelenmiş politikayı izliyor. - Alışveriş prompt’ları ve yönlendirme dönüşümleri birlikte ölçülüyor. ## Sık Sorulan Sorular ### WooCommerce ChatGPT alışverişe otomatik bağlı mı? OpenAI’ın güncel satıcı sayfası otomatik katalog entegrasyonu için Shopify ve Etsy’yi açıkça belirtiyor; bütün WooCommerce mağazalarını belirtmiyor. WooCommerce satıcıları güncel başvuru ve feed seçeneklerini kontrol etmelidir. ### Google for WooCommerce feed’i ChatGPT’de kullanılabilir mi? Veri kaynağı olarak kullanın; son dosya olduğunu varsaymayın. Alan ve değerleri OpenAI’ın Stable şemasına eşleyin, çıktıyı ayrıca doğrulayın. ### Hangi WordPress eklentisi AI görünürlüğünü garanti eder? Hiçbiri. Eklenti işaretleme veya feed üretebilir; AI yanıtında seçilmeyi garanti edemez. Doğru veri üretip üretmediğini ve tema, cache ile katalog modelinizle uyumunu değerlendirin. ### Değişken ürünler ayrı feed kaydına sahip olmalı mı? Her varyasyon satın alınabiliyorsa üst ürün ilişkisini koruyarak ayrı kimlik, stok, fiyat ve görselle ayrı kayıt gönderin. ↑ Başa dön ## Diğer Yazılar [Daha fazla içeriğe göz at](https://brantial.ai/tr/blog/) Yazı 22 Eki 2026 ### AI Motorları Hangi Siteleri Kaynak Gösteriyor? 95.144 AI cevabındaki 639.334 kaynağı inceledik. Atıfların %92’si Vikipedi ya da Reddit’e değil sıradan sitelere gidiyor; her motorun kendi gözdesi var. [AI Motorları Hangi Siteleri Kaynak Gösteriyor?](https://brantial.ai/tr/blog/ai-motorlari-hangi-siteleri-kaynak-gosteriyor/) Yazı 22 Eki 2026 ### LLM SEO Rehberi: AI Modellerinde Bulunmak ve Kaynak Olmak LLM SEO, içeriğinizi ChatGPT, Gemini, Claude ve Perplexity için bulunur ve kaynak gösterilebilir kılar. AI cevaplarının %89’u önce web’de arıyor; işte yapılacaklar. [LLM SEO Rehberi: AI Modellerinde Bulunmak ve Kaynak Olmak](https://brantial.ai/tr/blog/llm-seo-rehberi/) Yazı 21 Eki 2026 ### Arama Botu Nedir? 2026 Arama Motoru ve AI Botları Listesi Arama botu, sayfalarınızı arama motorları ve AI asistanları için ziyaret eder. 2026’da hangi botun ne yaptığını ve robots.txt’te hangisine izin vermeli? [Arama Botu Nedir? 2026 Arama Motoru ve AI Botları Listesi](https://brantial.ai/tr/blog/arama-botu-nedir/) 800 bin+ ANALİZ EDİLEN AI CEVABI 8 CEVAP MOTORU HAFTALIK ENDEKS TARANAN MOTORLAR: ChatGPT Gemini Claude Perplexity Grok Mistral Meta AI DeepSeek ÜRÜN: [Platforma Genel Bakış](https://brantial.ai/tr/platform/) [Prompt Hacimleri](https://brantial.ai/tr/features/prompt-volumes/) [AI Otorite Endeksi](https://brantial.ai/tr/ai-authority-index/) [AI Sektör Endeksi](https://brantial.ai/tr/ai-sektor-endeksi/) [1 Analiz Hakkı](https://brantial.ai/tr/brandscore/) [Agent Analytics](https://brantial.ai/tr/features/agent-analytics/) [Entegrasyonlar](https://brantial.ai/tr/integrations/) [Fiyatlandırma](https://brantial.ai/tr/pricing/) ŞİRKET: [Hakkımızda](https://brantial.ai/tr/about/) [Güven Merkezi](https://brantial.ai/tr/trust/) [Kariyer](https://brantial.ai/tr/careers/) [Partner Programı](https://brantial.ai/tr/agency-partner/) [Brantial University](https://university.brantial.ai/tr) [Visionary Share](https://brantial.ai/community/visionary-share/) [Beyond Click](https://brantial.ai/tr/beyond-click/) [Vaka Çalışmaları](https://brantial.ai/tr/case-studies/) [İletişim](https://brantial.ai/tr/contact/) KAYNAKLAR: [Kaynak Merkezi](https://brantial.ai/tr/resources/) [Araştırma Raporları](https://brantial.ai/tr/reports/) [Sektörler](https://brantial.ai/tr/industries/) [Vaka Çalışmaları](https://brantial.ai/tr/case-studies/) [Türkiye AI Otorite Endeksi](https://brantial.ai/tr/ai-authority-index/) [AI Sektör Endeksi](https://brantial.ai/tr/ai-sektor-endeksi/) [Otomotiv AI Raporu](https://brantial.ai/tr/reports/otomotiv-sektorunde-ai-gorunurlugu-brantial-2026-raporu/) [GEO Sözlüğü](https://brantial.ai/tr/glossary/) [GEO Rehberi](https://brantial.ai/generative-engine-optimization-guide/) [Blog](https://brantial.ai/tr/blog/) [Karşılaştırma Merkezi](https://brantial.ai/tr/compare/) ![Brantial](https://brantial.ai/layout/logo-wordmark.svg) Brantial, AI görünürlüğünü anlamak ve içerik çalışmalarını geliştirmek için araçlar sunar. Agentic commerce yönümüz, ürün bilgisi ve alışveriş görevlerinin doğruluğuna odaklanır. Webtures LTD tarafından işletilir. WEBTURES LTD. · Şirket No. 11948574 494a Fulham Road, London, England, SW6 5NH [hello@brantial.ai](mailto:hello@brantial.ai) SERTİFİKALAR: KVKK GDPR SOC 2 · SÜREÇTE [![Brantial Certified GEO Partner](https://brantial.ai/assets/geo-partner-badge.avif) Sertifikalı GEO Partner programı: rozet, dizin ve toptan marj](https://brantial.ai/tr/agency-partner/) Haftalık Görünürlük Endeksi Her hafta GEO trendleri ve içgörüler, e-postanda. [Abone ol](https://www.linkedin.com/newsletters/g%C3%B6r%C3%BCn%C3%BCrl%C3%BCk-raporu-7449413673988583424/) © 2026 Brantial · Webtures LTD [TR](https://brantial.ai/tr/blog/woocommerce-ai-gorunurlugu-chatgpt-alisveris/) [EN](https://brantial.ai/blog/woocommerce-ai-visibility-chatgpt-shopping/) [Gizlilik](https://brantial.ai/privacy-policy/) [Şartlar](https://brantial.ai/terms-of-service/) [Çerezler](https://brantial.ai/cookie-policy/) ÜCRETSİZ MARKA ANALİZİ ## Analiz hakkınızı kullanın Brantial University ## Merhaba, hadi başlayalım! Hızlı çözüm, tek mesaj uzağınızda. **Sorunuzu ekibe yazın** Genellikle birkaç dakika içinde yanıtlarız **Brantial University** GENELLİKLE BİRKAÇ DAKİKA İÇİNDE YANITLAR .br-chat { --br-chat-panel: var(--card); --br-chat-surface: var(--bg); --br-chat-input: var(--card); --br-chat-text: var(--text); --br-chat-copy: var(--t2); --br-chat-muted: var(--t3); --br-chat-faint: var(--t5); --br-chat-line: var(--border2); --br-chat-outer-line: var(--border3); --br-chat-visitor-bg: var(--text); --br-chat-visitor-text: var(--bg); --br-chat-team-bg: var(--tint2); position: static; color: var(--br-chat-text); font-family: Geist, -apple-system, 'Segoe UI', sans-serif; } .br-chat [hidden] { display: none !important; } .br-chat button, .br-chat input { box-sizing: border-box; font: inherit; } .br-chat button { color: inherit; } .br-chat__launcher { display: flex; position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 52px; height: 52px; align-items: center; justify-content: center; border: 1px solid var(--br-chat-outer-line); border-radius: 50%; background: var(--br-chat-panel); box-shadow: 0 6px 24px var(--shadow-soft); color: var(--br-chat-copy); cursor: pointer; transition: transform 0.15s ease; } .br-chat__launcher:hover { transform: translateY(-2px); } .br-chat__launcher svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; } .br-chat__launcher:focus-visible, .br-chat__panel button:focus-visible { outline: 1px solid var(--br-chat-text); outline-offset: 2px; } .br-chat__panel input:focus-visible { outline: 1px solid var(--br-chat-text); outline-offset: 0; } .br-chat__panel:focus { outline: none; } .br-chat__panel { position: fixed; right: 22px; bottom: 22px; z-index: 91; display: flex; width: 340px; max-width: calc(100vw - 24px); height: 440px; max-height: calc(100dvh - 90px); overflow: hidden; flex-direction: column; border: 1px solid var(--br-chat-outer-line); border-radius: 14px; background: var(--br-chat-panel); box-shadow: 0 16px 48px var(--shadow-soft); } .br-chat__welcome { position: relative; display: flex; min-height: 100%; flex: 1; flex-direction: column; justify-content: space-between; padding: 26px 18px 16px; } .br-chat__welcome-close { position: absolute; top: 10px; right: 10px; } .br-chat__welcome-copy h2 { margin: 0; color: var(--br-chat-text); font-size: 20px; font-weight: 700; line-height: normal; letter-spacing: -0.01em; } .br-chat__welcome-copy p { margin: 4px 0 0; color: var(--br-chat-muted); font-size: 13.5px; line-height: normal; } .br-chat__start-card { display: grid; width: 100%; margin-top: auto; gap: 4px; padding: 14px; border: 1px solid var(--br-chat-line); border-radius: 12px; background: var(--br-chat-surface); text-align: left; } .br-chat__start-card strong { font-size: 14px; font-weight: 600; line-height: normal; } .br-chat__start-card small { color: var(--br-chat-muted); font-size: 12.5px; font-weight: 400; line-height: normal; } .br-chat__start-card button { align-self: end; justify-self: start; margin-top: 8px; padding: 0; border: 0; background: transparent; color: var(--br-chat-text); font-size: 14px; font-weight: 600; cursor: pointer; } .br-chat__start-card button:hover { color: var(--br-chat-muted); } .br-chat__icon-button { display: flex; width: 32px; height: 32px; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--br-chat-line); border-radius: 99px; background: transparent; color: var(--br-chat-text); font-size: 15px; line-height: 15px; cursor: pointer; } .br-chat__icon-button:hover { background: var(--br-chat-team-bg); } .br-chat__conversation { display: flex; min-height: 0; flex: 1; flex-direction: column; } .br-chat__header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--br-chat-line); background: var(--br-chat-surface); } .br-chat__header > div { min-width: 0; flex: 1; } .br-chat__header strong { display: block; font-size: 14px; font-weight: 600; line-height: normal; } .br-chat__header small { display: block; margin-top: 3px; color: var(--br-chat-faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 400; letter-spacing: 0.06em; line-height: 1.55; } .br-chat__log { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 8px; overflow-y: auto; padding: 14px; } .br-chat__messages { display: flex; flex-direction: column; gap: 8px; } .br-chat__bubble { max-width: 85%; margin: 0; padding: 8px 12px; overflow-wrap: anywhere; border-radius: 12px; color: var(--br-chat-copy); font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; } .br-chat__bubble--visitor { align-self: flex-end; border: 1px solid var(--br-chat-outer-line); border-radius: 12px 12px 4px; background: var(--br-chat-visitor-bg); color: var(--br-chat-visitor-text); } .br-chat__bubble--team { align-self: flex-start; border-radius: 12px 12px 12px 4px; background: var(--br-chat-team-bg); } .br-chat__email-area { width: 100%; } .br-chat__email-form { display: grid; width: 100%; max-width: 292px; gap: 8px; padding: 8px 12px; border-radius: 12px 12px 12px 4px; background: var(--br-chat-team-bg); } .br-chat__email-form label { color: var(--br-chat-copy); font-size: 13.5px; font-weight: 400; line-height: 1.55; } .br-chat__email-form > div { display: flex; gap: 8px; } .br-chat__email-form input { min-width: 0; height: 38px; flex: 1; padding: 9px 10px; border: 1px solid var(--br-chat-line); border-radius: 8px; background: var(--br-chat-input); color: var(--br-chat-copy); font-size: 13.5px; } .br-chat__email-form input[aria-invalid='true'] { border-color: #d14343; } .br-chat__email-form button { display: flex; width: 38px; height: 38px; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 8px; background: var(--br-chat-visitor-bg); color: var(--br-chat-visitor-text); font-size: 16px; cursor: pointer; } .br-chat__email-form button:disabled { cursor: wait; opacity: 0.62; } .br-chat__error { margin: 0; color: #d14343; font-size: 11.5px; line-height: 1.4; } .br-chat__composer { display: flex; min-height: 59px; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--br-chat-line); background: var(--br-chat-surface); } .br-chat__composer input { min-width: 0; height: 38px; flex: 1; padding: 9px 12px; border: 1px solid var(--br-chat-line); border-radius: 10px; background: var(--br-chat-input); color: var(--br-chat-copy); font-size: 13.5px; } .br-chat__composer button { display: flex; width: 40px; height: 38px; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--br-chat-muted); cursor: pointer; } .br-chat__composer button:hover:not(:disabled) { color: var(--br-chat-text); } .br-chat__composer button:disabled, .br-chat__composer input:disabled { cursor: default; } .br-chat__composer button span { font-size: 17px; line-height: 1; } .br-chat__composer input::placeholder, .br-chat__email-form input::placeholder { color: var(--br-chat-faint); opacity: 1; } .br-chat__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 480px) { .br-chat__panel { right: 12px; bottom: 12px; width: calc(100vw - 24px); height: min(480px, calc(100dvh - 70px)); } .br-chat__icon-button { width: 44px; height: 44px; } .br-chat__composer input, .br-chat__email-form input { height: 44px; font-size: 16px; } .br-chat__composer button, .br-chat__email-form button { width: 44px; height: 44px; } .br-chat__start-card button { display: inline-flex; min-height: 44px; align-items: center; } } @media (prefers-reduced-motion: reduce) { .br-chat__launcher { transition: none; } }