Las fuentes personalizadas que eliges son una muestra de personalidad, al igual que la ropa que vistes. Pueden ser provocadoras e inspiradoras, geniales y relajadas o, incluso superinformales* cof * comic sans* cof*. Al final, la fuente que elijas te define a ti e ilustra el punto al que estás intentando encontrar. Pues bien, con esta genial sugerencia de la semana, podemos trabajar en cómo alternar las fuentes de tu plantilla de correo electrónico para que los mensajes que envías pasen de verse como sigue:
(Figura 1: fuente vieja y aburrida)
a lo siguiente:
(Figura 2: una fuente bastante genial)
Para alcanzar esta meta, querrás editar el marcador de contenido que reside dentro de la plantilla HTML de correo electrónico, para ubicar los estilos predeterminados y reescribirlos. Para ello, debemos reemplazar el marcador de posición {{content}} actual con la variación a de la siguiente plantilla:
{% if content contains "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;" %}
{{content | replace: "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;", "font-family: Helvetica, serif;" | replace: "font-size: 14px;", "font-size: 30px;" | replace: "color:#2b2e2f;", "color:#333300;"}}
{% else %}
{{content}}
{% endif %}
Algo de información sobre esta plantilla:
- La declaración se ejecuta SI el contenido predeterminado contiene Lucida Sans Unicode, Lucida Grande, etc.
- Cuando se ejecute, activará el reemplazo de la familia de fuentes, el reemplazo del tamaño de la fuente y el reemplazo de color.
- Si no se ejecuta, omitirá el paso y pasará directamente a ELSE, punto en el cual simplemente enviará el {{content}} predeterminado.
- La declaración if debe ser exactamente verdadera para que se active.
- Para el proceso del reemplazo debes completar el estilo predeterminado seguido del estilo deseado (p. ej., replace: "color:default;", "color:desired;").
Para reemplazar el predeterminado, primero tenemos que ubicar el predeterminado del marcador de posición {{content}}. La forma más sencilla de hacerlo es enviarte un correo electrónico de prueba a ti mismo. En este ejemplo, uso Gmail, así que si tienes una cuenta de Gmail quizás te resulte más fácil usar esa cuenta.
Nota: El contenido predeterminado no necesariamente es el contenido predeterminado que se ve en la plantilla HTML de correo electrónico.
Para localizar y reemplazar el marcador de posición {{content}}
- Crea un ticket de prueba al que puedas responder. Responde al ticket de prueba, esto activará el disparador para "Notificar al solicitante sobre actualización en comentario". En tu cuenta de Gmail deberías recibir un correo electrónico de tu instancia de Zendesk Support.
- En tu aplicación de correo electrónico, busca la capacidad "Mostrar original". La configuración de Gmail para esto se muestra continuación:
- En el texto original, busca el texto de estilo que Zendesk Support usó como predeterminado para {{content}}. Puede parecer complicado, pero puedes encontrarlo buscando alguna palabra clave o frase que hayas usado en la respuesta de tu ticket, como se muestra en la imagen a continuación.
La frase que busqué está en amarillo, el estilo predeterminado está resaltado en verde. - Ahora que tenemos nuestros estilos de contenido predeterminados, podemos reemplazar el contenido en la plantilla HTML de correo electrónico con el nuestro. Busca el margen de contenido en la plantilla HTML y pega la plantilla de contenido nuevo en el sitio del contenido original. Debería verse parecida a la captura de pantalla adjunta
Ahora viene la parte delicada. Teniendo el formato en mente (replace: "color:default;", "color:desired;"), ahora tenemos que reemplazar los estilos predeterminados con nuestros estilos deseados. En este punto, sirve copiar y pegar la información que ubicamos en el paso número 3 en las posiciones predeterminadas del paso número 4. Por ejemplo, yo me aseguraría de que la fuente predeterminada contenga "Lucida Sans Unicode, Lucida Grande, Tahoma, Verdana, sans-serif" y la reemplazaría con mi estilo de fuente deseada. Veamos la plantilla más en detalle:
Lo siguiente reemplaza mi fuente actual con una moderna Helvetica:
| replace: "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;", "font-family: Helvetica, serif;"
Lo siguiente hace que mi tamaño de fuente sea más legible:
| replace: "font-size: 14px;", "font-size: 30px;"
Lo siguiente modifica el color de la fuente por un bonito tono café:
| replace: "color:#2b2e2f;", "color:#333300;"
En conjunto, todo lo anterior crea lo siguiente:
{{content | replace: "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;", "font-family: Helvetica, serif;" | replace: "font-size: 14px;", "font-size: 30px;" | replace: "color:#2b2e2f;", "color:#333300;"}}
Y el siguiente es mi enunciado completo con el que se producirán estos cambios.
{% if content contains "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;" %}
{{content | replace: "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;", "font-family: Helvetica, serif;" | replace: "font-size: 14px;", "font-size: 30px;" | replace: "color:#2b2e2f;", "color:#333300;"}}
{% else %}
{{content}}
{% endif %}Después de reemplazar el marcador de posición de mi contenido con esto, mis correos electrónicos ya no tendrán la plantilla de correo electrónico predeterminada de Zendesk, sino que tendrán mi fuente, color y tamaño personalizados. ¡Ahora tenemos el control total sobre nuestra plantilla de correo electrónico y sobre cómo se ven nuestros mensajes! Recuerda que un gran poder implica una gran responsabilidad, así que no quiero ver por ahí demasiados correos electrónicos con la fuente Papyrus.