# Botão de inscrição para Push

Obtenha mais assinantes de push e melhore a experiência do usuário! Configure um botão de inscrição personalizado no seu site para aumentar a taxa de opt-in. Em vez de mostrar automaticamente aos recém-chegados o diálogo padrão, explique o valor das suas mensagens e incentive a inscrição para notificações push quando os usuários estiverem satisfeitos.\
Em **dois** passos fáceis, você terá um botão de inscrição para push personalizado pronto e funcionando!

## 1. Implemente o botão de inscrição do Web SDK

<Aside type="caution">
#### SDK Web da Pushwoosh

Certifique-se de que você implementou o SDK Web da Pushwoosh no seu site. Para fazer isso, siga nosso [guia](/pt/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#integration).
</Aside>

Para exibir o botão no seu site, adicione o seguinte código aos parâmetros de inicialização do SDK Web da Pushwoosh:

```javascript
Pushwoosh.push(['init', {
  //...
  autoSubscribe: false,
  subscribeWidget: {
    enable: true,
  }
}]);
```

Certifique-se de desativar o `autoSubscribe` ao configurar o botão!

<Aside type="note">
Para tornar o botão visível para visitantes que usam Chrome e Mozilla, você precisa especificar o `fcm_sender_id` no arquivo `manifest.json`; para o Safari, especifique `safariWebsitePushID`.
</Aside>

## 2. Personalize o botão

Para que o botão corresponda à aparência e ao estilo do seu site, personalize seu design! Você pode alterar parâmetros como a cor do sino, posição, borda e sombra; além disso, é possível alterar os textos da dica de ferramenta (tooltip).

```javascript
Pushwoosh.push(['init', {
  //...
  subscribeWidget: {
    enable: true,
    position: 'bottomLeft', //valores possíveis: ‘bottomLeft’, ‘bottomRight’, ‘topLeft’, ‘topRight’
    bgColor: '#12AE7E',
    bellColor: 'white',
    bellStrokeColor: '#08754f',
    bellButtonBorder: '1px solid #379676',
    shadow: '0px 0px 6px rgba(0, 0, 0, 0.75)',
    size: '48px',
    indent: '20px',
    zIndex: '999999',
    tooltipText: {
      successSubscribe: 'Você se inscreveu com sucesso!',
      needSubscribe: 'Receba notificações sobre notícias importantes!',
      blockSubscribe: 'Clique para ver como receber notificações',
      alreadySubscribed: 'Você já está inscrito'
    }
    buttonImage: 'https://url-image.jpg',
    contentImages: {
      chrome: 'https://url-image.jpg',
      mobileChrome: 'https://url-image.jpg',
      firefox: 'https://url-image.jpg',
      opera: 'https://url-image.jpg',
      safari: 'https://url-image.jpg',
      edge: 'https://url-image.jpg',
    }
  }
}]);
```

<Aside type="tip">

Para maximizar as taxas de opt-in de push, certifique-se de que os benefícios da inscrição sejam óbvios para os usuários. Altere o texto `needSubscribe` para que ele explique o valor das suas mensagens, e as pessoas se inscreverão para receber notificações!
</Aside>