Incorporar como iframe

Incorpore seu Quadro de Ideias diretamente em seu produto usando código iframe. Os usuários podem acessar o quadro sem sair da sua aplicação.

O exemplo abaixo mostra um Quadro de Ideias do Ducalis incorporado em uma página e aberto em um frame.

Incorporar o quadro

1. Escolha o Quadro de Ideias e verifique se ele está publicado.

   

2. Acesse Voting settings (Configurações de votação) → Embed (Incorporar) → seção Embed The Whole Board (Incorporar o Quadro Completo).

   

3. Copie o Widget Base Code.

   

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

   

Seu código final deve se parecer com este:

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 padrão

Escolha se a página do Roadmap ou Changelog abre primeiro quando os usuários 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 do Changelog e Roadmap, você pode opcionalmente abrir um filtro ou ação específica (somente para usuários 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

Exiba badges de notificação para alertar os usuários 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

Combine 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

Uso avançado apenas

Adicione um nome de classe personalizado à bolha de notificação sem estilos padrão. Você pode personalizar a bolha de notificação com seu CSS.

Use bubble.className para especificar sua classe:

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

Parâmetro obsoleto

O parâmetro bubbleClassName ainda funciona, mas será descontinuado. Use bubble.className no lugar.

Inscrição automática em notas de versão

A inscrição automática em notas de versão está habilitada por padrão. Isso evita a necessidade de importar constantemente novos usuários ativos.

Os usuários são inscritos automaticamente quando:

1. Você envia dados do usuário para o Ducalis via Widget (user.email e user.hash são obrigatórios).
2. O usuário abre o widget ou frame do quadro.

Configure o domínio de e-mail personalizado

Para enviar notas de versão aos usuários inscritos, configure um domínio de e-mail personalizado.

Artigos relacionados

• Single Sign-On (SSO) para autorização de usuários em Quadros de Ideias
• Incorporação e personalização do widget Changelog