Als iframe einbetten
Bette dein Voting Board direkt in dein Produkt mittels iframe-Code ein. Benutzer können auf das Board zugreifen, ohne deine Anwendung zu verlassen.
Das folgende Beispiel zeigt ein in eine Seite eingebettetes Ducalis Voting Board, das in einem Frame geöffnet ist.
Board einbetten
-
Wähle das Voting Board aus und stelle sicher, dass es veröffentlicht ist.
-
Gehe zu Voting settings (Voting-Einstellungen) → Embed (Einbetten) → Embed The Whole Board (Gesamtes Board einbetten).
-
Kopiere den Widget Base Code.
-
Füge das
embedBoard-Objekt zum Widget-Code hinzu (erforderlich für die Einbettung).
Dein endgültiger Code sollte so aussehen:
dclsPxl("initWidget", {
// Erforderlich
appId: "dc9ae89*******",
boardId: "78aef2c7c0********",
user: {
// Erforderlich
email: "Your user Email",
hash: "User hash",
// Optional
userID: "Your user ID",
name: "Your user Name",
avatar: "https://you-user-avatar-domain/avatar.png",
company: {
id: 123,
name: "Your user Company name",
customFields: {
created_at: "2019-06-02 17:10:00",
spend: 123000,
mrr: 100,
plan: "pro",
prop: value,
}
}
},
// Erforderlich für Voting-Board-Einbettung
embedBoard: {
selector: "#selector-where-show-iframe", // CSS-Selektor, wo das Voting Board gerendert werden soll
style: undefined, // Optional, iframe-Styles-Objekt, z.B. "style: {position: 'absolute', top: 0}"
},
});
Standardseite festlegen
Wähle, ob die Roadmap- oder Changelog-Seite zuerst geöffnet wird, wenn Benutzer das Widget laden.
Konfiguriere defaultView im Code. Setze es auf roadmap oder changelog:
dclsPxl("initWidget", {
// Optional, Standard ist undefined
// Verwende 'roadmap' oder 'changelog', um eine bestimmte Seite zu öffnen
defaultView: undefined,
});
Für die Changelog- und Roadmap-Seiten kannst du optional einen bestimmten Filter oder eine Aktion öffnen (nur für autorisierte Benutzer):
dclsPxl("initWidget", {
// Optional
// Verwende, um einen bestimmten Filter zu öffnen (nur für autorisierte Benutzer)
openNewIdea: true,
myIdeas: true,
myVotes: true,
});
Benachrichtigungsbubble hinzufügen
Zeige Benachrichtigungsbadges an, um Benutzer über neue Updates und Releases zu informieren.
Füge das bubble-Objekt zum Widget-Code hinzu:
dclsPxl("initWidget", {
bubble: {
// Optional, Standard ist ".Ducalis-changelog-widget"
// Verwende für Bubble ohne Widget
selector: '#embedBoardBuble',
// Optional, Standard ist undefined
// Entfernt anfängliche Styles. Verwende für benutzerdefinierte Styles NUR per className.
className: 'some-class-name',
// Optional, Standard ist undefined
// Passt anfängliche Styles an.
style: {
right: '7px',
top: '7px',
backgroundColor: '#db3737',
borderRadius: '4px',
fontSize: '13px',
}
},
});
Hintergrund anpassen
Passe das Board an deine Benutzeroberfläche und Marke an, indem du einen transparenten Hintergrund hinzufügst:
embedBoard: {
// Optional, Standard ist false
// Macht iframe und Board-Hintergrund transparent
transparent: true,
}
Benutzerdefinierte CSS-Klasse hinzufügen
Füge einen benutzerdefinierten Klassennamen zur Benachrichtigungsbubble ohne Standardstyles hinzu. Du kannst die Benachrichtigungsbubble mit deinem CSS anpassen.
Verwende bubble.className, um deine Klasse anzugeben:
bubble: {
// Optional, entfernt anfängliche Styles
// Verwende für benutzerdefinierte Styles NUR per className. Standard ist undefined
className: 'some-class-name',
}
Der Parameter bubbleClassName funktioniert noch, wird aber veraltet sein. Verwende stattdessen bubble.className.
Auto-Abonnement für Release Notes
Das Auto-Abonnement für Release Notes ist standardmäßig aktiviert. Dies verhindert die Notwendigkeit, ständig neue aktive Benutzer zu importieren.
Benutzer werden automatisch abonniert, wenn:
- Du Benutzerdaten über das Widget an Ducalis sendest (
user.emailunduser.hashsind erforderlich). - Der Benutzer das Widget oder den Board-Frame öffnet.
Um Release Notes an abonnierte Benutzer zu senden, richte eine benutzerdefinierte E-Mail-Domain ein.
