Normalmente los mensajes pueden ser creados y editados a través del editor de mensajes (WYSIWYG) o del editor de código HTML a través de la plataforma. Sin embargo, emBlue también permite ENRIQUECER ESTOS MENSAJES insertando código HTML directamente dentro de los campos de la base de datos que se va a cargar, para que automáticamente esta información sea tomada por el mensaje con el formato que se ha establecido.


Para qué sirve?
Los mensajes enriquecidos tienen varios usos, pero principalmente sirven cuando se quieren dar un formato específico a los campos personalizados de cada comunicación.


Veamos un ejemplo …
Tenemos esta base de datos con 3 registros donde detalla la información respectiva para hacer una lista de clientes correspondientes a cada persona dentro de un equipo de trabajo.

 

EMPRESA ÁREA NOMBRE

APELLIDO

EMAIL

LISTA DE CLIENTES

IMAGEN

emBlue ÁREA DE DIRECCIÓN Daniel Drault alejolopez@enash.co TIGO; COPA AIR; CLARO; FRAVEGA http://www.embluemail.com/images/equipo/daniel.jpg
emBlue ÁREA DE OPERACIONES Julian Soldan alejolopez@alejolopez.com BBVA; MOVISTAR; FIBERTEL http://www.embluemail.com/images/equipo/julian.jpg
emBlue ÁREA COMERCIAL Sandra López alejandroloa@hotmail.com LOOKHUNTERS; KIA; HAVAS http://www.embluemail.com/images/equipo/sandra.jpg

 

* Recordemos que para subir un campo con elementos múltiples, como el caso de LISTA DE CLIENTES la separación debe ser por ; (punto y coma) para que la plataforma puede identificarlo. Ver aquí

Queremos que el mensaje se vea de la siguiente manera:

ale_img_1

Para logralo, hemos ingresado en la base de datos original los distintos comandos HTML que nos permiten optimizar estos  campos.
* En la base de datos de ejemplo, se pueden ver distintas opciones para realizarlo

ÁREA NOMBRE APELLIDO EMAIL LISTA DE CLIENTES IMAGEN
ÁREA DE DIRECCIÓN Daniel Drault daniel@ embluemail.com TIGO; COPA AIR; CLARO; FRAVEGA <img src=”http://www.embluemail.com/images/equipo/daniel-soldan.jpg” alt=”Mountain View”>
ÁREA DE OPERACIONES Julian Soldan julian@ embluemail.com BBVA; MOVISTAR; FIBERTEL <img src=”http://www.embluemail.com/images/equipo/julian-drault.jpg” alt=”Mountain View”>
ÁREA COMERCIAL Sandra López sandra@ embluemail.com LOOKHUNTERS; KIA; HAVAS <img src=”http://app.embluemail.com/ImagenesMoxie/1/images/sandra.jpg” alt=”Mountain View”>

 

Qué comandos se usaron para este ejemplo?

1) CAMBIAR COLOR DE FONDO Y DE TEXTO EN UNA CELDA “ÁREA”

<td> es el comando para una celda y los estilos que pertenecen a esta. Para el primer ejemplo estamos dando tamaño y tipo de fuente a la celda relacionada con DANIEL DRAULT
STYLE = FONT-SIZE: 14 pt **tamaño de la fuente 14**
= FONT-FAMILY Arial, Helvetica, Sans-Serif ** estilo de fuentes de uso universal**
= COLOR: #ffffff; ** estilo de la fuente, el código hexagesimal #ffffff que es el que pertenece al blanco**
= Backrgound-color: #008000 ** estilo del fondo, estamos dando la orden con el código para color de fondo verde**

 

2) CREAR UNA LISTA CON VIÑETAS “LISTA DE CLIENTES”

La creación de una lista tienen varias opciones, pueden ser creadas con números o viñetas. Para el caso de viñetas estamos dando las siguientes órdenes.

<UL> **Este es el comando que sirve para la creación de una lista, con sus diferentes propiedades, en este caso asignamos la propiedad para que tenga viñetas y dimos estilos a estas viñetas.
TYPE= Square ** Estamos indicando el tipo de viñeta, en este caso cuadrado, podrán ver que para la siguiente persona le cambiamos el estilo a TYPE = Disc **
<li> es el comando que nos permite diferenciar los elementos de la lista, separando cada elemento por medio de un renglón. Este comando debe tener inicio y final de cada elemento </li>

En el ejemplo también creamos una opción distinta y más sencilla, pero también mas limitada para crear la lista, separando los elementos simplemente por espacios, en este caso no tendría viñetas. A través del comando <br>. Se puede ver en el tercer elemento de la base de datos (este comando no necesita la función de cerrarse </br>)

 

3) ASIGNACIÓN DE UNA IMAGEN

A través de esta función podes asignar distintas imágenes personalizadas dentro del email.
Pudiendo cambiar por ejemplo cabezales o incluso la imagen de cada persona.

Lo que usamos fue el comando para identificar dónde se encentra la imagen o el elemento que estamos asignando.
<IMG src=www.URL.COM>” **Este comando indica en que URL se encuentra la imagen **

Así mismo podemos asignar tamaño de alto y año de la imagen, describiendo el estilo.
” style=”width:304px;height:228px”>

Así mismo podemos asignarle el texto descriptivo a dicha imagen agregando el comando – alt=”imagen de ejemplo ”

 

4) CÓMO SE VERÍA CONSTRUIDO EL HTML EN EL EDITOR DE MENSAJE?

Solo debe seleccionar los campos personalizados e indicar su disposición dentro del mensaje

ale_img_2

 

Con la función de MENSAJE ENRIQUECIDO se pueden usar los distintos comandos HTML. Para encontrar mas información sobre dichos comandos y lograr emails aún más poderosos, puede consultar:

http://es.html.net/tutorials/html/ (Español)
http://www.w3schools.com/html/ (Ingles)

 

Please wait...