Personalización del correo electrónico

Cómo funciona

El producto Login proporciona un conjunto de plantillas estándar para los correos electrónicos que envíe a los usuarios:

• Confirmación de registro
• Bienvenida
• Confirmación (con enlace y código)
• Cambio de contraseña
• Cambio de dirección de correo electrónico
• Código de autorización multifactor (MFA)
• Cambio de configuración MFA
• Suscripción a noticias

Las plantillas están escritas en códigos HTML y CSS.

Puede:

• realizar cualquier cambio en las plantillas estándar para personalizar el aspecto y el contenido de los correos electrónicos;
• configurar el envío de correos electrónicos desde Xsolla utilizando su servicio de correo o el envío de correos electrónicos utilizando la aplicación SendGrid.

¿Quién puede utilizarlo?

Socios que ya han integrado Login y utilizan la base de datos de Xsolla o un almacenamiento personalizado.

Recomendaciones para el desarrollo del correo electrónico

No existe un estándar unificado de desarrollo de correo electrónico para las aplicaciones de correo electrónico: cada aplicación muestra los correos electrónicos de forma diferente. Debe crear un diseño sencillo y conciso para asegurar que su correo electrónico se muestre de forma similar en las distintas aplicaciones y dispositivos de correo electrónico.

Estructura general

JavaScript y CSS

No puede agregar contenido multimedia a los correos electrónicos usando JavaScript. Utilice imágenes GIF para añadir animación a los correos electrónicos. Para agregar un vídeo a un correo electrónico, utilice una imagen en la forma de un enlace que lleve a la URL que contenga su contenido de vídeo.

Algunas aplicaciones de correo electrónico tienen una compatibilidad limitada con las funciones CSS3. Téngalo en cuenta cuando cree una plantilla de correo electrónico.

Utilice sólo estilos “en línea”. La mayoría de las aplicaciones de correo electrónico excluyen los estilos escritos en la etiqueta style.

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

Desarrollo mediante bloques independientes

• Los bloques que se muestren incorrectamente en un dispositivo no afectarán a los bloques restantes.
• Puede ajustar los bloques en los correos electrónicos existentes y comprobar el resultado rápidamente.
• Puede crear la colección de bloques y redactar rápidamente correos electrónicos para diferentes propósitos.

Trabajar con tablas

Las aplicaciones de correo electrónico funcionan incorrectamente con elementos de bloque y la propiedad position: absolute. Para generar un correo electrónico con bloques, utilice el diseño de tabla y especifique los atributos align y valign para las celdas de la tabla. Las tablas se adaptan mejor a las diferentes pantallas.

Intente evitar la fusión de celdas mediante los atributos colspan y rowspan. Utilice en su lugar tablas insertadas.

Tamaño y unidades utilizadas

Para que el contenido aparezca correctamente sin barra de desplazamiento en pantallas grandes y pequeñas, especifique la siguiente configuración para todos los contenedores con el contenido:

• Siempre debe especificarse la propiedad width: 100%.
• La limitación de anchura para la pantalla más grande. La anchura recomendada no debe superar 800px, ya que este valor es el idóneo para la lectura.

No especifique la propiedad line-height en % o em. Utilice solamente píxeles para que los correos electrónicos tengan el mismo aspecto en todas las aplicaciones de correo electrónico y en las diferentes pantallas.

Trabajar con fuentes

Utiliza fuentes estándar. La mayoría de las aplicaciones de correo electrónico no admiten fuentes externas.

Fuentes estándar:

• con serifas: Courier, Courier New, Georgia, Times y Times New Roman
• sin serifas: Arial, Black, Tahoma, Verdana y Trebuchet MS

Preencabezado

Longitud del código

Trabajar con imágenes

Cuando cree correos electrónicos con imágenes, tenga en cuenta que:

• Los usuarios pueden deshabilitar las imágenes en la configuración de la aplicación de correo electrónico.
• Las imágenes pueden tardar mucho en cargarse.
• La calidad de la imagen puede variar en las diferentes pantallas.

Utilice los formatos de imagen PNG o JPEG en lugar del formato SVG, que no es compatible con la mayoría de las aplicaciones de correo electrónico.

Para los monitores con resolución 4K, utilice la imagen con un tamaño dos veces superior que el tamaño recomendado. Por ejemplo, necesita una imagen de 400px. Obtenga la versión con una anchura de 800px de esta imagen y agréguela al correo electrónico:

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

Trabajar con enlaces

Cualquier enlace debe incluir el esquema y el host. Por ejemplo, https://site.ru/path. No utilice enlaces relativos (/path) ni enlaces sin esquema (://site.ru/path). Este tipo de enlaces pueden obtener automáticamente el esquema file y el navegador intentará descargarlo en lugar de abrirlo.

Para asegurarse de que un correo electrónico no acabe en la carpeta de spam (correo no deseado), especifique el atributo title para todos los enlaces. Este atributo ayuda a las personas con discapacidad que dependen de software adicional para acceder a contenidos web.

Siempre debe especificar el color de la fuente para los enlaces. Si no lo especifica, la aplicación de correo electrónico utilizará su propio color.

Añada una dirección de correo electrónico y un número de teléfono en forma de enlaces. Los estilos de las aplicaciones pueden afectar a la correcta visualización de un número de teléfono.

Para abrir un enlace de un correo electrónico en una nueva pestaña o ventana, especifique el atributo target="_blank".

Otras recomendaciones

Cómo conseguirlo

El correo electrónico que envíe al usuario debe contener un texto explicativo y un enlace para confirmar las acciones del usuario. Para cada elemento del correo electrónico, puede utilizar:

• su propio texto que se mostrará en el mismo idioma en que fue escrito;
• textos estándar de Xsolla localizados en 20 idiomas.

Los textos de Xsolla se insertan en la plantilla de correo electrónico como variables (marcadores de posición), por ejemplo:

• {{subject}} - el texto del encabezado del correo electrónico;
• {{text}} - el texto del cuerpo del correo electrónico;
• {{action_link}} - el texto del enlace. La dirección del enlace es generada por Xsolla;
• {{button}} - el texto del botón.

Al generar un correo electrónico, se utiliza el texto del idioma correspondiente en lugar de los marcadores de posición.

El idioma del correo electrónico se selecciona en función de la configuración regional del usuario. Los siguientes métodos están disponibles para determinar la configuración regional del usuario:

• Cuando se integra a través del widget de Login, puede transmitir la configuración regional del usuario desde la interfaz de su aplicación al widget cuando se abre. A continuación, el widget transmite la configuración regional a los métodos API de Login.
• Cuando se integra a través de la API de Login, puede transmitir la configuración regional del usuario desde la interfaz de su aplicación al método API de Login cuando se hace una llamada al método.
• Si no transmite la configuración regional del usuario, el idioma se determina a partir de la dirección IP o del idioma del navegador.

Para personalizar la plantilla de correo electrónico:

1. Vaya a su Cuenta del editor y abra your project > Login.
2. Haga clic en Configure en el panel de un proyecto de Login.
3. Vaya al bloque Customization y seleccione la sección Email customization.

4. Seleccione la plantilla de correo electrónico en la lista desplegable.
5. Si la plantilla se abre en el modo Preview, haga clic en el botón de alternancia (arriba a la derecha) para cambiar al modo HTML.
6. Añada o modifique el diseño HTML del correo electrónico, teniendo en cuenta las recomendaciones.
7. Para comprobar cómo se visualizará el correo electrónico, cambie al modo Preview.

8. Compruebe la validez del código de correo electrónico.
9. Si es necesario, edite el campo Send emails from: especifique el nombre del remitente, que se mostrará en el encabezado del correo electrónico, y la dirección de correo electrónico del remitente. El nombre de su proyecto de Login se utiliza como nombre de remitente por defecto, y la dirección de correo electrónico por defecto es noreply@login.xsolla.com. Cuando rellene el campo, puede utilizar cualquier variable común del formulario application.name. Por ejemplo, {{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>

Seguir leyendo