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 |
|
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:
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 | 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
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)