--- metadata: - name: generator content: Diplodoc Platform v5.54.2 alternate: - https://yandex.com/support/varioqub/en/create/types/integrations.md - https://yandex.com/support/varioqub/ru/create/types/integrations.md - https://yandex.com/support/varioqub/tr/create/types/integrations.md - href: tr/create/types/integrations.md type: text/markdown title: Markdown version - href: ../../llms.txt type: text/markdown title: llms.txt --- > **Documentation Index:** Fetch the complete configuration index at https://yandex.com/support/varioqub/tr/llms.txt # Widget'lar Kişiselleştirilmiş teklifler, indirimler içeren bilgi bloklarını koymak veya bize yeni fırsatlar hakkında bilgi vermek için kullanın. Bilgi bloku için doğru formatı seçin ve ihtiyaçlarınıza göre özelleştirin. Bir deney oluştururken, widget'ın sitenizde nasıl görüneceğini görmek için **Deneyi Kontrol Et** penceresini kullanın. Kullanıcıları istenen sayfaya yönlendirmek için bir bağlantı ekleyin. {% cut "Kullanım örnekleri" %} - Yeni koleksiyon sayfasına yönlendirme. - İndirim uygulanmış sepete yönlendirme. Bunu yapmak için, sitenizde bir indirim sistemi ve bağlantı parametrelerine promosyon kodu ekleyebilme olanağı olmalı. {% endcut %} ## Deney türü **Widget'lar**'ı seçin. ## Sayfa seçeneklerinin ayarlanması Ayarlamanız için aşağıdaki widget türleri mevcuttur: {% list tabs %} - Köşede banner {% note info %} Sadece ["Standart" ve "Gelişmiş" tarifelerinde](https://yandex.com/support/varioqub/tr/paid-functionality.md) kullanılabilir. {% endnote %} Sayfanın köşesinde küçük bir pencere. İçeriğe müdahale etmez ve her türlü site düzenine uyar. {% cut "Köşede bir banner örneği" %} ![Köşede banner](../../_assets/integration-popup.png =800x) {% endcut %} 1. Metin veya biçimlendirme için birkaç seçeneği kontrol etmeniz gerekiyorsa, **Seçenek Ekle** düğmesine basın. Ayar için başka bir deneysel seçenek oluşacaktır. Seçenekler deney sırasında birbirinin yerini alacaklar. 1. Her seçenek için açılır listeden widget türü seçin. 1. Ayarları belirtin: - **Konum**: Widget'ın site sayfasındaki konumu. Kullanılabilir seçenekler: **Sol üstte**, **Sağ üstte**, **Sol altta** ve **Sağ altta**. - **Renk Teması**: Widget'ın, koyu veya açık olmak üzere, renk türü seçeneği. Web sitenizin renk şemasına göre seçim yapın. - **Başlık**: Widget'ın başlık metni. Varsayılan olarak başlık, widget'ın diğer öğelerine göre daha büyük bir yazı tipi ile yazılır. Boyutunu ayarlamak için **Manuel Stil Ayarlaması’nı** kullanın. - **Metin**: Widget'ın ana metnidir. Başlığın altında yer alır ve widget'ın özünü açıklar. - **Bağlantı adı**: Üzerine tıkladığınızda başka bir sayfaya geçeceğiniz bağlantının metni. - **Bağlantı adresi**: Bağlantılara tıklandığında geçişin yapılacağı sayfanın URL adresi. - **Kapanıştan sonra yeniden görüntüleme zaman aşımı (gün)**: Kullanıcının widget'ı kapatması durumunda widget'ın yeniden görüntüleneceği gün cinsinden süre. - **Ekran kenarına uzaklık (piksel)**: Sayfa kenarından açılır pencereye olan uzaklık, piksel cinsinden ifade edilir. Açılır pencerenin sayfadaki konumuna bağlı olarak sayfanın üst, alt, sol veya sağ kenarından ölçülür (örneğin, açılır pencere konumu **Üst sol** ise, mesafe sayfanın üst ve sol kenarlarından ölçülür). - **z-index CSS özelliğinin değeri**: Sayfadaki diğer katmanlara göre widget'ın konumunu belirler. Sayfa düzeni öğelerinden bazılarında kendi `z-index` özelliği belirtilmişse ve bu değer widget'ın varsayılan değerinden büyükse, widget bu öğe tarafından örtülecektir. Bu durumda, widget'ın tüm öğelerin üstünde olması için `z-index` değerini artırın. - **Manuel stil ayarlaması**: Stilleri manuel olarak ayarlamak, widget'ı sitenizin tarzına uygun hale getirmenizi sağlar. Böyle bir widget genel stilden ayrılmaz ve daha uyumlu görünür. {% note alert %} Stil düzenlemesi için yalnızca aşağıda sunulan CSS sınıfları kullanılabilir. Diğer stillerin değiştirilmesi, tüm sayfanın görünümünü değiştirebilir. Bu ayarları değiştirmek için CSS bilgisi gereklidir. {% endnote %} {% cut "Düzenlenebilir CSS sınıfları" %} - `.ymab-integration-popup-body` – açılır pencerenin sayfaya göre boyutu ve ilk konumu için stiller. - `.ymab-integration-popup-close` – **×** (**Kapat**) düğmesi stilleri. - `.ymab-integration-popup-title` – başlık stilleri. - `.ymab-integration-popup-text` – başlığın altındaki metnin stilleri. - `.ymab-integration-popup-link` – bağlantı stilleri. **Örnek: CSS aracılığıyla görsel ekleme** Widget türü **''Kenarda banner''**’de ana metinden sonra bir görsel eklemek için aşağıda verilen CSS kod örneğini kullanın. Bunun için `::after` sınıfının `.ymab-integration-popup-body` sözde öğesi kullanılır. **Kod**: ```css .ymab-integration-popup-body::after { content: ""; display: block; width: 135px; height: 150px; background-image: url('https://avatars.mds.yandex.net/get-lpc/1220100/7b110c0f-1d2c-4330-8dd2-ca4de3e8acb5/orig'); background-size: cover; background-position: center; margin-top: 1em; justify-self: center; } ``` **Sonuç**: ![Köşede banner](../../_assets/integration-popup-image-css.png =400x) {% endcut %} 1. Widget'ın sitenizde yerleşimini ön görüntülemek için **Deney kontrolü** penceresini kullanın. 1. **Kaydet ve çalıştır** düğmesine basın. - Köşede banner (sınırlı özelleştirme) Sayfanın köşesinde küçük bir pencere. İçeriğe müdahale etmez ve her türlü site düzenine uyar. [Genişletilmiş sürüme](https://yandex.com/support/varioqub/tr/paid-functionality.md) sahip köşede banner’ın aksine, stilleri, sayfa kenarı mesafelerini veya `z-index` özelliğinin değerini değiştirmenize izin vermiyor. {% cut "Köşede banner örneği (sınırlı özelleştirme)" %} ![Köşede banner (sınırlı özelleştirme)](../../_assets/integration-popup.png =800x) {% endcut %} 1. Metin veya biçimlendirme için birkaç seçeneği kontrol etmeniz gerekiyorsa, **Seçenek Ekle** düğmesine basın. Ayar için başka bir deneysel seçenek oluşacaktır. Seçenekler deney sırasında birbirinin yerini alacaklar. 1. Her seçenek için açılır listeden widget türü seçin. 1. Ayarları belirtin: - **Konum**: Widget'ın site sayfasındaki konumu. Kullanılabilir seçenekler: **Sol üstte**, **Sağ üstte**, **Sol altta** ve **Sağ altta**. - **Renk Teması**: Widget'ın, koyu veya açık olmak üzere, renk türü seçeneği. Web sitenizin renk şemasına göre seçim yapın. - **Başlık**: Widget'ın başlık metni. Başlık, widget'in diğer öğelerine göre daha büyük bir yazı tipi ile yazılır. Boyutunu yalnızca [Varioqub’un genişletilmiş sürümünde](https://yandex.com/support/varioqub/tr/paid-functionality.md) ayarlayabilirsiniz. - **Metin**: Widget'ın ana metnidir. Başlığın altında yer alır ve widget'ın özünü açıklar. - **Bağlantı adı**: Üzerine tıkladığınızda başka bir sayfaya geçeceğiniz bağlantının metni. - **Bağlantı adresi**: Bağlantılara tıklandığında geçişin yapılacağı sayfanın URL adresi. - **Kapanıştan sonra yeniden görüntüleme zaman aşımı (gün)**: Kullanıcının widget'ı kapatması durumunda widget'ın yeniden görüntüleneceği gün cinsinden süre. 1. Widget'ın sitenizde yerleşimini ön görüntülemek için **Deney kontrolü** penceresini kullanın. 1. **Kaydet ve çalıştır** düğmesine basın. - Ekran genişliğince banner {% note info %} Sadece [Varioqub’un genişletilmiş versiyonunda](https://yandex.com/support/varioqub/tr/paid-functionality.md) mevcuttur. {% endnote %} Animasyonlu açılır pencere. Ekranın üst veya alt kısmına yerleştirilebilir. Kullanıcının dikkatini düğmeye çekmek için **Pulse** efektini kullanın. {% cut "Ekran genişliğince banner örneği" %} ![Ekran genişliğince banner](../../_assets/integration-banner.png =800x) {% endcut %} 1. Metin veya biçimlendirme için birkaç seçeneği kontrol etmeniz gerekiyorsa, **Seçenek Ekle** düğmesine basın. Ayar için başka bir deneysel seçenek oluşacaktır. Seçenekler deney sırasında birbirinin yerini alacaklar. 1. Her seçenek için açılır listeden widget türü seçin. 1. Ayarları belirtin: - **Konum**: Widget'ın site sayfasındaki konumu. Kullanılabilir seçenekler: **Ekranın üst kısmında**, **Ekranın alt kısmında**. - **Renk Teması**: Widget'ın, koyu veya açık olmak üzere, renk türü seçeneği. Web sitenizin renk şemasına göre seçim yapın. - **Başlık**: Widget'ın başlık metni. Varsayılan olarak başlık, widget'ın diğer öğelerine göre daha büyük bir yazı tipi ile yazılır. Boyutunu ayarlamak için **Manuel Stil Ayarlaması’nı** kullanın. - **Metin**: Widget'ın ana metnidir. Başlığın altında yer alır ve widget'ın özünü açıklar. - **Bağlantı adı** – üzerine tıkladığınızda başka bir sayfaya geçeceğiniz düğmenin metni. - **Bağlantı adresi** – düğmeye tıklandığında giçişin yapılacağı sayfanın URL adresi. - **Dikkat çekmek için düğme efekti**: Bağlantı içeren düğme animasyonu. Mevcut seçenekler: **Efektsiz**, **Pulse**. - **Animasyon hızı**: Widget görüntüleme animasyonunun hızı. Mevcut seçenekler: **Hızlı**, **Orta**, **Yavaş** ve **Animasyon yok**. - **Banner görüntüleme zamanlayıcısı (saniye)**: Sayfa yüklendikten sonra widget'in gösterileceği ana kadar saniye cinsinden zaman. - **Kapanıştan sonra yeniden görüntüleme zaman aşımı (gün)**: Kullanıcının widget'ı kapatması durumunda widget'ın yeniden görüntüleneceği gün cinsinden süre. - **z-index CSS özelliğinin değeri**: Sayfadaki diğer katmanlara göre widget'ın konumunu belirler. Sayfa düzeni öğelerinden bazılarında kendi `z-index` özelliği belirtilmişse ve bu değer widget'ın varsayılan değerinden büyükse, widget bu öğe tarafından örtülecektir. Bu durumda, widget'ın tüm öğelerin üstünde olması için `z-index` değerini artırın. - **Manuel stil ayarlaması**: Stilleri manuel olarak ayarlamak, widget'ı sitenizin tarzına uygun hale getirmenizi sağlar. Böyle bir widget genel stilden ayrılmaz ve daha uyumlu görünür. {% note alert %} Stil düzenlemesi için yalnızca aşağıda sunulan CSS sınıfları kullanılabilir. Diğer stillerin değiştirilmesi, tüm sayfanın görünümünü değiştirebilir. Bu ayarları değiştirmek için CSS bilgisi gereklidir. {% endnote %} {% cut "Düzenlenebilir CSS sınıfları" %} - `.ymab-integration-banner-body` – banner’ın boyut stilleri ve sayfaya ilk konum stilleri. - `.ymab-integration-banner-body-visible` – göründükten sonra, sayfaya göre banner konumunun stili. - `.ymab-integration-banner-main` – banner’ın iç kısmının temel stilleri. - `.ymab-integration-banner-text-block` – banner metin bloğunun genel stilleri (başlık ve başlığın altındaki metin). - `.ymab-integration-banner-title` – başlık stilleri. - `.ymab-integration-banner-text` – başlığın altındaki metnin stilleri. - `.ymab-integration-banner-button-block` – banner düğme bloğunun genel stilleri (bağlantı içeren düğmeler ve **Kapat** düğmeleri). - `.ymab-integration-banner-button-link` – bağlantı içeren düğme stilleri. - `.ymab-integration-banner-close` – **Kapat** düğmesinin stilleri. **Örnek: CSS aracılığıyla görsel ekleme** **''Ekran genişliğinde banner''** tipi widget’te ana metinden sonra bir görüntü eklemek için aşağıda verilen CSS kod örneğini kullanın. Bunun için `::after` sınıfının `.ymab-integration-banner-title` sözde öğesi kullanılır. **Kod**: ```css .ymab-integration-banner-title::after { content: ""; display: block; width: 70px; height: 80px; position: absolute; right: 0; top: 0; background-image: url('https://avatars.mds.yandex.net/get-lpc/1220100/7b110c0f-1d2c-4330-8dd2-ca4de3e8acb5/orig'); background-size: cover; background-position: center; justify-self: center; } .ymab-integration-banner-text-block{ position: relative; } ``` **Sonuç**: ![Ekran genişliğince banner](../../_assets/integration-banner-css.png =800x) {% endcut %} 1. Widget'ın sitenizde yerleşimini ön görüntülemek için **Deney kontrolü** penceresini kullanın. 1. **Kaydet ve çalıştır** düğmesine basın. - Tam sayfa banner {% note info %} Sadece [Varioqub’un genişletilmiş versiyonunda](https://yandex.com/support/varioqub/tr/paid-functionality.md) mevcuttur. {% endnote %} Sitedeki en belirgin tam sayfa widget'i. Böyle bir banner, bağlantıya tıklamak veya pencereyi kapatmak zorunda kalacak olan kullanıcı tarafından kesinlikle fark edilecektir. {% cut "Tam sayfa banner örneği" %} ![Tam sayfa banner](../../_assets/integration-fullscreen.png =800x) {% endcut %} 1. Metin veya biçimlendirme için birkaç seçeneği kontrol etmeniz gerekiyorsa, **Seçenek Ekle** düğmesine basın. Ayar için başka bir deneysel seçenek oluşacaktır. Seçenekler deney sırasında birbirinin yerini alacaklar. 1. Her seçenek için açılır listeden widget türü seçin. 1. Ayarları belirtin: - **Renk Teması**: Widget'ın, koyu veya açık olmak üzere, renk türü seçeneği. Web sitenizin renk şemasına göre seçim yapın. - **Başlık**: Widget'ın başlık metni. Varsayılan olarak başlık, widget'ın diğer öğelerine göre daha büyük bir yazı tipi ile yazılır. Boyutunu ayarlamak için **Manuel Stil Ayarlaması’nı** kullanın. - **Metin**: Widget'ın ana metnidir. Başlığın altında yer alır ve widget'ın özünü açıklar. - **Bağlantı adı** – üzerine tıkladığınızda başka bir sayfaya geçeceğiniz düğmenin metni. - **Bağlantı adresi** – düğmeye tıklandığında giçişin yapılacağı sayfanın URL adresi. - **Animasyon hızı**: Widget görüntüleme animasyonunun hızı. Mevcut seçenekler: **Hızlı**, **Orta**, **Yavaş** ve **Animasyon yok**. - **Kapanıştan sonra yeniden görüntüleme zaman aşımı (gün)**: Kullanıcının widget'ı kapatması durumunda widget'ın yeniden görüntüleneceği gün cinsinden süre. - **z-index CSS özelliğinin değeri**: Sayfadaki diğer katmanlara göre widget'ın konumunu belirler. Sayfa düzeni öğelerinden bazılarında kendi `z-index` özelliği belirtilmişse ve bu değer widget'ın varsayılan değerinden büyükse, widget bu öğe tarafından örtülecektir. Bu durumda, widget'ın tüm öğelerin üstünde olması için `z-index` değerini artırın. - **Manuel stil ayarlaması**: Stilleri manuel olarak ayarlamak, widget'ı sitenizin tarzına uygun hale getirmenizi sağlar. Böyle bir widget genel stilden ayrılmaz ve daha uyumlu görünür. {% note alert %} Stil düzenlemesi için yalnızca aşağıda sunulan CSS sınıfları kullanılabilir. Diğer stillerin değiştirilmesi, tüm sayfanın görünümünü değiştirebilir. Bu ayarları değiştirmek için CSS bilgisi gereklidir. {% endnote %} {% cut "Düzenlenebilir CSS sınıfları" %} - `.ymab-integration-fullscreen-body` – tam ekran widget'ının sayfaya göre boyutu ve ilk konumu stilleri. - `.ymab-integration-fullscreen-main` – tam ekran widget'ının iç kısmının ana stilleri. - `.ymab-integration-fullscreen-main-visible` – tam ekran widget'ının göründükten sonra sayfaya göre konumunun stili. - `.ymab-integration-fullscreen-close` – **×** (**Kapat**) düğme stilleri. - `.ymab-integration-fullscreen-block` – banner metin bloğu (başlık ve başlığın altındaki metin) ve bağlantı içeren düğme için ortak stiller. - `.ymab-integration-fullscreen-title` – başlık stilleri. - `.ymab-integration-fullscreen-text` – başlığın altındaki metnin stilleri. - `.ymab-integration-fullscreen-button-link` – bağlantı içeren düğmenin stilleri. **Örnek: CSS aracılığıyla görsel ekleme** Widget türü **''Tam sayfa banner''**’de ana metnin ardından bir görsel eklemek için aşağıda verilen CSS kod örneğini kullanın. Bunun için `::after` sınıfının `.ymab-integration-fullscreen-text` sözde öğesi kullanılır. **Kod**: ```css .ymab-integration-fullscreen-text::after { content: ""; display: block; width: 110px; height: 120px; background-image: url('https://avatars.mds.yandex.net/get-lpc/1220100/7b110c0f-1d2c-4330-8dd2-ca4de3e8acb5/orig'); background-size: cover; background-position: center; margin-top: 1em; justify-self: center; } ``` **Sonuç**: ![Tam sayfa banner](../../_assets/integration-fullscreen-css.png =800x) {% endcut %} 1. Widget'ın sitenizde yerleşimini ön görüntülemek için **Deney kontrolü** penceresini kullanın. 1. **Kaydet ve çalıştır** düğmesine basın. {% endlist %} ## Sorular ve sorunlar [Bir deney oluştururken tüm alanlar kilitlenmiştir.](https://yandex.com/support/varioqub/tr/faq.md#fields-blocked) [Varioqub arayüzünde gerekli koşullar mevcut değilse ne olur?](https://yandex.com/support/varioqub/tr/faq.md#custom-condition) [Tüm site veya sayfadaki deney türünü nasıl devre dışı bırakabilirim?](https://yandex.com/support/varioqub/tr/faq.md#disable-experiment-type)
Destek Ekibi'ne yaz