Intégrer en iframe

Intégrez votre Tableau de votes directement dans votre produit à l'aide du code iframe. Les utilisateurs peuvent accéder au tableau sans quitter votre application.

L'exemple ci-dessous montre un Tableau de votes Ducalis intégré dans une page et ouvert dans un cadre.

Intégrer le tableau

Choisissez le Tableau de votes et vérifiez qu'il est publié.
Accédez à Voting settings (Paramètres du Tableau de votes) → Embed (Intégration) → section Embed The Whole Board (Intégrer le tableau entier).
Copiez le Widget Base Code (code de base du widget).
Ajoutez l'objet embedBoard au code du widget (requis pour l'intégration).

Votre code final devrait ressembler à ceci :

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

    user: {
        // Required
        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,
            }
        }
    },

    // Required for Voting Board embedding
    embedBoard: {
        selector: "#selector-where-show-iframe", // CSS selector where to render Voting Board
        style: undefined, // Optional, iframe styles object, e.g. "style: {position: 'absolute', top: 0}"
    },
});

Définir la page par défaut

Choisissez si la page Feuille de route ou Journal des modifications s'ouvre en premier lorsque les utilisateurs chargent le widget.

Configurez defaultView dans le code. Définissez-le sur roadmap ou changelog :

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

Pour les pages Journal des modifications et Feuille de route, vous pouvez éventuellement ouvrir un filtre ou une action spécifique (uniquement pour les utilisateurs autorisés) :

dclsPxl("initWidget", {
    // Optional
    // Use to open a specific filter (only for authorized users)
    openNewIdea: true,
    myIdeas: true,
    myVotes: true,
});

Ajouter une bulle de notification

Affichez des badges de notification pour alerter les utilisateurs des nouvelles mises à jour et versions.

Ajoutez l'objet bubble au code du widget :

dclsPxl("initWidget", {
    bubble: {
        // Optional, default is ".Ducalis-changelog-widget"
        // Use for bubble without widget
        selector: '#embedBoardBuble',

        // Optional, default is undefined
        // Clears initial styles. Use for custom styles by className ONLY.
        className: 'some-class-name',

        // Optional, default is undefined
        // Customizes initial styles.
        style: {
            right: '7px',
            top: '7px',
            backgroundColor: '#db3737',
            borderRadius: '4px',
            fontSize: '13px',
        }
    },
});

Personnaliser l'arrière-plan

Adaptez le tableau à votre interface et votre marque en ajoutant un arrière-plan transparent :

embedBoard: {
    // Optional, default is false
    // Makes iframe and board background transparent
    transparent: true,
}

Ajouter une classe CSS personnalisée

Utilisation avancée uniquement

Ajoutez un nom de classe personnalisé à la bulle de notification sans les styles par défaut. Vous pouvez personnaliser la bulle de notification avec votre CSS.

Utilisez bubble.className pour spécifier votre classe :

bubble: {
    // Optional, clears initial styles
    // Use for custom styles by className ONLY. Default is undefined
    className: 'some-class-name',
}

Paramètre obsolète

Le paramètre bubbleClassName fonctionne toujours mais sera obsolète. Utilisez bubble.className à la place.

Abonnement automatique aux notes de version

L'abonnement automatique aux notes de version est activé par défaut. Cela évite d'avoir à importer constamment de nouveaux utilisateurs actifs.

Les utilisateurs sont abonnés automatiquement lorsque :

Vous envoyez les données utilisateur à Ducalis via le Widget (user.email et user.hash sont requis).
L'utilisateur ouvre le widget ou le cadre du tableau.

Configurer le domaine de messagerie personnalisé

Pour envoyer des notes de version aux utilisateurs abonnés, configurez un domaine de messagerie personnalisé.

Paramètres du domaine de messagerie personnalisé

Intégrer le tableau​

Définir la page par défaut​

Ajouter une bulle de notification​

Personnaliser l'arrière-plan​

Ajouter une classe CSS personnalisée​

Abonnement automatique aux notes de version​

Articles connexes​