Ir para o conteudo principal

Incorporar widget

Widget de changelog a mostrar notificações

O widget da Ducalis notifica os utilizadores sobre novas funcionalidades diretamente no seu produto. Incorpore-o para aumentar o envolvimento com o seu Voting Board.

Widget de changelog e notificações​

Quando incorpora o widget, os utilizadores recebem notificações dentro do produto sobre novas funcionalidades. Quando move Ideias para o estado Done, o widget apresenta 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.

Incorporar em qualquer lugar​

Incorpore o widget em qualquer página. Se os utilizadores estiverem identificados, verão notificações pessoais em todos os subdomínios. Por exemplo, quando um utilizador lê um anúncio e navega para outra página, a bolha vermelha não aparecerá novamente até ao 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 o seu Voting Board for privado com restrições de acesso, deve passar as identidades dos utilizadores ao widget. Caso contrário, ninguém pode aceder ao mesmo.

1. Abrir definições do Voting Board​

  1. Aceda às definições do Voting Board.

    Página de definições do Voting Board

  2. Localize a secção Embed (Incorporar).

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

2. Instalar código base do widget​

Adicione este código na parte inferior das páginas onde pretende 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. Funcionalidades do widget na configuração base​

Esta configuração base fornece:

  • O widget apresenta as Ideias mais recentes no estado Done, ordenadas por data de lançamento
  • Bolha de notificação para funcionalidades recém-lançadas (Ideias movidas para Done)
  • Visitantes podem ler até 20 Ideias lançadas
  • Ligação para o Voting Board para verificar o roadmap, adicionar Ideias, votar e comentar
  • Captura de email para atualizações do resumo semanal do roadmap

Encontre subscritores do Voting Board nas definições do Voting Board.

Lista de subscritores do Voting Board

Configurar opções do widget​

Página predefinida​

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 as páginas Changelog e Roadmap, pode opcionalmente abrir um filtro ou ação específica (apenas utilizadores 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 a autenticação da Ducalis ou o seu próprio método de autenticação.

Opção 1: Usar autenticação da Ducalis (predefinição)

Por predefinição, a autenticação da Ducalis é usada quando os clientes pretendem votar, adicionar Ideias ou comentar.

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

Se usar a 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, substitui a autenticação da Ducalis. Gere todo o processo de autenticação, mas deve passar o utilizador 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 da Ducalis, personalize-o para corresponder ao 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​

informacao

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 depuração​

debug: true,

Quando abre o widget, este marca todas as atualizações como lidas e a bolha vermelha desaparece. Para melhor testar o layout, use o modo de depuração.

O widget mostrará sempre um círculo de notificação vermelho quando o fechar e reabrir. Isto ajuda-o 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 da Ducalis. Use o ID ou classe única desse elemento para o parâmetro selector.

sugestao

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

Para o seu selector do widget, 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​

Ajuste as cores ao seu produto. Cores predefinidas:

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

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

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

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

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

Se não gostar da posição da bolha de notificação, ajuste-a na ferramenta de desenvolvimento do browser e adicione-a às definições do widget:

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

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

Largura do widget​

Por predefinição, a largura do widget é 376px. 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 da nossa parte. Pode personalizar a bolha de notificação com o 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',
    ...
}
informacao

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

Subscrever utilizadores às notas de lançamento​

Uma das funcionalidades mais úteis dos Voting Boards são as notas de lançamento automatizadas.

Como o Voting Board é uma aplicação separada, a subscrição automática às notas de lançamento está ativada por predefinição para evitar a importação constante de listas de novos utilizadores ativos.

Os utilizadores são automaticamente subscritos quando:

  1. Envia dados do utilizador para a Ducalis através da API da Ducalis ou Widget (user.email + user.hash são obrigatórios).

  2. O utilizador abre o widget ou frame do board.

Com estas condições cumpridas, os utilizadores são subscritos às notas de lançamento automaticamente.

aviso

Para que os utilizadores recebam atualizações das notas de lançamento, configure um domínio de email 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 cumprir as condições acima mas não precisar de subscrever utilizadores automaticamente, altere para autoSubscribe: false.

Atualizado: Esta semana