Incorporar como iframe

Incorpore o seu Voting Board diretamente no seu produto utilizando código iframe. Os utilizadores podem aceder ao quadro sem sair da sua aplicação.

O exemplo abaixo mostra um Voting Board do Ducalis incorporado numa página e aberto numa frame.

Incorporar o quadro

1. Escolha o Voting Board e verifique se está publicado.

   

2. Aceda a Voting settings (Definições do Voting) → Embed (Incorporar) → secção Embed The Whole Board (Incorporar o Quadro Completo).

   

3. Copie o Widget Base Code (Código Base do Widget).

   

4. Adicione o objeto embedBoard ao código do widget (necessário para incorporação).

   

O seu código final deve ter este aspeto:

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

Definir a página predefinida

Escolha se a página Roadmap ou Changelog abre primeiro quando os utilizadores carregam o widget.

Configure defaultView no código. Defina como roadmap ou changelog:

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

Para as páginas Changelog e Roadmap, pode opcionalmente abrir um filtro ou ação específica (apenas para utilizadores autorizados):

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

Adicionar bolha de notificação

Mostre emblemas de notificação para alertar os utilizadores sobre novas atualizações e lançamentos.

Adicione o objeto bubble ao código do 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',
        }
    },
});

Personalizar o fundo

Adeque o quadro à sua interface e marca adicionando um fundo transparente:

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

Adicionar classe CSS personalizada

Apenas uso avançado

Adicione um nome de classe personalizado à bolha de notificação sem estilos predefinidos. Pode personalizar a bolha de notificação com o seu CSS.

Utilize bubble.className para especificar a sua classe:

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

Parâmetro descontinuado

O parâmetro bubbleClassName ainda funciona mas será descontinuado. Utilize bubble.className em vez disso.

Subscrição automática às notas de lançamento

A subscrição automática às notas de lançamento está ativada por predefinição. Isto evita a necessidade de importar constantemente novos utilizadores ativos.

Os utilizadores são subscritos automaticamente quando:

1. Envia dados do utilizador para Ducalis através do Widget (user.email e user.hash são obrigatórios).
2. O utilizador abre o widget ou a frame do quadro.

Configure o domínio de email personalizado

Para enviar notas de lançamento aos utilizadores subscritos, configure um domínio de email personalizado.

Artigos relacionados

• Single Sign-On (SSO) para autorizar utilizadores em Voting Boards
• Incorporar e Personalizar o Widget de Changelog