Login / Personalização de e-mail
  Voltar aos Documentos

Login

Personalização de e-mail

Como funciona

O produto Login fornece um conjunto de modelos padrão para e-mails que você envia aos usuários:

  • Confirmação de cadastro
  • Confirmação de boas-vindas
  • (com um link e código)
  • Alteração de senha
  • Alteração de endereço de e-mail
  • Código de autorização multifator (MFA)
  • Alteração das configurações de MFA
  • Assinatura de notícias

Os modelos são escritos em HTML e CSS.

Você pode:

  • fazer quaisquer alterações nos modelos padrões para personalizar a aparência e o conteúdo dos e-mails;
  • configure o envio de e-mails da Xsolla usando seu serviço de e-mail ou enviar e-mails usando o aplicativo SendGrid.

Observação
Em todos os casos listados acima (confirmação de cadastro, mensagem de boas-vindas, etc.), a Xsolla enviará e-mails para seus usuários. Não é possível desativar esse recurso.
Aviso
A personalização do e-mail só estará disponível depois de assinar o Acordo de Licenciamento de Produto. Para assinar o contrato, vá para a seção Agreements em sua Conta de Distribuidor.

Quem pode usar

Parceiros que já integraram o Login e usam o banco de dados Xsolla ou um armazenamento personalizado.

Recomendações de desenvolvimento de e-mail

Não há um padrão unificado de desenvolvimento de e-mail para aplicativos de e-mail – cada aplicativo exibe e-mails de forma diferente. Você deve criar um design simples e conciso para garantir que seu e-mail seja exibido de forma semelhante em diferentes aplicativos e dispositivos de e-mail.

Estrutura geral

JavaScript e CSS

Não é possível adicionar conteúdo multimídia a e-mails via JavaScript. Use imagens GIF para adicionar animações nos e-mails. Para adicionar um vídeo a um e-mail, use uma imagem como um link que leva ao seu URL com o conteúdo do vídeo.

Alguns aplicativos de e-mail têm suporte limitado para recursos CSS3. Lembre-se disso ao criar um modelo de e-mail.

Use apenas estilos embutidos. A maioria dos aplicativos de e-mail exclui estilos escritos na tag style.

Copy
Full screen
Small screen
<div style="text-align: center;"></div>

Desenvolvimento por blocos independentes

Recomendamos que você use o método de desenvolvimento de e-mail mais eficaz por meio de blocos independentes. Essa abordagem tem as seguintes vantagens:
  • Blocos exibidos incorretamente em um dispositivo não afetarão os blocos restantes.
  • Você pode ajustar blocos em e-mails existentes e testar o resultado rapidamente.
  • Você pode criar a coleção de blocos e rapidamente compor e-mails para diferentes finalidades.

Trabalhe com tabelas

Os aplicativos de e-mail funcionam incorretamente com elementos de bloco e a propriedadeposition: absolute. Para criar um e-mail com blocos, use o layout da tabela e especifique atributos align e valign para células da tabela. As tabelas se adaptam melhor a telas diferentes.

Tente evitar a mesclagem de células pelos atributos colspan e rowspan. Em vez disso, use tabelas inseridas.

Tamanho e unidades utilizadas

Para fazer com que o conteúdo apareça corretamente sem uma barra de rolagem em telas grandes ou pequenas, especifique as seguintes configurações para todos os contêineres com o conteúdo:

  • A propriedade width: 100% sempre deve ser especificada.
  • A limitação de largura para a tela maior. A largura recomendada não deve exceder 800px, pois esse valor é mais adequado para leitura.

Não especifique a propriedade line-height em % ou em. Use apenas pixels para fazer com que os e-mails tenham a mesma aparência em todos os aplicativos de e-mail e em telas diferentes.

Trabalhando com fontes

Use fontes padrões. A maioria dos aplicativos de e-mail não oferece suporte a fontes externas.

Fontes padrões:

  • com serifas: Courier, Courier New, Georgia, Times, Times New Roman
  • sem serifas: Arial, Black, Tahoma, Verdana, Trebuchet MS

Pré-cabeçalho

A maioria dos aplicativos de e-mail mostra um pré-cabeçalho como uma visualização de email. Você deve sempre adicionar um pré-cabeçalho. Ele motiva os usuários a abrirem os e-mails recebidos. Os aplicativos de e-mail podem cortar o texto do assunto do e-mail e um pré-cabeçalho ajuda os usuários a entender o conteúdo do e-mail.

Comprimento do código

Reduza o comprimento do código para que os e-mails apareçam corretamente. Por exemplo, o Gmail e o Yahoo têm problemas na exibição de e-mails maiores que 100 KB.

Trabalho com imagens

Ao desenvolver e-mails com imagens, lembre-se de que:

  • Os usuários podem desativar imagens nas configurações do aplicativo de e-mail.
  • As imagens podem demorar muito para carregar.
  • A qualidade da imagem pode variar em diferentes telas.

Use os formatos de imagem PNG ou JPEG em vez do formato SVG, que não é suportado pela maioria dos aplicativos de e-mail.

Para monitores com resolução 4K, use a imagem duas vezes maior do que o tamanho recomendado. Por exemplo, você precisa de uma imagem de 400px. Obtenha a versão com largura de 800px desta imagem e adicione-a ao e-mail:

Copy
Full screen
Small screen
<img src="https://site.com/images/123.png" width="400" height="auto" style="width: 400px; height: auto" />

Qualquer link deve incluir o esquema e o hospedeiro. Por exemplo, https://site.ru/path. Não use links relativos (/path) e links sem um esquema (://site.ru/path). Esse tipo de links pode obter automaticamente o esquema file e o navegador tentará baixá-lo em vez de abri-lo.

Para garantir que um e-mail não acabe na pasta de spam, especifique o atributo title para todos os links. Esse atributo ajuda pessoas com deficiências que dependem de softwares adicionais para acessarem conteúdos da web.

Você deve sempre especificar a cor da fonte para os links. Se você não especificá-la, o aplicativo de e-mail usará uma cor própria.

Adicione um endereço de e-mail e um número de telefone como links. Os estilos do aplicativo podem afetar a exibição correta de um número de telefone.

Para abrir um link de um email em uma nova aba ou janela, especifique o atributo target="_blank".

Outras recomendações

Recomendações adicionais para o desenvolvimento de e-mails adaptáveis.

Como obtê-lo

O e-mail que você envia ao usuário deve conter textos explicativos e um link para confirmar as ações do usuário. Para cada elemento do e-mail, você pode usar:

  • seu próprio texto que será exibido no mesmo idioma em que foi escrito;
  • textos padrões da Xsolla traduzidos em 20 idiomas.

Os textos da Xsolla são inseridos no modelo de e-mail como variáveis (temporárias), por exemplo:

  • {{subject}} – o texto do cabeçalho do e-mail.
  • {{text}} – o texto do corpo do e-mail.
  • {{action_link}} – o texto do link. O endereço do link é gerado pela Xsolla.
  • {{button}} – o texto do botão.

Ao gerar um e-mail, o texto do idioma correspondente é usado em vez dos elementos temporários.

O idioma do e-mail é selecionado com base na localidade do usuário. Os seguintes métodos estão disponíveis para determinar a localidade do usuário:

  • Ao integrar através do Login widget, você pode passar a localidade do usuário a partir da interface do aplicativo para o widget quando ele for aberto. Em seguida, o widget passa a localidade para os métodos do Login API.
  • Ao integrar via Login API, você pode passar a localidade do usuário a partir da interface do aplicativo para o método da Login API quando o método for chamado.
  • Se você não passar a localidade do usuário, o idioma será determinado a partir do endereço IP ou do idioma do navegador.

Para personalizar o modelo de e-mail:

  1. Acesse sua Conta de Distribuidor e abra your project > Login.
  2. Clique em Configure no painel de um projeto Login.
  3. Vá para o bloco Customization e selecione a seção Email customization.

  1. Selecione o modelo de e-mail na lista suspensa.
  2. Se o modelo for aberto no modo Preview, clique no botão de alternância (canto superior direito) para alternar para o modo HTML.
  3. Adicione ou modifique o layout HTML do e-mail, levando em consideração as recomendações.
  4. Para conferir como o e-mail será exibido, alterne para o modo Preview.
  1. Verifique a validade do código de e-mail.
  2. Se necessário, edite o campo Send emails from: especifique o nome do remetente, que será exibido no cabeçalho do e-mail, e o endereço de e-mail do remetente. O nome do seu projeto Login é usado como o nome do remetente padrão e o endereço de e-mail padrão é noreply@login.xsolla.com. Ao preencher o campo, você pode usar quaisquer variáveis comuns do formulário application.name. Por exemplo, {{application.name}} <>.
Observação
E-mails não personalizados usam modelos Xsolla padrão.
Exemplo de um modelo de e-mail:
Copy
Full screen
Small screen
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>{{subject}}</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body style="background-color:#0a1e37;">
  <table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:400px;" width="400">
    <tr>
      <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
          <tbody>
            <tr>
              <td style="direction:ltr;font-size:0px;padding:60px 0 0;text-align:center;vertical-align:top;">
                <table align="center"
                       background="https://cdn.xsolla.net/xsolla-login-widget/images/mail/hero_background.jpg"
                       border="0" cellpadding="0" cellspacing="0" role="presentation"
                       style="background:url(https://cdn.xsolla.net/xsolla-login-widget/images/mail/hero_background.jpg) top center / auto repeat;width:100%;">
                  <tbody>
                    <tr>
                      <td style="direction:ltr;font-size:0px;padding:0;text-align:center;vertical-align:top;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                          <tr>
                            <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                              <div style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-size:36px;line-height:42px;text-align:center;color:#fff;">
                                {{subject}}
                              </div>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <table align="center"
                       background="rgba(44,72,98,0.7)"
                       border="0" cellpadding="0" cellspacing="0" role="presentation"
                       style="background: rgba(44,72,98,0.7); width:100%;">    
                  <!-- Block with the email text -->            
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>
Este artigo foi útil?
Obrigado!
Podemos melhorar alguma coisa? Mensagem
Que pena ouvir isso
Explique porque este artigo não foi útil para você. Mensagem
Obrigado pelo seu feedback!
Avaliaremos sua mensagem e a usaremos para melhorar sua experiência.

Continuar lendo

Encontre suas respostas nas Perguntas Frequentes (FAQ)

Posso usar meu próprio aplicativo SendGrid para enviar e-mails?
Última atualização: 18 de Setembro de 2024

Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.

Relatar um problema
Nós sempre avaliamos nossos conteúdos. Seu feedback nos ajuda a melhorá-los.
Forneça um e-mail para que possamos responder
Obrigado pelo seu feedback!