# Sintaxe dos templates de Rich Media ## Estrutura do template Um template é simplesmente um arquivo .zip que pode conter HTML, JavaScript, CSS e imagens como ativos de Rich Media. O arquivo deve conter um arquivo **index.html** em sua raiz. ## Placeholders do template Você pode usar placeholders nos templates de Rich Media que permitirão alterar e localizar os valores no conteúdo de Rich Media. Um placeholder deve seguir o formato abaixo: ```liquid {{ Placeholder name | Type | Default value }}` ``` Onde: * **Nome do placeholder** — é o nome do placeholder que será visível no editor de Rich Media. * **Tipo** — é o tipo do placeholder. O tipo pode ser qualquer um dos seguintes valores: * **color** — entrada de cor * **text** — entrada de texto * **html** — área de texto (texto com várias linhas) * **Valor padrão** — valor padrão que é usado se nenhum valor for fornecido no editor. Se nenhum for definido, o **Nome do placeholder** é usado como valor padrão. Exemplo: ```liquid {{Header text|text|Tell Us What You Think}}` ``` ## Adicionando Pushwoosh.json Você pode agrupar placeholders para que eles fiquem vinculados no editor de Rich Media: Interface do editor de Rich Media mostrando placeholders agrupados e vinculados em grupos de entrada

Interface do editor de Rich Media mostrando placeholders agrupados e vinculados em grupos de entrada

Para conseguir isso, adicione o arquivo **pushwoosh.json** ao arquivo com seu template de Rich Media ao lado do arquivo **index.html**. A estrutura do arquivo é muito simples e deve ser autoexplicativa: ``` { "input_groups": [ ["Logo image URL", "Logo background color"], ["Topic text", "Topic text color", "Topic background color", "Sub-topic text"], ["Main text", "Text background color"], ["Button text", "Button URL", "Button text color", "Button background color"] ] } ``` ## Exemplo Formulários personalizados para pesquisas são um caso de uso comum para templates de rich media personalizados. Esses formulários permitem que você colete feedback valioso do usuário. Um template pré-projetado com um formulário de pesquisa personalizado está disponível nos templates Padrão. Use isso como ponto de partida para suas próprias pesquisas. Exemplo de template de formulário de pesquisa personalizado com campos de entrada para coletar feedback do usuário

Exemplo de template de formulário de pesquisa personalizado com campos de entrada para coletar feedback do usuário

Ao criar formulários, [siga algumas das melhores práticas](#best-practices-for-custom-elements-in-rich-media) para garantir compatibilidade e funcionalidade perfeita dentro do Editor de Rich Media. Aqui está outro exemplo de um dos templates padrão disponíveis no Control Panel. ```txt

``` ## Monitore o desempenho de Rich Media personalizado Você também pode monitorar o desempenho do conteúdo de Rich Media personalizado que você cria e envia para a Pushwoosh como um arquivo ZIP. Você pode rastrear como as pessoas interagem com sua Rich Media por: * Cliques em botões * Cliques em links * Envios de formulário Para permitir que a Pushwoosh rastreie essas interações: 1. Adicione um atributo "id" a cada elemento que você deseja rastrear. Por exemplo: **Para rastrear cliques em links:** ```html … ``` **Para rastrear envios de formulário:** ```html ``` **Para rastrear cliques em botões:** ```html // type="button" is required ``` 2. Adicione um link para o arquivo JavaScript da CDN no final da tag: ```html ``` ## Melhores práticas para elementos personalizados em Rich Media ### Gerencie os estilos CSS com cuidado Garanta que seus estilos CSS sejam específicos para evitar conflitos com os estilos do Editor de Rich Media. Usar estilos de baixa especificidade, como aqueles aplicados a nomes de tags ou nomes de classes comuns, pode afetar a aparência do Editor de Rich Media. É melhor manter seus estilos locais — envolva seu conteúdo em um contêiner com um ID ou classe únicos e use este identificador em seus seletores CSS para elementos filhos. ### Inclua bibliotecas externas Você pode integrar bibliotecas CSS ou JavaScript (como Font Awesome, Bootstrap, Tailwind CSS, etc.) para utilizar seus métodos, ícones, fontes, animações e muito mais.

{{Topic text|text|TOPIC TEXT}}