Plantillas de Email

From SinergiaCRM - Wikisuite
Revision as of 12:47, 11 August 2021 by Xènia.Casanovas (talk | contribs) (Página creada con «== Conceptos básicos == El acceso a las ''Plantillas de Email'' debe hacerse desde el menú de acciones del módulo ''Campañas''. Se podrá escoger si ver el listado de…»)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

Conceptos básicos

El acceso a las Plantillas de Email debe hacerse desde el menú de acciones del módulo Campañas. Se podrá escoger si ver el listado de plantillas existentes o crear una de nueva.


Plantillas Email.jpg


Selección y tipos de editores de plantillas

En SinergiaCRM basado en Suite cabe la posibilidad de que un usuario defina que editor quiere utilizar en el menú superior derecho, perfil, en el campo "Tipo de editor". Hay tres opciones:


Perfil usuario.png


a) HTML directo. Editor de texto plano que está enfocado en integrar el código HTML de plantillas externas ya que no ofrece ninguna herramienta que facilite la edición del código HTML.


HTML Directo.jpg


b) Mozaik. Editor de texto WYSIWYG que está enfocado en facilitar la introducción de bloques de código en plantillas creadas desde el inicio con este editor, o en plantillas que ya contienen información y que fueron creadas con este mismo editor.


Mozaik.jpg


c) TinyMCE. Editor de texto WYSIWYG ya incluido en la anterior versión de SinergiaCRM basada en Sugar.


TinyMCE.jpg


Este editor ofrece una solución intermedia con la que se puede:

- Crear plantillas desde su inicio de una manera secuencial y disponiendo de las típicas herramientas de un editor de texto: Negrita, Fuente, Tamaño de fuente, Color, Alineación del texto, integrar multimedia, etc.

- Maquetar visualmente la estructura de la plantilla.

- Editar el código HTML de plantillas externas a través del Menú Herramientas / Código fuente o desde el icono <> de la barra de herramientas.



Importante: 
- Cuando se crea un usuario en SinergiaCRM, este tendrá configurado el editor TinyMCE.
- Dependiendo de las necesidades de la entidad y atendiendo a las características de cada editor de texto, desde SinergiaTIC os recomendamos usar TinyMCE o Mozaik para trabajar con las plantillas. 
- Además, es necesario un criterio común en la entidad para determinar quién y cómo se realiza el trabajo con las plantillas. Para determinar estos criterios tened en cuenta el siguiente apartado de Editores HTML y Usuarios


Editores HTML y Usuarios

SinergiaCRM permite configurar el editor de texto con el que quiere trabajar cada usuario. Esta flexibilidad ofrece ventajas pero, a la par, posibilita escenarios de riesgo a tener en cuenta por la entidad:

- Al editar una plantilla creada con TinyMCE desde el editor Mozaik se modifica el código de la plantilla y puede que se pierdan algunos estilos o que se desconfigure la maquetación de la plantilla. Por el contrario, si se crea una plantilla creada con el editor Mozaik y más adelante se edita con el editor TinyMCE la plantilla no es modificada.

- La modificación sucede aunque la plantilla sea editada con un usuario diferente al que la creó. Es decir, si la plantilla fue creada por un usuario 1 que tuviese configurado el editor TinyMCE y la edita un usuario 2 que tiene configurado el editor Mozaik, el código HTML de la plantilla será modificado.


Para gestionar este posible problema sería bueno aplicar alguna de las siguientes recomendaciones:

- Disponer de un usuario exclusivo en el CRM con el cual realizar todas las ediciones de plantillas.

- Tener configurado el mismo editor en los diferentes usuarios.

- Actuar con precaución a la hora de editar las plantillas, por ejemplo, asegurándonos de que el usuario que vaya a modificar la plantilla tiene configurado el editor TinyMCE.

- Actuar con precaución si soy un usuario que tengo configurado el editor Mozaik.


Por último, se recomienda revisar los editores de cada usuario y aplicar la política acordada.


Creación de una plantilla

El procedimiento para crear una plantilla de correo electrónico dependerá del editor que se tenga configurado.

Es posible incorporar a una plantilla de correo del CRM código HTML procedente de plantillas externas (por ejemplo, de MailChimp o aplicaciones similares). Sin embargo, cabe tener en cuenta que el editor del CRM es estricto en el cumplimiento de los estándares HTML por lo que es posible que algunos elementos de dichas plantillas sean ignorados. En cualquier caso, desde el propio editor del CRM es perfectamente posible diseñar desde cero plantillas como las que se suelen utilizar habitualmente en envíos electrónicos.


Insersión de variables

En la creación de la plantilla es relevante destacar la posibilidad de personalizar el envío incorporando campos de datos en el cuerpo del mensaje (por ejemplo, para incluir un saludo con el nombre de la persona destinataria).

Es posible añadir estas variables al momento de crear una plantilla de email desde "Insertar Variable" en el editor.


Insertar variable.jpg


Para conseguir el nombre de la variable deseada, en el primer desplegable se escoge el módulo al que pertenece el campo, en el segundo se escoge el nombre del campo que se desea insertar en el cuerpo del mensaje y en el último espacio aparece el nombre de la variable. Para añadirla al cuerpo del texto se puede usar el botón "Insertar" y la variable se añadirá donde esté el cursor.


Publicación de imágenes

En función del editor que se use, las imágenes se incorporarán a las plantillas a través de un enlace o subiendo un archivo de tipo imagen.

Con TinyMCE las imágenes que deban ser incorporadas a una plantilla de correo deben estar subidas previamente en alguna ubicación web pública desde donde puedan ser referenciadas mediante su dirección URL específica. Por ejemplo, podría crearse una carpeta en el sitio web de la organización que se llame imagenes_boletines y guardar en ella todas las imágenes. Lógicamente, una imagen que vaya a ser usada en varias plantillas (logos de la entidad o de redes sociales, etc.) bastará con subirla una sola vez.

Una vez subidas las imágenes, cada una de ellas tendría una URL del tipo http://www.entidad.org/imagenes_boletines/foto1.jpg. Al insertar una imagen en la plantilla (Insert/edit image), aparecerá la siguiente ventana emergente, en la que deberá indicarse la citada URL.


Editor plantillas imagenes.jpg


Al indicar la URL automáticamente se rellenarán las casillas de las dimensiones. El resto de casillas pueden rellenarse o no según convenga.

Se pueden subir imágenes de los tipos habituales utilizados en internet: jpg, gif, png. Las dimensiones y la resolución son libres, pero cabe tener en cuenta que cuanto más grande sea la imagen más tiempo necesita para cargarse. En este sentido lo ideal es tratar de buscar un buen equilibrio entre calidad y peso. Por ejemplo, en Photoshop existe una opción llamada Guardar para web especialmente pensada para lograr este objetivo. De todos modos, cualquier editor gráfico permite trabajar estos elementos sin mayores dificultades. Cabe tener en cuenta también que habitualmente el cuerpo de un boletín electrónico convencional no suele superar los 600 píxeles de ancho, por lo que las imágenes tampoco deberían superar este ancho.


Con Mozaik las imágenes pueden ser incorporadas también a través de un enlace o subiendo el archivo directamente desde el ordenador. AL cargar el archivo, se rellenarán automáticamente las casillas de las dimensiones. El resto de casillas pueden rellenarse o no según convenga.


Editor plantillas imagenes 02.jpg


Insertar enlace en imagen

Las imágenes incorporadas en el cuerpo de texto del correo electrónico pueden estar vinculadas a un enlace. De esta manera, al hacer clic encima de esta se redireccionará al usuario a la página web que se desee.

Para insertar el enlace en la imagen, esta debe estar seleccionada, pero tiene una particularidad. Para hacerlo correctamente hay dos maneras:

- Pulsar con el ratón a la izquierda de la imagen y arrastrar hacia la derecha manteniendo pulsado el ratón.

- Pulsar a la izquierda de la imagen y pulsar la tecla Shift (o mayús) + flecha hacia la derecha una o dos veces.

Una vez seleccionada la imagen se puede insertar el enlace seleccionando la opción Insertar/Editar enlace desde el menú superior Insertar o desde el botón derecho del ratón.


Insertar enlace en imagen.jpg


Plantillas basadas en tablas

La práctica totalidad de los boletines electrónicos basan su estructura (maquetación) en una o más tablas. Antiguamente este sistema de maquetación se utilizaba también para los sitios web en general, pero su uso no cumplía con los estándares y se fue abandonando con la progresiva evolución de las hojas de estilo (CSS). Sin embargo, en los boletines se ha mantenido el uso de las tablas porque simplifica enormemente el diseño de los mismos y porque los clientes de correo electrónico (es decir, las aplicaciones en las que los destinatarios visualizarán los boletines recibidos) no suelen realizar una gestión del HTML/CSS tan completa como la que realizan los navegadores. En este sentido, las tablas ayudan a lograr una visualización correcta y homogénea de los contenidos de un boletín en cualquier cliente de correo, ya sea web o de escritorio (Outlook, Gmail, Thunderbird, etc.).

El diseño de una tabla se realiza igual como se haría en un documento de texto tipo Word, por ejemplo. Una tabla contiene un cierto número de filas y cada fila un cierto número de celdas. Dentro de cada celda se puede colocar contenido o no (a veces se usan para dejar espacio libre o para separar celdas con contenido). También se puede jugar con la combinación de celdas para lograr, por ejemplo, una cabecera de una sola celda en la que meter una imagen que ocupe todo el ancho del boletín.

Normalmente las tablas no se ven, es decir, sus bordes (tanto los exteriores como, sobre todo, los de las celdas interiores) son transparentes, pero están ahí, marcando los límites espaciales del boletín y de cada una de sus partes.


Importación de plantillas externas

Primero de todo, informamos de que no se puede asegurar que la integración de código HTML externo al CRM se vaya a visualizar de igual forma que en el aplicativo externo. 

Por criterios de seguridad relativos a estándares web, tanto SinergiaCRM como otros aplicativos, disponen de reglas de seguridad que realizan modificaciones en el código HTML que se inserta en el CRM. Estas modificaciones automáticas son realizadas para evitar vulnerabilidades y pueden generar una pérdida en las características de la plantilla, ya sea en aspectos de maquetación como en alguno de los estilos que tenga la plantilla.


Actualmente existen múltiples herramientas de marketing electrónico como Mailchimp que permiten el diseño de boletines u otros formatos de correo a partir de plantillas predefinidas más o menos vistosas. Existe la posibilidad de usar una de estas plantillas externas en el CRM, mediante el copiado y pegado del correspondiente código HTML de la plantilla.

Una vez copiado el código de la plantilla en la herramienta de origen deberá pegarse en el editor del CRM mediante el desplegable Herramientas > Código fuente (os recomendamos hacerlo en el editor TinyMCE y desaconsejamos hacerlo en Mozaik ya que su cometido no es integrar código HTML externo). Al pulsar el botón en cuestión aparecerá una ventana emergente que mostrará el contenido actual de la plantilla con las etiquetas HTML visibles. Puede borrarse todo lo que aparezca y a continuación pegar el código procedente de la herramienta externa para finalmente pulsar el botón Update, cerrándose la ventana emergente y así ver la plantilla en el editor visual.


Tras realizar varias pruebas de integración de plantillas creadas con diferentes aplicativos externos al CRM, recomendamos tener en cuenta los siguientes apartados ya que pueden aplicar dependiendo de la herramienta externa utilizada por la entidad.


Mailerlite

Por las pruebas realizadas, sus plantillas se integran correctamente y no es necesario realizar modificaciones.


Mailchimp

1. Algunos editores introducen metainformación que no es necesaria para la maquetación de la plantilla y que el editor HTML de SinergiaCRM interpreta como líneas de texto, por lo que habrá que eliminar esa información. Esto lo podemos hacer de una manera visual desde la vista de edición del propio editor o, si se dispone del conocimiento básico del lenguaje HTML, también lo podemos realizar desde el editor HTML. Por ejemplo, en algunas plantillas generadas por Mailchimp se introduce el siguiente código tras la etiqueta <HEAD> y habría que eliminarlo:

<!-- NAME: 1:2:1 COLUMN - FULL WIDTH -->
<!--[if gte mso 15]>
	 <xml>
	      <o:OfficeDocumentSettings>
	      <o:AllowPNG/>
	      <o:PixelsPerInch>96</o:PixelsPerInch>
	      </o:OfficeDocumentSettings>
	</xml>
<![endif]-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>*|MC:SUBJECT|*</title>


2. Igual que en el punto anterior, en algunas plantillas generadas por Mailchimp se introduce el siguiente código tras la etiqueta <BODY> y habría que eliminarlo.

<!--*|IF:MC_PREVIEW_TEXT|*-->
<!--[if !gte mso 9]><!----><span class="mcnPreviewText" style="display:none; font-size:0px; line-height:0px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; visibility:hidden; mso-hide:all;">*|MC_PREVIEW_TEXT|*</span><!--<![endif]-->
<!--*|END:IF|*-->


3. Establecer una anchura al div general desde la interfaz del editor. Para ello podemos arrastrar el delimitador de área más externo desde su lado derecho hacia el centro.


Margen div exterior.JPG


Volver al inicio