Soft-ask

O convite exibido antes do pedido de permissão do navegador, e como personalizar o visual.

O pedido de permissão do navegador só pode ser recusado uma vez: depois de "Bloquear", o site não consegue mais perguntar. O soft-ask é um convite do próprio site. Quem recusa o convite pode ser chamado de novo depois, e o pedido do navegador fica para quem já disse sim.

O texto, o formato e o comportamento são configurados no Widget no painel.

Quando aparece

O soft-ask só é exibido quando três condições valem ao mesmo tempo:

está ligado no painel;
a permissão do navegador ainda é default, isto é, nunca foi respondida;
o visitante não recusou o convite dentro do período de pausa.

Ao clicar em "Agora não", o convite some por snooze_days dias (7 se o painel não definir). A data fica no localStorage, na chave pushwi_soft_ask_snoozed_until. Apague essa chave para testar de novo.

No modo automático, o convite respeita o gatilho e o atraso do painel: ao carregar a página ou no primeiro clique, com espera de até 300 segundos.

Formatos e posições

Formato	Como é
`card`	Cartão de até 320 px num canto da tela, com ícone, título, texto e dois botões
`banner`	Faixa horizontal no topo ou no rodapé
`modal`	Janela centralizada com fundo escurecido. Ignora a posição.
`bubble`	Bolha compacta com ícone e título. Clicar nela aceita; o × recusa.

Personalizando o visual

O SDK injeta um <style id="pushwi-softask-style"> no início do <head>. Como ele vem primeiro, qualquer CSS seu com a mesma especificidade ganha.

O caminho mais simples é mexer nas variáveis CSS:

css

.pushwi-softask {  --pushwi-softask-accent: #0a58ca;  --pushwi-softask-accent-fg: #ffffff;  --pushwi-softask-font: 15px/1.5 "Inter", sans-serif;  --pushwi-softask-shadow: 0 4px 16px rgba(0, 0, 0, .12);  --pushwi-softask-z: 9999;}

Variável	Padrão	Controla
`--pushwi-softask-bg`	cor do painel	Fundo
`--pushwi-softask-fg`	calculada pelo contraste do fundo	Texto
`--pushwi-softask-radius`	raio do painel	Cantos
`--pushwi-softask-accent`	`#249f00`	Botão de aceitar
`--pushwi-softask-accent-fg`	`#ffffff`	Texto do botão de aceitar
`--pushwi-softask-font`	fonte do sistema, 14 px	Fonte
`--pushwi-softask-shadow`	sombra suave	Sombra
`--pushwi-softask-z`	`2147483000`	Camada (`z-index`)
`--pushwi-softask-backdrop-bg`	preto a 45%	Fundo do modal

Fundo, texto e raio são definidos inline no elemento a partir do painel. Para sobrescrever esses três, use !important ou mude no painel.

Estrutura do HTML

As classes seguem o padrão BEM e cada parte também tem um atributo data-pushwi-el, que é mais estável para seletores:

html

<div class="pushwi-softask pushwi-softask--card pushwi-softask--bottom-right"     data-pushwi-el="root" data-pushwi-softask data-pushwi-format="card" data-pushwi-position="bottom-right">  <div class="pushwi-softask__head" data-pushwi-el="head">    <img class="pushwi-softask__icon pushwi-softask__icon--image" data-pushwi-el="icon">    <div class="pushwi-softask__text" data-pushwi-el="text">      <strong class="pushwi-softask__title" data-pushwi-el="title">…</strong>      <p class="pushwi-softask__body" data-pushwi-el="body">…</p>    </div>  </div>  <div class="pushwi-softask__actions" data-pushwi-el="actions">    <button class="pushwi-softask__button pushwi-softask__button--dismiss" data-pushwi-el="dismiss">Agora não</button>    <button class="pushwi-softask__button pushwi-softask__button--accept" data-pushwi-el="accept">Sim, quero</button>  </div></div>

No modal, o elemento raiz fica dentro de um <div class="pushwi-softask-backdrop" data-pushwi-el="backdrop">. Sem imagem configurada, o ícone é um <span> com 🔔.

Sem CSS nenhum

Com a opção Sem estilos, eu cuido do CSS no painel (styles: "none"), o SDK não injeta CSS. Ele monta a mesma estrutura, com as mesmas classes de formato e posição, e insere o convite no fim do <body>. Cor de fundo e raio continuam publicados no elemento como --pushwi-softask-bg e --pushwi-softask-radius, para o seu CSS usar se quiser.

Loading documentation…