Widget da caixa de entrada da web

A integração da Caixa de Entrada de Mensagens da Web em seu site aumenta drasticamente as conversões. Um Widget da Caixa de Entrada da Web pronto para uso já vem inscrito em todos os métodos necessários para se comunicar com os usuários. Basta integrar o widget em seu site e personalizar sua aparência para se adequar à sua marca.

Definir inboxWidget.enable: true registra o dispositivo de um visitante para entrega na Caixa de Entrada, mesmo quando o visitante não concedeu permissão para notificações push, para que possa alcançar visitantes que nunca se inscreveram para push.

Nota Importante sobre o Versionamento do SDK (v3.66.0+)

A partir da versão 3.66.0, o dispositivo de um visitante é rastreado por um ID de hardware vinculado ao seu navegador antes que o visitante faça login. Se o visitante limpar os dados do site, trocar de navegador ou de dispositivo antes de chamar registerUser, esse rastreamento é interrompido. O histórico de mensagens anterior é perdido e não é transferido mesmo após o visitante fazer login.

Pré-requisitos

Para integrar a Caixa de Entrada de Mensagens para sites, siga o guia.

Integrando o widget

Ao inicializar o WebSDK da Pushwoosh, adicione o parâmetro inboxWidget:

Exemplo

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox'
  }
}]);

Gatilho

Para renderizar o widget, você deve especificar um elemento de gatilho para o widget. Qualquer elemento DOM na página pode ser o gatilho. Especifique seu ID como “pwInbox” ou atribua qualquer ID personalizado ao parâmetro triggerId ao inicializar o SDK.
Quando o WebSDK é inicializado, o selo de mensagens não lidas é exibido no elemento de gatilho. Assim que o elemento de gatilho é tocado, o widget aparece na página.

Posicionamento

Por padrão, o widget está localizado na direção oposta à borda da tela mais próxima do elemento de gatilho.
Você pode definir a posição do widget através dos parâmetros de configuração:

Exemplo

Pushwoosh.push(['init', {

  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    position: 'top'
  }
}]);

Por padrão, o inboxWidget deve ser colocado antes da tag de fechamento </body>.
Renderize o widget em qualquer lugar da página, como mostrado no exemplo abaixo:

Exemplo

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {

    enable: true,
    triggerId: 'pwInbox',
    appendTo: '.widget-parent-element-class'
  }
}]);

A busca por um elemento pai é realizada pelo querySelector, portanto, precisa de uma especificação clara de uma classe, id ou elemento.

Personalizando o widget

Personalizando textos

Para personalizar o texto do widget, adicione os parâmetros emptyInboxTitle e emptyInboxText:

Exemplo

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    title: 'Inbox',                                 // widget title
    emptyInboxTitle: 'You\'re all caught up',       // empty inbox widget title
    emptyInboxText: 'There are no new messages. Stay tuned!'    // empty inbox widget text
  }
}]);

O resultado se parece com isto:

Personalizando a aparência

Para personalizar a aparência do widget, use os seguintes parâmetros:

Exemplo

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    bgColor: '#ffffff',         // widget background
    borderColor: 'transparent', // widget border color
    borderRadius: 4,            // widget border radius (px)
    widgetWidth: 350,           // widget width (px)
    zIndex: 100                 // z-index
  }
}]);

O selo de contagem de mensagens não lidas pode ser personalizado da seguinte forma:

Exemplo

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    badgeBgColor: '#ff4c00',    // badge color
    badgeTextColor: '#ffffff'   // badge text color
  }
}]);

Para personalizar as propriedades do texto, adicione o seguinte código:

Exemplo

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    textColor: '#333333',                       // text color
    fontFamily: 'Helvetica, Arial, sans-serif', // font
    messageTitleColor: '#7a7a7a',               // messages title color
    timeTextColor: '#c4c4c4',                   // timestamp text color
    emptyInboxTitleColor: '#333333',            // empty inbox title color
    emptyInboxTextColor: '#7a7a7a'              // empty inbox text color
  }
}]);

Por fim, você pode especificar o ícone para a caixa de entrada vazia:

Exemplo

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    emptyInboxIconUrl: 'https://pushon.pushwoosh.com/images/icon-empty-inbox.png'   // URL path to an icon
  }
}]);

Personalizando os layouts das células

O widget desenha uma mensagem como um dos quatro layouts de célula — classic, banner, captioned ou carousel — os mesmos layouts que a pré-visualização da campanha no painel de controle mostra. Um layout que não pode ser renderizado com o que a mensagem carrega é rebaixado para classic: banner precisa de uma imagem de destaque, captioned precisa de uma imagem de destaque mais um título e um corpo, e carousel precisa de pelo menos um slide mais um título e um corpo.

Para personalizar a aparência dos layouts, use os seguintes parâmetros:

Exemplo

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    unreadDotColor: '#ff4c00',    // unread dot on the classic avatar
    avatarBgColor: '#e6e6e6',     // classic avatar background
    avatarTextColor: '#333333',   // classic avatar initial color
    avatarSize: 52,               // classic avatar size (px)
    mediaRadius: 8,               // corner radius of banner/captioned/carousel media (px)
    slideCaptionColor: '#ffffff', // carousel slide caption text color
    slideScrimColor: '#000000',  // carousel slide caption background scrim
    pagerDotActiveColor: '#ff4c00', // carousel active page dot
    pagerDotColor: '#c4c4c4'      // carousel inactive page dots
  }
}]);

Restaurando a célula clássica pré-3.75

Defina inboxWidget.legacyClassicCell: true para manter a aparência anterior da célula clássica — uma coluna de ícone de 40px em vez do avatar arredondado de 52px, sem ponto de não lido e um corpo não limitado. Os layouts banner, captioned e carousel não são afetados por esta opção.

Gerenciando-o no Painel de Controle

Requisitos

• O site carrega o Web SDK a partir da CDN da Pushwoosh, como o cartão indica. O cartão funciona independentemente do Settings source, o snippet de inicialização do seu site ou esta página (veja Web Push SDK 3.0), mas a versão do SDK necessária depende dessa origem:
  • O snippet de inicialização do seu site: Web SDK 3.93.1 ou posterior. Um SDK mais antigo ignora o cartão e lê inboxWidget apenas do snippet.
  • Esta página: Web SDK 3.92 ou posterior para os valores do cartão, e 3.93.0 ou posterior para a desativação no npm descrita abaixo.
• A página tem o elemento que abre a caixa de entrada, #pwInbox por padrão. Se ele estiver ausente, a caixa de entrada não abre, e o console do navegador mostra um erro Error during Pushwoosh initialization que nomeia o elemento ausente e informa onde alterar seu ID.
• Em um site que instala o SDK pelo npm, o cartão pode desativar o widget, mas não ativá-lo, já que o próprio site constrói o widget.

Para configurar o widget pelo Painel de Controle:

1. Vá para Settings → Configure platforms → Web.

2. No cartão Inbox widget, clique em Configure.

   

3. Ative Show the inbox on the site.

4. Preencha os campos que você quer gerenciar pelo painel e deixe os demais vazios. Um campo vazio não é salvo, então o valor do snippet, ou o padrão do SDK, continua valendo. Deixe ID of the element that opens the inbox e Insert into (CSS selector) vazios para manter triggerId e appendTo no snippet, junto à marcação para a qual apontam.

5. Confira o resultado na prévia. Alterne entre With messages e No messages para ver os dois estados.

   

6. Salve o formulário. Width, px aceita um número inteiro de 200 a 1200, e Corner radius, px, de 0 a 64. Qualquer outro valor mostra um erro abaixo do campo e não é salvo.

Como o cartão funciona com o snippet

Os valores salvos no cartão substituem as mesmas chaves de inboxWidget no snippet de inicialização, chave por chave. Cada campo define uma chave:

Seção	Campo	Chave de inboxWidget
Placement	ID of the element that opens the inbox	triggerId
Placement	Opens	position
Placement	Insert into (CSS selector)	appendTo
Texts	Widget title	title
Texts	Title when there are no messages	emptyInboxTitle
Texts	Text when there are no messages	emptyInboxText
Texts	Image when there are no messages (URL)	emptyInboxIconUrl
Appearance	Width, px (200–1200)	widgetWidth
Appearance	Corner radius, px (0–64)	borderRadius
Appearance	Font	fontFamily
Appearance	Background, Text, Border	bgColor, textColor, borderColor
Appearance	Counter background, Counter text, Unread mark	badgeBgColor, badgeTextColor, unreadDotColor

As chaves que o cartão não tem, como os parâmetros de layout das células e legacyClassicCell, são sempre lidas do snippet.

O interruptor Show the inbox on the site funciona da mesma forma. Até que ele seja salvo no painel, o selo do cartão mostra Set in the snippet e o enable do snippet decide se o widget aparece. Depois que você salva o interruptor, o selo mostra On ou Off, e o cartão substitui o snippet:

• Off oculta o widget mesmo que o snippet defina enable: true.
• On exibe o widget mesmo que o snippet não tenha nenhum inboxWidget. Assim como enable: true, ele registra os visitantes para entrega na Caixa de Entrada sem permissão de push.

As alterações salvas chegam ao site em até um minuto, no próximo carregamento da página.

Para devolver o widget ao snippet, clique em Return to snippet no cartão e confirme. O botão aparece assim que algo é salvo no cartão. Ele exclui todas as configurações da caixa de entrada salvas no painel, e o site volta a usar as configurações de inboxWidget do seu snippet.

API

Para abrir ou fechar o widget, use o seguinte método de API:

Exemplo

Pushwoosh.pwinboxWidget.toggle(open?: boolean);

Abrir o widget o atualiza a partir do servidor, no máximo uma vez a cada 30 segundos — uma mensagem independente da Caixa de Entrada do Aplicativo utiliza um canal sem push, então nada mais anuncia uma nova mensagem entre os carregamentos da página.