Pré-requisitos:

*Conhecimento em programação HTML
Caso contrário sugerimos a contratação de um programador ou agência que possa criar seu tema.

- Introdução

    É possível o desenvolvimento de temas personalizados para uso no criador de newsletter do Enviou, e tornar seus envios ainda mais únicos.

    Existem algumas diferenças em relação ao desenvolvimento web convencional que permeiam o processo de criação, sendo que algumas serão abordadas neste artigo.

    O que é um tema de newsletter do Enviou? Qual é a diferença de e-mail design para web design?
 
     O tema de newsletter do Enviou é composto por um conjunto de estruturas em HTML organizadas estéticamente para exibir as informações, conteúdo e ofertas da loja do usuário Enviou através do e-mail marketing. As informações de produtos e detalhes, entre outras, substituirão variáveis presentes no tema, sendo que as informações já estarão cadastradas na conta do usuário para esse fim. 

    Disponibilizamos exemplos dos arquivos HTML de um tema para download, de forma que ajude a compreensão sobre a estrutura do tema e a relação entre os blocos, tornando possível a visualização desses códigos na prática.

     Lembrando que é possível criar temas com outros tipos de apresentação além do exibido no tema exemplo. O mais importante é seguir os padrões estruturais aqui descritos para o algoritmo do aplicativo conseguir manipulá-lo corretamente.

    Se tratando de um tema para e-mail, a maior causa de erros é o uso da sintaxe CSS de programação atrelada ao HTML. Para desenvolver temas que possibilitem a leitura do e-mail em diversos aplicativos e dispositivos de interação por e-mail, o código deverá ter seu estilo composto inteiramente de forma inline pela sua sintaxe .

Faça o download do tema exemplo: Clique Aqui!

Descrição dos arquivos do tema exemplo e suas funções:

Para cada tipo de conteúdo gerado pelo aplicativo, um padrão de arquivos deverá estar contido no tema para este ser usável.

    A tabela a seguir servirá como referência para ser possível entender quais blocos serão necessários para cada tipo de recurso do Enviou que o tema dará suporte e será compatível:

1- Estrutura do tema

    A estrutura do tema é o HTML inicial, onde as informações e blocos de código serão ordenados, e deverá seguir a estrutura padrão de um arquivo HTML convencional contendo header e body.

    Os blocos de código deverão ser representados na estrutura do tema com a variável correspondente. Esta variável será substituída e poderá ter o seu conteúdo replicado pelo aplicativo, dependendo das opções escolhidas pelo usuário.

Como funciona:
    O Enviou buscará as informações configuradas na conta e estas serão inseridas no layout do tema, substituindo as variáveis na estrutura e demais blocos.

    É possível reprogramar a fonte das imagens de ícones e botões padrão na estrutura do tema, assim como adicionar novos, para fins de personalização do tema, substituindo as informações geradas por padrão pelo Enviou. Para isto, siga o padrão abaixo e substitua as palavras em destaque pelos dados desejados:

EXEMPLO:

<a href="[NOME_DA_REDESOCIAL_URL]" target="_blank"><img src="URL_DA_IMAGEM_DO_ÍCONE" alt="NOME_DA_REDESOCIAL" /></a>

    Caso queira colocar um ícone personalizado para rede social, você substituirá o texto em destaque do modelo acima, e o resultado ficará similar ao exemplo a seguir:

<a href="[LOJA:Facebook_URL]" target="_blank"><img src="http://host-imagem-web.com.br/data/enviou/temas/padrao/fb.jpg" alt="Facebook" /></a>

    Para botões, você deverá fazer o mesmo procedimento, porém se baseando no modelo exemplo abaixo:

<a href="URL DO BOTÃO OU VARIÁVEL DE URL" target="_blank" ><img src="URL_IMAGEM_DO_BOTÃO" alt="DESCRIÇÃO DO BOTÃO" ></a>

 Para mudar os ícones e botões, será preciso ter as imagens hospedadas online.

 

2- Bloco de produtos do tema

    O bloco de produtos do tema é composto pela exibição dos produtos no tema, e a variável que o simboliza o mesmo na estrutura do tema é [PRODUTO:BLOCOS] . O bloco não poderá conter o headere body .

    É possível exibir mais de um tipo de produto por bloco, no entanto será necessário identificar o sufixo na variável de acordo com a ordem do produto no bloco, seguindo a variável da propriedade do produto em questão. Isso será útil para criar temas com a exibição de mais um produto por linha.

    Por exemplo, se eu desejo identificar 3 produtos no bloco, haverão 3 variáveis de preços: [PRODUTOS:Preco_De_RS_1] , [PRODUTOS:Preco_De_RS_2] , [PRODUTOS:Preco_De_RS_3] . O que distinguirá estas informações é o sufixo “_X” ( Onde X equivale ao número da posição do produto no bloco)

Como funciona:
    O Enviou buscará as informações configuradas na conta através do XML dos produtos da loja, e os produtos selecionados durante a criação de newsletter serão substituídos pelo bloco fixo de HTML com as variáveis de produtos e relacionados preenchidas.

3- Bloco do banner

    O bloco do banner é composto pelo código que definirá a exibição do(s) banner(s) na estrutura do tema, e a variável que simboliza este código na estrutura do tema denomina-se [PRODUTO:ISBANNER]. O bloco não poderá conter o header e o body.

4- Bloco de reviews TrustVox

    É possível personalizar a aparência da exibição dos reviews adquiridos dos produtos no Enviou através da integração TrustVox. Para isso, será necessário reprogramar o bloco de reviews.

    A variável que simboliza este código denomina-se [BLOCO.PRODUTO.REVIEW_X], sendo que X no sufixo é o identificador do produto no bloco de produtos ou no bloco de produtos do carrinho.

5- Bloco de produtos do carrinho

    Muito similar ao bloco de produtos, no entanto o sistema utilizará esta estrutura apenas quando o layout tratar de informação gerada no envio para recuperação de carrinhos abandonados. O bloco de produtos do tema é composto pela estrutura de exibição dos produtos, e a variável que o simboliza na estrutura do tema é [CARRINHO.PRODUTOS] .

6- HTML Exemplo

    O HTML Exemplo é uma prévia do tema para visualização do usuário. Ele se trata de uma estrutura do tema completa, porém preenchido com constantes de imagens, preços e etc; e tem o propósito de entendimento da visualização completa do layout do e-mail criado, resultado da automação do aplicativo Enviou, para o usuário entender o tema e tomar decisões com base nisso.

    O HTML Exemplo deverá conter o header e o body normalmente, como uma peça completa de HTML com os blocos preenchidos.

7- Ícone do tema

    Junto do tema, será preciso um ícone para ser exibido ao lado da descrição do tema na conta do cliente. Este ícone se trata de uma imagem, com as dimensões de 188 pixels de largura e 60 pixels de altura.

Como instalar o tema

    Após ter todos os dados do tema, crie os blocos em arquivos .HTML separados, e nomeie o bloco de produtos com o sufixo referente ao número de produtos no bloco (exemplo: bloco_produtos_2x1 trata-se de um bloco com dois produtos por bloco ou linha) e a seguir compacte os arquivos, da mesma forma que o modelo exemplo disponibilizado neste artigo. Feito isso seu tema estará finalizado!

    Ao concluir a criação do tema, envie-nos um e-mail para atendimento@enviou.com.br contendo o arquivo compactado em anexo, solicitando a inclusão e informando o site do cliente que deseja instalar o tema.

    Instalaremos o seu tema na conta solicitada em até 3 dias úteis. Em caso de divergências ou problemas com o tema, nossa equipe entrará em contato.

Espero que este artigo tenha sido de grande ajuda, se possível avalie este artigo.

Boas Vendas!

Encontrou sua resposta?