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.

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.

<div style="text-align: center;"></div>

Desenvolvimento por blocos independentes

• 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

Comprimento do código

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:

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

Trabalho com links

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

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.

4. Selecione o modelo de e-mail na lista suspensa.
5. Se o modelo for aberto no modo Preview, clique no botão de alternância (canto superior direito) para alternar para o modo HTML.
6. Adicione ou modifique o layout HTML do e-mail, levando em consideração as recomendações.
7. Para conferir como o e-mail será exibido, alterne para o modo Preview.

8. Verifique a validade do código de e-mail.
9. 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}} <>.

<!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>

Continuar lendo