Pular para o conteúdo principal

Incorporar widget

Widget de changelog mostrando notificações

O widget Ducalis notifica usuários sobre novos recursos diretamente no seu produto. Incorpore-o para aumentar o engajamento com seu Quadro de Ideias.

Widget de changelog e notificações​

Quando você incorpora o widget, usuários recebem notificações no produto sobre novos recursos. Quando você move Ideias para o status Concluído, o widget exibe atualizações com uma bolha de notificação vermelha.

Demonstração ao vivo: Visite https://hi.ducalis.io/ e clique em What's New (Novidades) no menu do cabeçalho.

Incorpore em qualquer lugar​

Incorpore o widget em qualquer página. Se os usuários estiverem identificados, eles verão notificações pessoais em todos os subdomínios. Por exemplo, quando um usuário lê um anúncio e navega para outra página, a bolha vermelha não aparecerá novamente até o próximo lançamento.

Na Ducalis, incorporamos o widget em:

Configurar o widget​

O widget de changelog tem duas partes:

  • Código JavaScript base do widget que carrega o widget
  • Um botão para abrir o widget
aviso

Se seu Quadro de Ideias for privado com restrições de acesso, você deve passar as identidades dos usuários para o widget. Caso contrário, ninguém poderá acessá-lo.

1. Abrir as configurações do Quadro de Ideias​

  1. Acesse as configurações do Quadro de Ideias.

    Página de configurações do Quadro de Ideias

  2. Encontre a seção Embed (Incorporar).

  3. Clique em Add 'What's New' Widget (Adicionar widget 'Novidades').

2. Instalar o código base do widget​

Adicione este código na parte inferior das páginas onde você deseja mostrar o widget.

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

3. Criar um botão do widget​

Botão do widget com bolha de notificação

Adicione uma classe CSS a qualquer elemento para criar um botão que abre o widget e mostra notificações:

<div class="Ducalis-changelog-widget">What's new</div>
Exemplo de código para botão do widget

Exemplo da nossa landing page:

Botão do widget no cabeçalho da landing page

4. Recursos do widget na configuração base​

Esta configuração base fornece:

  • O widget exibe as Ideias mais recentes no status Concluído, ordenadas por data de lançamento
  • Bolha de notificação para recursos recém-lançados (Ideias movidas para Concluído)
  • Visitantes podem ler até 20 Ideias lançadas
  • Link para o Quadro de Ideias para verificar o roadmap, adicionar Ideias, votar e comentar
  • Captura de e-mail para atualizações de resumo semanal do roadmap

Encontre os assinantes do Quadro de Ideias nas configurações do Quadro de Ideias.

Lista de assinantes do Quadro de Ideias

Configurar opções do widget​

Página padrão​

Escolha se a página Roadmap ou Changelog abre primeiro no seu widget.

Para especificar a página, configure defaultView no código. Use roadmap ou changelog:

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

Para páginas Changelog e Roadmap, você pode opcionalmente abrir um filtro específico ou ação (apenas usuários autorizados):

dclsPxl("initWidget", {
   ...

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

   ...
});

Método de autenticação​

Escolha entre autenticação Ducalis ou seu próprio método de autenticação.

Opção 1: Usar autenticação Ducalis (padrão)

Por padrão, a autenticação Ducalis é usada quando clientes desejam votar, adicionar Ideias ou comentar.

Opção 2: Usar sua própria autenticação

Se você usa sua própria autenticação, especifique-a no código: onAuth: showUserAuth

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

Quando esta função é especificada, ela substitui a autenticação Ducalis. Você gerencia todo o processo de autenticação, mas deve passar o usuário autenticado do widget: user.email + user.hash são obrigatórios.

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

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

Personalizar aparência do widget​

Após incorporar o Widget de Changelog Ducalis, personalize-o para combinar com seu produto.

Adicione estes parâmetros ao seu código:

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

Migrar para o novo parâmetro bubble​

informação

Os parâmetros top, right, backgroundColor e color estão obsoletos. Use bubble.style em vez disso.

Adicione o novo parâmetro bubble.style:

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

Modo de debug​

debug: true,

Quando você abre o widget, ele marca todas as atualizações como lidas e a bolha vermelha desaparece. Para melhor teste de layout, use o modo de debug.

O widget sempre mostrará um círculo de notificação vermelho quando você fechar e reabrir. Isso ajuda você a testar a posição correta.

Anexar bolha de notificação a qualquer elemento​

selector: "_YOUR_SELECTOR"

Selecione ou crie um elemento para acionar o widget Ducalis. Use o ID desse elemento ou classe única para o parâmetro selector.

dica

Se o selector for uma classe (não um ID), comece-o com um ponto. Para a classe openWidget, seu selector é .openWidget.

Para o selector do seu widget, você pode usar:

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

Cores da notificação​

Combine as cores com seu produto. Cores padrão:

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

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

Posição da bolha de notificação​

Por padrão, a bolha de notificação é posicionada relativamente ao elemento anexado ao selector.

Demo de posição da bolha de notificação

Se você não gostar da posição da bolha de notificação, ajuste-a na ferramenta de desenvolvedor do navegador e adicione-a às configurações do widget:

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

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

Largura do widget​

Por padrão, a largura do widget é 376px. Você pode alterá-la:

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

Classe CSS personalizada​

Apenas para uso avançado. Adiciona um nome de classe personalizado à bolha de notificação sem estilos do nosso lado. Você pode personalizar a bolha de notificação com seu CSS.

bubble.className: "_SOME_CLASS_NAME"

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

O parâmetro bubbleClassName está obsoleto. Use bubble.className em vez disso.

Inscrever usuários em notas de versão​

Um dos recursos mais úteis dos Quadros de Ideias são as notas de versão automatizadas.

Como o Quadro de Ideias é uma aplicação separada, a inscrição automática em notas de versão está habilitada por padrão para evitar constantemente importar listas de novos usuários ativos.

Usuários são automaticamente inscritos quando:

  1. Você envia dados de usuário para Ducalis via A API Ducalis ou Widget (user.email + user.hash são obrigatórios).

  2. Usuário abre o widget ou frame do quadro.

Com essas condições atendidas, usuários são inscritos em notas de versão automaticamente.

aviso

Para que usuários recebam atualizações de notas de versão, configure um domínio de e-mail personalizado.

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

Se você atende às condições acima, mas não precisa inscrever usuários automaticamente, altere para autoSubscribe: false.

Última atualização: Hoje