Aviso: o Zendesk fornece esse artigo somente para finalidades instrucionais. O Zendesk não oferece suporte nem garantia ao código. O Zendesk também não fornece suporte para tecnologias de terceiros, tais como JavaScript, jQuery ou CSS. Publique qualquer problema na seção de comentários abaixo ou procure uma solução online.

As fontes personalizadas que você escolhe são uma forma de se expressar do mesmo jeito que as roupas que você usa. Elas podem ser radicais e inspiradoras, legais e calmas ou até mesmo exageradamente brincalhonas, tipo, hum, comic sans, por exemplo. No final, entretanto, a fonte que você escolher define quem você é e ilustra a mensagem que você está tentando passar. Bem, com essa dica da semana podemos trabalhar na alteração das fontes no modelo de e-mail para que suas mensagens enviadas possam deixar de ser assim:

Screen_Shot_2014-07-28_at_8.34.38_AM.png

( Fig 1: fonte chata)


Para ser assim:

Screen_Shot_2014-07-28_at_8.32.51_AM.png

(Fig 2: uma fonte muito legal)

Para atingir esse objetivo, você vai deve editar o placeholder de conteúdo que está dentro do modelo HTML de e-mail para localizar os estilos padrão e reescrevê-los. Para fazer isso, vamos ter que substituir o placeholder atual {{content}} por uma variação do modelo a seguir.

{% 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 %}

Um pouco mais de informações sobre esse modelo:

  • O código funciona SE o conteúdo padrão contém Lucida Sans Unicode, Lucida Grande e etc.
  • Quando estiver ativo, vai usar a substituição da família da fonte, do tamanho da fonte e da cor da fonte.
  • Se não estiver ativo, vai pular para OUTRA em que simplesmente vai enviar o {{content}} padrão.
  • O código deve ser exatamente correto para que ele seja disparado.
  • Para o processo de substituição, você precisa preencher o estilo padrão e depois o estilo desejado (por exemplo, substitua: "color:default" (padrão);"color:desired" (desejada).

Para substituir o padrão, precisamos localizar primeiro o padrão do placeholder {{content}}. A maneira mais fácil de fazer isso é enviar um e-mail de teste para você mesmo. Eu uso Gmail neste exemplo, portanto, se você tiver uma conta Gmail, pode ser mais fácil de acompanhar.

Observar: o conteúdo padrão não é necessariamente o padrão que está visível no modelo HTML de e-mail.

Para localizar e substituir o placeholder {{content}}

  1. Crie um ticket de teste ao qual você possa responder. Responda ao ticket de teste que vai ativar o gatilho para "Notificar o solicitante sobre atualização de comentarário". Sua conta do Gmail deve receber um e-mail da sua instância de Suporte Zendesk.
  2. No seu aplicativo de e-mail, localize a habilidade de Exibir original. A configuração do Gmail para isso vai aparecer assim:

    Show_Original.png
  3. No texto original, localize o texto estilizado que o Suporte Zendesk usou como padrão para {{content}}. Isso pode parecer um pouco como uma caçada selvagem, mas pode ser encontrado procurando por uma palavra-chave ou por uma frase que você usou em sua resposta do ticket, como mostra a imagem abaixo.

    Defaults.png

    A frase que eu procurei está em amarelo, o estilo padrão está destacado em verde.
  4. Agora que temos nossos estilos de conteúdo padrão, podemos substituir o conteúdo no modelo HTML pelo o nosso escolhido. Localize a marcação do conteúdo no modelo HTML e cole o novo modelo de conteúdo no lugar do conteúdo original. Deve se parecer com a imagem em anexo

    Screen_Shot_2014-07-28_at_7.58.06_AM.png

    Esta é a parte especial. Mantendo o formato em mente ( substituia "color:default"(padrão) por "color:desired" (desejada)), agora temos que substituir os estilos padrão por nossos estilos desejados. Neste momento, ajuda se você copiar e colar as informações encontradas no passo 3 nas posições padrão do passo 4. Por exemplo, eu é preciso garantir que a fonte padrão contém "Lucida Sans Unicode, Lucida Grande, Tahoma, Verdana, sans-serif" e substitua pelo estilo de fonte desejado. Vamos dar uma olhada mais detalhada no modelo aqui:

    Isso substitui minha fonte atual por uma Helvetica modernosa:

    | replace: "font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', Verdana, sans-serif;", "font-family: Helvetica, serif;"

    Isso deixa o tamanho da minha fonte bem legível:

    | replace: "font-size: 14px;", "font-size: 30px;"

    Isso muda a cor da fonte para um lindo tom de marrom da terra:

    | replace: "color:#2b2e2f;", "color:#333300;"

    Tudo isso junto fica assim:

    {{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;"}}

    E esse código inteiro que vai fazer essas alterações.

    {% 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 %}

    Depois de substituir meu placeholder de conteúdo por esse, meus e-emails não vão mais ter o modelo de e-mail padrão do Suporte Zendesk, mas sim a fonte, cor e tamanho que eu escolhi. Agora temos o controle total sobre nosso modelo de e-mail e sobre a aparência das nossas mensagens! Lembre-se de que grandes poderes trazem grandes responsabilidades, portanto não quero ver muitos e-mails com fonte Papyrus por aí.

Powered by Zendesk