Pular para o conteúdo
Guias do usuárioSuporte Solicitar demonstração Entrar
Pushwoosh.com

Sintaxe dos templates de Rich Media

Estrutura do template

Anchor link to

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

Anchor link to

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:

{{ 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:

{{Header text|text|Tell Us What You Think}}`

Adicionando Pushwoosh.json

Anchor link to

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

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

Anchor link to

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

Ao criar formulários, siga algumas das melhores práticas 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.

<!DOCTYPE html>
<html>
<head>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
            font-family: "Open Sans";
        }
        .main {
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .logo {
            width: 100%;
            height: 15%;
            background-image: url('{{Logo image URL|text|https://www.pushwoosh.com/wp-content/themes/pushwoosh/img/logo.png}}');
            background-position: 50% 50%;
            background-size: 50%;
            background-repeat: no-repeat;
            background-color: #{{Logo background color|color|343434}};
        }
        .topic-wrapper {
            width: 100%;
            height: 30%;
            text-align: center;
            display: table;
            color: #{{Topic text color|color|FFFFFF}};
            background-color: #{{Topic background color|color|23B7A4}};
        }
        .topic {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .topic-wrapper h1, .topic-wrapper p {
            margin: 0;
        }
        .padding-wrapper {
            width: 100%;
            height: 55%;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            padding: 0 2% 0 2%;
            background-color: #{{Text background color|color|FFFFFF}};
        }
        .text-wrapper {
            height: 70%;
            width: 100%;
            padding: 2% 0 2% 0;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            overflow: hidden;
        }
        .text {
            width: 100%;
            height: 99%;
            overflow: auto;
            padding-right: 15px;
        }
        .button-wrapper {
            height: 30%;
            width: 100%;
            padding: 2% 0 2% 0;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .button {
            display: table;
            width: 100%;
            height: 100%;
        }
        .button a {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            font-size: 2em;
            text-decoration: none;
            color:#{{Button text color|color|FFFFFF}};
            border-radius: 20px;
            background-color: #{{Button background color|color|23B7A4}};
        }


        @media only screen
        and (orientation: landscape) {
            .padding-wrapper {
                height: 45%;
            }
            .logo {
                height: 20%;
            }
            .button a {
                border-radius: 10px;
            }
        }
    </style>
</head>
<body>


<div class="main">
    <div class="logo"></div>
    <div class="topic-wrapper">
        <div class="topic">
            <h1>{{Topic text|text|TOPIC TEXT}}</h1>
            <p>{{Sub-topic text|text|Subtopic here}}</p>
        </div>
    </div>
    <div class="padding-wrapper">
        <div class="text-wrapper">
            <div class="text">
                {{Main text|html|Main text here}}
            </div>
        </div>
        <div class="button-wrapper">
            <div class="button">
                <a href="{{Button URL|text|https://www.pushwoosh.com}}">
                    {{Button text|text|Submit}}
                </a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Monitore o desempenho de Rich Media personalizado

Anchor link to

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:

<a id=“my_link_1” href=“#”>…</a>

Para rastrear envios de formulário:

<form id=“my_form_1” action=“#” method=“GET”>…</form>

Para rastrear cliques em botões:

<button id=“my_button_1” type=“button”>…</button> // type="button" is required
  1. Adicione um link para o arquivo JavaScript da CDN no final da tag:
<script src="https://cdn.pushwoosh.com/richmedia-service/statistics/v1/richmedia-statistics.js"></script>

Melhores práticas para elementos personalizados em Rich Media

Anchor link to

Gerencie os estilos CSS com cuidado

Anchor link to

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

Anchor link to

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.