Widget einbetten

Das Ducalis-Widget informiert Nutzende direkt in deinem Produkt über neue Features. Bette es ein, um das Engagement mit deinem Voting Board zu erhöhen.

Wenn du das Widget einbettest, erhalten Nutzende In-Produkt-Benachrichtigungen über neue Features. Wenn du Ideen in den Done-Status verschiebst, zeigt das Widget Updates mit einer roten Benachrichtigungsblase an.

Live-Demo: Besuche https://hi.ducalis.io/ und klicke auf What's New (Was gibt's Neues) im Header-Menü.

Überall einbetten

Bette das Widget auf jeder Seite ein. Wenn Nutzende identifiziert sind, sehen sie persönliche Benachrichtigungen über alle Subdomains hinweg. Wenn zum Beispiel ein Nutzer eine Ankündigung liest und zu einer anderen Seite navigiert, erscheint die rote Blase erst beim nächsten Release wieder.

Bei Ducalis betten wir das Widget ein auf:

Marketing-Website: https://hi.ducalis.io/
Hilfeportal: /knowledge-base/
Produkt: hi.ducalis.io

Das Changelog-Widget besteht aus zwei Teilen:

Basis-Widget-JavaScript-Code, der das Widget lädt
Ein Button, um das Widget zu öffnen

warnung

Wenn dein Voting Board privat mit Zugriffsbeschränkungen ist, musst du Nutzeridentitäten an das Widget übergeben. Andernfalls kann niemand darauf zugreifen.

1. Voting-Board-Einstellungen öffnen

Gehe zu den Voting-Board-Einstellungen.
Finde den Abschnitt Embed (Einbetten).
Klicke auf Add 'What's New' Widget ('Was gibt's Neues'-Widget hinzufügen).

Füge diesen Code am Ende der Seiten hinzu, auf denen du das Widget anzeigen möchtest.

<!-- 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 -->

Widget-Button mit Benachrichtigungsblase

Füge eine CSS-Klasse zu einem beliebigen Element hinzu, um einen Button zu erstellen, der das Widget öffnet und Benachrichtigungen anzeigt:

<div class="Ducalis-changelog-widget">Was gibt's Neues</div>

Beispiel von unserer Landingpage:

Diese Basis-Einrichtung bietet:

Widget zeigt die neuesten Ideen im Done-Status, sortiert nach Release-Datum
Benachrichtigungsblase für neu veröffentlichte Features (Ideen in Done verschoben)
Besuchende können bis zu 20 veröffentlichte Ideen lesen
Link zum Voting Board, um Roadmap zu prüfen, Ideen hinzuzufügen, upzuvoten und zu kommentieren
E-Mail-Erfassung für wöchentliche Roadmap-Digest-Updates

Finde Voting-Board-Abonnierende in den Voting-Board-Einstellungen.

Standardseite

Wähle, ob die Roadmap- oder Changelog-Seite zuerst in deinem Widget geöffnet wird.

Um die Seite anzugeben, konfiguriere defaultView im Code. Verwende roadmap oder changelog:

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

Für Changelog- und Roadmap-Seiten kannst du optional einen bestimmten Filter oder eine Aktion öffnen (nur für autorisierte Nutzende):

dclsPxl("initWidget", {
   ...

   // optional,
   // use it to open a specific filter (only for authorized users)
   openNewIdea: true,
   myIdeas: true,
   myVotes: true,

   ...
});

Authentifizierungsmethode

Wähle zwischen Ducalis-Authentifizierung oder deiner eigenen Authentifizierungsmethode.

Option 1: Ducalis-Authentifizierung verwenden (Standard)

Standardmäßig wird Ducalis-Authentifizierung verwendet, wenn Kunden abstimmen, Ideen hinzufügen oder kommentieren möchten.

Option 2: Eigene Authentifizierung verwenden

Wenn du deine eigene Authentifizierung verwendest, gib sie im Code an: onAuth: showUserAuth

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

Wenn diese Funktion angegeben ist, ersetzt sie die Ducalis-Authentifizierung. Du verwaltest den gesamten Authentifizierungsprozess, musst aber den authentifizierten Widget-Nutzer übergeben: user.email + user.hash sind erforderlich.

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

    user: {
        // required
        email: "Your user Email",
        hash: "User hash",
        ...
     },
     onAuth: showUserAuth
    ...
});

Nachdem du das Ducalis Changelog-Widget eingebettet hast, passe es an dein Produkt an.

Füge diese Parameter zu deinem Code hinzu:

<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>

Zum neuen Bubble-Parameter migrieren

info

Die Parameter top, right, backgroundColor und color sind veraltet. Verwende stattdessen bubble.style.

Füge den neuen Parameter bubble.style hinzu:

bubble: {
    ...
    // optional, default state is undefined
    // customization initial styles
    style: {
	right: '7px',
	top: '7px',
	backgroundColor: '#db3737',
	borderRadius: '4px',
	fontSize: '13px',
    }
    ...
}

Debug-Modus

debug: true,

Wenn du das Widget öffnest, markiert es alle Updates als gelesen und die rote Blase verschwindet. Für besseres Layout-Testing verwende den Debug-Modus.

Das Widget zeigt immer einen roten Benachrichtigungskreis, wenn du es schließt und wieder öffnest. Das hilft dir, die richtige Position zu testen.

Benachrichtigungsblase an ein beliebiges Element anhängen

selector: "_YOUR_SELECTOR"

Wähle oder erstelle ein Element, um das Ducalis-Widget auszulösen. Verwende die ID oder eindeutige Klasse dieses Elements für den Selector-Parameter.

tipp

Wenn der Selector eine Klasse ist (keine ID), beginne ihn mit einem Punkt. Für die Klasse openWidget ist dein Selector .openWidget.

Für deinen Widget-selector kannst du verwenden:

ID: #DucalisChangelogNotification, #someID, …
Klasse: .DucalisChangelogNotification, .someClass, .some-class, …
Attribut: [data-bubble="1"], [data-whats-new], …
Mix: div.someClass[data-show-bubble="true"], a[href^="https://feedback.ducalis.io"], …

Benachrichtigungsfarben

Passe die Farben an dein Produkt an. Standardfarben:

backgroundColor: "#f04438", // Notification bubble Background color

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

Benachrichtigungsblase-Position

Standardmäßig wird die Benachrichtigungsblase relativ zum Element positioniert, das an den Selector angehängt ist.

Wenn dir die Position der Benachrichtigungsblase nicht gefällt, passe sie im Browser-Dev-Tool an und füge sie zu den Widget-Einstellungen hinzu:

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

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

Standardmäßig beträgt die Widget-Breite 376px. Du kannst sie ändern:

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

Benutzerdefinierte CSS-Klasse

Nur für fortgeschrittene Nutzung. Fügt der Benachrichtigungsblase einen benutzerdefinierten Klassennamen ohne Styles von unserer Seite hinzu. Du kannst die Benachrichtigungsblase mit deinem CSS anpassen.

bubble.className: "_SOME_CLASS_NAME"

bubble: {
    ...
    // optional - clear initial styles.
    // Usage for custom styles by className ONLY. Default undefined
    className: 'some-class-name',
    ...
}

info

Der Parameter bubbleClassName ist veraltet. Verwende stattdessen bubble.className.

Eines der nützlichsten Features von Voting Boards sind automatisierte Release Notes.

Da das Voting Board eine separate Anwendung ist, ist das Auto-Abonnement für Release Notes standardmäßig aktiviert, um zu vermeiden, dass ständig Listen neuer aktiver Nutzender importiert werden müssen.

Nutzende werden automatisch abonniert, wenn:

Du Nutzerdaten an Ducalis über The Ducalis API oder Widget sendest (user.email + user.hash sind erforderlich).
Nutzende das Widget oder Board-Frame öffnen.

Wenn diese Bedingungen erfüllt sind, werden Nutzende automatisch für Release Notes abonniert.

warnung

Damit Nutzende Release-Notes-Updates erhalten, richte eine benutzerdefinierte E-Mail-Domain ein.

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
});

Wenn du die obigen Bedingungen erfüllst, aber keine automatische Abonnierung von Nutzenden benötigst, ändere auf autoSubscribe: false.

Widget einbetten

Changelog-Widget und Benachrichtigungen

Überall einbetten

Widget einrichten

1. Voting-Board-Einstellungen öffnen

2. Basis-Widget-Code installieren

3. Widget-Button erstellen

4. Widget-Features in der Basiskonfiguration

Widget-Optionen konfigurieren

Standardseite

Authentifizierungsmethode

Widget-Erscheinungsbild anpassen

Zum neuen Bubble-Parameter migrieren

Debug-Modus

Benachrichtigungsblase an ein beliebiges Element anhängen

Benachrichtigungsfarben

Benachrichtigungsblase-Position

Widget-Breite

Benutzerdefinierte CSS-Klasse

Changelog-Widget und Benachrichtigungen​

Überall einbetten​

Widget einrichten​

1. Voting-Board-Einstellungen öffnen​

2. Basis-Widget-Code installieren​

3. Widget-Button erstellen​

4. Widget-Features in der Basiskonfiguration​

Widget-Optionen konfigurieren​

Standardseite​

Authentifizierungsmethode​

Widget-Erscheinungsbild anpassen​

Zum neuen Bubble-Parameter migrieren​

Debug-Modus​

Benachrichtigungsblase an ein beliebiges Element anhängen​

Benachrichtigungsfarben​

Benachrichtigungsblase-Position​

Widget-Breite​

Benutzerdefinierte CSS-Klasse​

Nutzende für Release Notes abonnieren​

Verwandte Artikel​

Changelog-Widget und Benachrichtigungen

Überall einbetten

Widget einrichten

1. Voting-Board-Einstellungen öffnen

2. Basis-Widget-Code installieren

3. Widget-Button erstellen

4. Widget-Features in der Basiskonfiguration

Widget-Optionen konfigurieren

Standardseite

Authentifizierungsmethode

Widget-Erscheinungsbild anpassen

Zum neuen Bubble-Parameter migrieren

Debug-Modus

Benachrichtigungsblase an ein beliebiges Element anhängen

Benachrichtigungsfarben

Benachrichtigungsblase-Position

Widget-Breite

Benutzerdefinierte CSS-Klasse

Nutzende für Release Notes abonnieren

Verwandte Artikel