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.

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.