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 está 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.

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 por 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',                                 // título do widget
    emptyInboxTitle: 'You\'re all caught up',       // título do widget de caixa de entrada vazia
    emptyInboxText: 'There are no new messages. Stay tuned!'    // texto do widget de caixa de entrada vazia
  }
}]);

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',         // fundo do widget
    borderColor: 'transparent', // cor da borda do widget
    borderRadius: 4,            // raio da borda do widget (px)
    widgetWidth: 350,           // largura do widget (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',    // cor do selo
    badgeTextColor: '#ffffff'   // cor do texto do selo
  }
}]);

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

Exemplo

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    textColor: '#333333',                       // cor do texto
    fontFamily: 'Helvetica, Arial, sans-serif', // fonte
    messageTitleColor: '#7a7a7a',               // cor do título das mensagens
    timeTextColor: '#c4c4c4',                   // cor do texto do carimbo de data/hora
    emptyInboxTitleColor: '#333333',            // cor do título da caixa de entrada vazia
    emptyInboxTextColor: '#7a7a7a'              // cor do texto da caixa de entrada vazia
  }
}]);

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'   // caminho da URL para um ícone
  }
}]);

API

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

Exemplo

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