Login / Personalización del correo electrónico
  Volver a Documentos

Login

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.

Nota
En todos los casos mencionados anteriormente (confirmación de registro, mensaje de bienvenida, etc.) Xsolla enviará correos electrónicos a sus usuarios. No puede deshabilitar esta función.
Aviso
La personalización del correo electrónico solo está disponible tras firmar el Acuerdo de licencia del producto de Xsolla. Para firmar el acuerdo, vaya a la sección Agreements de su Cuenta del editor.

¿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.

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

Desarrollo mediante bloques independientes

Le recomendamos que utilice el método más eficaz de desarrollo de correos electrónicos mediante bloques independientes. Este método tiene las siguientes ventajas:
  • 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

La mayoría de las aplicaciones de correo electrónico muestran un preencabezado como vista previa del correo. Debe añadir siempre un preencabezado. Estimula a los usuarios para que abran los correos recibidos. Las aplicaciones de correo electrónico pueden cortar el texto del asunto del correo electrónico y un preencabezado ayuda a los usuarios a entender el contenido del correo electrónico.

Longitud del código

Reduzca la longitud del código para que los correos electrónicos aparezcan correctamente. Por ejemplo, Gmail y Yahoo tienen problemas para mostrar correos electrónicos de más de 100 KB.

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:

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

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

Recomendaciones adicionales para el desarrollo de correos electrónicos adaptativos.

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:

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.

  1. Seleccione la plantilla de correo electrónico en la lista desplegable.
  2. 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.
  3. Añada o modifique el diseño HTML del correo electrónico, teniendo en cuenta las recomendaciones.
  4. Para comprobar cómo se visualizará el correo electrónico, cambie al modo Preview.
  1. Compruebe la validez del código de correo electrónico.
  2. 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}} <>.
Nota
Los correos electrónicos no personalizados utilizan plantillas estándar de Xsolla.
Ejemplo de plantilla de correo electrónico:
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>
¿Te ha resultado útil este artículo?
¡Gracias!
¿Hay algo en lo que podamos mejorar? Mensaje
Lo sentimos
Por favor, cuéntanos por qué no te ha resultado útil este artículo. Mensaje
¡Gracias por tu mensaje!
Nos ayudará a mejorar tu experiencia.

Seguir leyendo

Última actualización: 18 de Septiembre de 2024

¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.

Informar de un problema
Nos esforzamos por ofrecer contenido de calidad. Tus comentarios nos ayudan a mejorar.
Déjanos tu correo electrónico para que te podamos responder
¡Gracias por tu mensaje!