Widget'ı yerleştirin

Ducalis widget'ı, kullanıcıları yeni özelliklerle ilgili doğrudan ürününüzde bilgilendirir. Oylama Panonuz ile etkileşimi artırmak için yerleştirin.

Changelog widget'ı ve bildirimler

Widget'ı yerleştirdiğinizde, kullanıcılar yeni özelliklerle ilgili ürün içi bildirimler alır. Fikirleri Done (Tamamlandı) durumuna taşıdığınızda, widget güncellemeleri kırmızı bildirim baloncuğuyla birlikte görüntüler.

Canlı demo: https://hi.ducalis.io/ adresini ziyaret edin ve üst menüdeki What's New (Yenilikler) düğmesine tıklayın.

Her yere yerleştirin

Widget'ı herhangi bir sayfaya yerleştirin. Kullanıcılar tanımlanmışsa, tüm alt alanlarda kişisel bildirimler görürler. Örneğin, bir kullanıcı bir duyuruyu okuduğunda ve başka bir sayfaya gittiğinde, kırmızı balon bir sonraki sürüme kadar tekrar görünmez.

Ducalis olarak, widget'ı şu sayfalara yerleştiriyoruz:

• Pazarlama web sitesi: https://hi.ducalis.io/
• Yardım portalı: /knowledge-base/
• Ürün: hi.ducalis.io

Widget'ı ayarlayın

Changelog widget'ının iki bölümü vardır:

• Widget'ı yükleyen temel widget JavaScript kodu
• Widget'ı açmak için bir düğme

uyarı

Oylama Panonuz erişim kısıtlamalarıyla özel ise, widget'a kullanıcı kimliklerini iletmeniz gerekir. Aksi takdirde, kimse erişemez.

1. Oylama Panosu ayarlarını açın

1. Oylama Panosu ayarlarına gidin.

2. Embed (Yerleştir) bölümünü bulun.

3. Add 'What's New' Widget ('Yenilikler' Widget'ı Ekle) düğmesine tıklayın.

2. Temel widget kodunu kurun

Widget'ı göstermek istediğiniz sayfaların alt kısmına bu kodu ekleyin.

<!-- hi.ducalis.io Changelog Widget -->
<script>
  !function(b,c,f,d,a,e){b.dclsPxl||(((d=b.dclsPxl=function(){d.callMethod?d.callMethod.apply(d,arguments):d.queue.push(arguments)}).push=d).queue=[],(a=c.createElement("script")).async=!0,a.src=f,(e=c.getElementsByTagName("script")[0]).parentNode.insertBefore(a,e))}(window,document,"https://hi.ducalis.io/js/widget.js")
  dclsPxl("initWidget", {
    appId: "_YOUR_APP_ID", // Gerekli
    boardId: "_YOUR_BOARD_ID", // Gerekli
  });
</script>
<!-- End hi.ducalis.io Changelog Widget -->

3. Widget düğmesi oluşturun

Widget'ı açan ve bildirimleri gösteren bir düğme oluşturmak için herhangi bir öğeye CSS sınıfı ekleyin:

<div class="Ducalis-changelog-widget">Yenilikler</div>

Landing sayfamızdan örnek:

4. Temel yapılandırmadaki widget özellikleri

Bu temel kurulum şunları sağlar:

• Widget, yayın tarihine göre sıralanmış en son Done (Tamamlandı) durumundaki Fikirleri görüntüler
• Yeni yayınlanan özellikler için bildirim baloncuğu (Done durumuna taşınan Fikirler)
• Ziyaretçiler yayınlanan 20 Fikre kadar okuyabilir
• Yol haritasını kontrol etmek, Fikirler eklemek, oy vermek ve yorum yapmak için Oylama Panosuna bağlantı
• Yol haritası haftalık özet güncellemeleri için e-posta yakalama

Oylama Panosu abonelerini Oylama Panosu ayarlarında bulun.

Widget seçeneklerini yapılandırın

Varsayılan sayfa

Widget'ınızda Roadmap (Yol Haritası) veya Changelog (Değişiklik Günlüğü) sayfasının ilk olarak açılıp açılmayacağını seçin.

Sayfayı belirtmek için koddaki defaultView öğesini yapılandırın. roadmap veya changelog kullanın:

dclsPxl("initWidget", {
  ...
    // isteğe bağlı, varsayılan durum undefined'dır
    // Belirli bir sayfayı açmak için 'roadmap' veya 'changelog' kullanın
    defaultView: undefined,
  ...
});

Changelog (Değişiklik Günlüğü) ve Roadmap (Yol Haritası) sayfaları için, isteğe bağlı olarak belirli bir filtreyi veya eylemi açabilirsiniz (yalnızca yetkili kullanıcılar):

dclsPxl("initWidget", {
   ...

   // isteğe bağlı,
   // belirli bir filtreyi açmak için kullanın (yalnızca yetkili kullanıcılar için)
   openNewIdea: true,
   myIdeas: true,
   myVotes: true,

   ...
});

Kimlik doğrulama yöntemi

Ducalis kimlik doğrulaması ile kendi kimlik doğrulama yönteminiz arasında seçim yapın.

Seçenek 1: Ducalis kimlik doğrulamasını kullanın (varsayılan)

Varsayılan olarak, müşteriler oy vermek, Fikirler eklemek veya yorum yapmak istediğinde Ducalis kimlik doğrulaması kullanılır.

Seçenek 2: Kendi kimlik doğrulamanızı kullanın

Kendi kimlik doğrulamanızı kullanıyorsanız, kodda belirtin: onAuth: showUserAuth

dclsPxl("initWidget", {
    appId: "_YOUR_APP_ID", // Gerekli
    boardId: "_YOUR_BOARD_ID", // Gerekli
    ...
    onAuth: showUserAuth
    ...
});

Bu fonksiyon belirtildiğinde, Ducalis kimlik doğrulamasının yerini alır. Tüm kimlik doğrulama sürecini siz yönetirsiniz, ancak kimliği doğrulanmış widget kullanıcısını iletmeniz gerekir: user.email + user.hash gereklidir.

dclsPxl("initWidget", {
    // gerekli
    appId: "dc9ae89*******",
    boardId: "78aef2c7c0********",

    user: {
        // gerekli
        email: "Kullanıcı E-postanız",
        hash: "Kullanıcı hash'i",
        ...
     },
     onAuth: showUserAuth
    ...
});

Widget görünümünü özelleştirin

Ducalis Changelog Widget'ını yerleştirdikten sonra, ürününüze uyacak şekilde özelleştirin.

Kodunuza şu parametreleri ekleyin:

<script>
  !function(b,c,f,d,a,e){b.dclsPxl||(((d=b.dclsPxl=function(){d.callMethod?d.callMethod.apply(d,arguments):d.queue.push(arguments)}).push=d).queue=[],(a=c.createElement("script")).async=!0,a.src=f,(e=c.getElementsByTagName("script")[0]).parentNode.insertBefore(a,e))}(window,document,"https://hi.ducalis.io/js/widget.js")
  dclsPxl("initWidget", {
    appId: "_YOUR_APP_ID", // Gerekli
    boardId: "_YOUR_BOARD_ID", // Gerekli
    selector: "_YOUR_SELECTOR", // isteğe bağlı - varsayılan .Ducalis-changelog-widget
    width: "400", // isteğe bağlı, Widget genişliği (minimum genişlik 400px)
    debug: true, // isteğe bağlı - Bildirim baloncuğunu ve olaylar için logları her zaman göster

    bubble: {
      selector: '#embedBoardBuble', // isteğe bağlı - widget olmadan balon için kullanın, varsayılan ".Ducalis-changelog-widget"
      className: 'some-class-name', // isteğe bağlı - başlangıç stillerini temizle. YALNIZCA className ile özel stiller için kullanım. Varsayılan undefined
      style: { // isteğe bağlı, başlangıç stillerini özelleştirme. Varsayılan undefined
	right: '7px',
	top: '7px',
	backgroundColor: '#db3737',
	borderRadius: '4px',
	fontSize: '13px',
       }
     },
   });
 </script>

Yeni bubble parametresine geçiş

bilgi

top, right, backgroundColor ve color parametreleri kullanımdan kaldırılmıştır. Bunun yerine bubble.style kullanın.

Yeni bubble.style parametresini ekleyin:

bubble: {
    ...
    // isteğe bağlı, varsayılan durum undefined'dır
    // başlangıç stillerini özelleştirme
    style: {
	right: '7px',
	top: '7px',
	backgroundColor: '#db3737',
	borderRadius: '4px',
	fontSize: '13px',
    }
    ...
}

Debug modu

debug: true,

Widget'ı açtığınızda, tüm güncellemeleri okundu olarak işaretler ve kırmızı balon kaybolur. Daha iyi düzen testi için debug modunu kullanın.

Widget'ı kapattığınızda ve yeniden açtığınızda her zaman kırmızı bir bildirim dairesi gösterir. Bu, doğru konumu test etmenize yardımcı olur.

Bildirim baloncuğunu herhangi bir öğeye ekleyin

selector: "_YOUR_SELECTOR"

Ducalis widget'ını tetiklemek için bir öğe seçin veya oluşturun. Bu öğenin ID'sini veya benzersiz sınıfını selector parametresi için kullanın.

ipucu

Selector bir sınıfsa (ID değil), nokta ile başlatın. openWidget sınıfı için, selector'ünüz .openWidget'tır.

Widget selector'ünüz için şunları kullanabilirsiniz:

• ID: #DucalisChangelogNotification, #someID, …
• Sınıf: .DucalisChangelogNotification, .someClass, .some-class, …
• Öznitelik: [data-bubble="1"], [data-whats-new], …
• Karışık: div.someClass[data-show-bubble="true"], a[href^="https://feedback.ducalis.io"], …

Bildirim renkleri

Renkleri ürününüze uyacak şekilde ayarlayın. Varsayılan renkler:

backgroundColor: "#f04438", // Bildirim baloncuğu Arka plan rengi

color: "#fee4e2", // Bildirim baloncuğu metin rengi

Bildirim baloncuğu konumu

Varsayılan olarak, bildirim baloncuğu selector'e bağlı öğeye göre konumlandırılır.

Bildirim baloncuğu konumunu beğenmediyseniz, tarayıcı geliştirici aracında ayarlayın ve widget ayarlarına ekleyin:

top: "-10px", // Bildirim baloncuğu üstten konumu

right: "-10px", // Bildirim baloncuğu sağdan konumu

Widget genişliği

Varsayılan olarak, widget genişliği 376px'dir. Değiştirebilirsiniz:

width: "376px", // isteğe bağlı, Widget genişliği

Özel CSS sınıfı

Yalnızca ileri düzey kullanım için. Bizim tarafımızdan stiller olmadan bildirim baloncuğuna özel bir sınıf adı ekler. Bildirim baloncuğunu kendi CSS'inizle özelleştirebilirsiniz.

bubble.className: "_SOME_CLASS_NAME"

bubble: {
    ...
    // isteğe bağlı - başlangıç stillerini temizle.
    // YALNIZCA className ile özel stiller için kullanım. Varsayılan undefined
    className: 'some-class-name',
    ...
}

bilgi

bubbleClassName parametresi kullanımdan kaldırılmıştır. Bunun yerine bubble.className kullanın.

Kullanıcıları sürüm notlarına abone edin

Oylama Panolarının en kullanışlı özelliklerinden biri otomatik sürüm notlarıdır.

Oylama Panosu ayrı bir uygulama olduğundan, yeni aktif kullanıcı listelerini sürekli içe aktarmaktan kaçınmak için sürüm notlarına otomatik abonelik varsayılan olarak etkindir.

Kullanıcılar şu durumlarda otomatik olarak abone edilir:

1. Ducalis API veya Widget aracılığıyla kullanıcı verilerini Ducalis'e gönderirsiniz (user.email + user.hash gereklidir).

2. Kullanıcı widget'ı veya pano çerçevesini açar.

Bu koşullar karşılandığında, kullanıcılar sürüm notlarına otomatik olarak abone edilir.

uyarı

Kullanıcıların sürüm notu güncellemeleri alması için, özel bir e-posta alan adı ayarlayın.

dclsPxl("initWidget", {
    // gerekli
    appId: "dc9ae89*******",
    boardId: "78aef2c7c0********",

    user: {
        // gerekli
        email: "Kullanıcı E-postanız",
        hash: "Kullanıcı hash'i",
        ...
    },

     // Mevcut kullanıcıyı mevcut panoya otomatik abone et (user.email + user.hash gerekli)
    autoSubscribe: true,  // isteğe bağlı, varsayılan: true
});

Yukarıdaki koşulları karşılıyorsanız ancak kullanıcıları otomatik olarak abone etmeniz gerekmiyorsa, autoSubscribe: false olarak değiştirin.

İlgili makaleler

• Ducalis API
• Çoklu oturum açma (SSO)
• Kendi alan adınızdan sürüm notları gönderin