Widget'ı yerleştirin

Ducalis widget'ı, kullanıcıları yeni özellikler hakkında doğrudan ürününüzde bilgilendirir. Oylama Panonuzla etkileşimi artırmak için widget'ı yerleştirin.

Changelog widget ve bildirimler

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

Canlı demo: https://hi.ducalis.io/ adresini ziyaret edin ve başlık menüsünden What's New (Yenilikler) seçeneğine tıklayın.

Herhangi bir yere yerleştirin

Widget'ı istediğiniz sayfaya yerleştirin. Kullanıcılar tanımlanmışsa, tüm alt alan adlarında kişisel bildirimler göreceklerdir. Örneğin, bir kullanıcı duyuru okuyup başka bir sayfaya gittiğinde, bir sonraki sürüme kadar kırmızı balon tekrar görünmez.

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

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

Widget'ı kurun

Changelog widget'ı iki bölümden oluşur:

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

uyarı

Oylama Panonuz erişim kısıtlamaları olan özel bir pano ise, kullanıcı kimliklerini widget'a aktarmanız 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'ını Ekle) seçeneğine tıklayın.

2. Temel widget kodunu yükleyin

Widget'ı göstermek istediğiniz sayfaların alt kısmına şu 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", // Required
    boardId: "_YOUR_BOARD_ID", // Required
  });
</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 elemente CSS sınıfı ekleyin:

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

Açılış sayfamızdan örnek:

4. Temel yapılandırmadaki widget özellikleri

Bu temel kurulum şunları sağlar:

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

Oylama Panosu abonelerini Oylama Panosu ayarlarının altında bulabilirsiniz.

Widget seçeneklerini yapılandırın

Varsayılan sayfa

Widget'ınızda Roadmap (Yol Haritası) veya Changelog sayfalarından hangisinin ilk açılacağını seçin.

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

dclsPxl("initWidget", {
  ...
    // optional, default state is undefined
    // Use 'roadmap' or 'changelog' to open specific page
    defaultView: undefined,
  ...
});

Changelog ve Roadmap sayfaları için isteğe bağlı olarak belirli bir filtre veya işlem açabilirsiniz (yalnızca yetkili kullanıcılar için):

dclsPxl("initWidget", {
   ...

   // optional,
   // use it to open a specific filter (only for authorized users)
   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, Fikir 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, bunu kodda belirtin: onAuth: showUserAuth

dclsPxl("initWidget", {
    appId: "_YOUR_APP_ID", // Required
    boardId: "_YOUR_BOARD_ID", // Required
    ...
    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ı aktarmanız gerekir: user.email + user.hash gereklidir.

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

    user: {
        // required
        email: "Your user Email",
        hash: "User hash",
        ...
     },
     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", // Required
    boardId: "_YOUR_BOARD_ID", // Required
    selector: "_YOUR_SELECTOR", // optional - default .Ducalis-changelog-widget
    width: "400", // optional, Widget width (minimal width 400px)
    debug: true, // optional - Always show Notification bubble and logs for events

    bubble: {
      selector: '#embedBoardBuble', // optional - use it for bubble without widget, default ".Ducalis-changelog-widget"
      className: 'some-class-name', // optional - clear initial styles. Usage for custom styles by className ONLY. Default undefined
      style: { // optional, customization initial styles. Default undefined
	right: '7px',
	top: '7px',
	backgroundColor: '#db3737',
	borderRadius: '4px',
	fontSize: '13px',
       }
     },
   });
 </script>

Yeni bubble parametresine geçiş yapın

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: {
    ...
    // optional, default state is undefined
    // customization initial styles
    style: {
	right: '7px',
	top: '7px',
	backgroundColor: '#db3737',
	borderRadius: '4px',
	fontSize: '13px',
    }
    ...
}

Hata ayıklama 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 hata ayıklama modunu kullanın.

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

Bildirim baloncuğunu herhangi bir elemente ekleyin

selector: "_YOUR_SELECTOR"

Ducalis widget'ını tetiklemek için bir element seçin veya oluşturun. Selector parametresi için o elementin ID'sini veya benzersiz sınıfını kullanın.

ipucu

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

Widget selector parametreniz için şunları kullanabilirsiniz:

• ID: #DucalisChangelogNotification, #someID, …
• Sınıf: .DucalisChangelogNotification, .someClass, .some-class, …
• Özellik: [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", // Notification bubble Background color

color: "#fee4e2", // Notification bubble text color

Bildirim baloncuğu konumu

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

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

top: "-10px", // Notification bubble position by top

right: "-10px", // Notification bubble position by right

Widget genişliği

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

width: "376px", // optional, Widget width

Özel CSS sınıfı

Yalnızca gelişmiş kullanım için. Bildirim baloncuğuna bizim tarafımızdan stil olmadan özel bir sınıf adı ekler. Bildirim baloncuğunu kendi CSS'inizle özelleştirebilirsiniz.

bubble.className: "_SOME_CLASS_NAME"

bubble: {
    ...
    // optional - clear initial styles.
    // Usage for custom styles by className ONLY. Default 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. Kullanıcı verilerini Ducalis API veya Widget üzerinden Ducalis'e gönderirsiniz (user.email + user.hash gereklidir).

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

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

uyarı

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

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

    user: {
        // required
        email: "Your user Email",
        hash: "User hash",
        ...
    },

     // Auto subscribe current user on current board (needed user.email + user.hash)
    autoSubscribe: true,  // optional, default: true
});

Yukarıdaki koşulları sağ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