Personalizar widgets e microsites com o editor de conteúdo

O editor de conteúdo permite que você crie widgets e microsites que correspondam perfeitamente à identidade da sua marca, garantindo uma experiência consistente e confiável para seus clientes. Um ponto de contato bem alinhado à marca é fundamental para gerar alto engajamento e adoção do programa.

Controles centralizados de branding

Você pode encontrar e atualizar com facilidade os principais elementos de design da sua marca usando a opção de estilo do widget ou do microsite. Todas as configurações de branding estão em uma seção dedicada de branding.

Widgets ou microsites têm aparências diferentes dependendo do contexto do usuário, como estar logado, encontrar um erro ou visualizar em um dispositivo móvel. Nossas prévias do editor permitem alternar facilmente entre todos os possíveis estados do seu widget ou microsite.

Observação: A prévia é mais aplicável a widgets (por exemplo, widgets de acesso instantâneo) e componentes (por exemplo, dinheiro, troca de recompensas). Para pré-visualizar microsites, você precisaria navegar pelas diferentes páginas de microsites para ver os estados.

Isso elimina a necessidade de concluir ações manualmente para ver como um componente ficará. Agora você pode editar com confiança o texto e o design de cada etapa da jornada do usuário, incluindo:

• Visualizações de usuário logado vs. deslogado
• Mensagens de erro e sucesso
• Diferentes etapas em um fluxo de várias partes (como verificação de saque em dinheiro)

Para personalizar o estilo da sua marca:

1. No menu de navegação à esquerda, selecione [Engage] → Conteúdo.

   • Para widgets, selecione Editar widgets e, para microsites, selecione Editar conteúdo.
2. No menu à esquerda, selecione se você deseja editar no Microsite ou no Widget.
3. Selecione o modelo de página em que você deseja fazer edições e, em seguida, selecione Estilo do widget/Estilo do microsite.
4. Selecione a cor da sua marca para alterar a cor principal presente no seu widget ou microsite.
5. Em seguida, selecione o estilo de fonte que você gostaria de usar.
6. [Opcional] Continue pelas opções de estilo restantes para personalizar totalmente a identidade da sua marca dentro do widget ou microsite.

Referência dos elementos do editor de estilo

Elemento de estilo	Descrição
Cor principal da marca	Essa cor será usada em diferentes elementos do seu widget ou microsite, portanto é importante concluir esta etapa. Selecione a cor principal da sua marca. Essa cor também é usada nas seções Botão primário e Botão secundário mais abaixo nas opções de edição.
Fonte	Selecione o estilo de fonte que você gostaria que estivesse presente no seu widget ou microsite.
Cor	Selecione as várias cores e destaques que você gostaria que estivessem presentes no seu widget ou microsite: • Fundo Selecione a cor que você gostaria que fosse o fundo do seu widget ou microsite. • Texto Você pode alterar a cor da fonte tanto do texto principal quanto do texto discreto dentro do widget ou microsite. • Cor de destaque Altere as cores dos seus destaques. Isso inclui elementos como abas ou ícones dentro do widget ou microsite. • Cores adicionais Você pode ajustar ainda mais as cores e os destaques de cada elemento com base no tipo de widget ou microsite.
Botão primário	Selecione o esquema de cores que você gostaria para o botão primário ou principal. Você também pode ajustar a quantidade de pixels do raio da borda ao redor do botão. Expanda a Estado de hover seção para selecionar ou alterar ainda mais a cor para a qual seu botão muda quando o usuário passa o mouse sobre ele ou interage com ele.
Botão secundário	Selecione o esquema de cores que você gostaria para o botão secundário. Você também pode ajustar a quantidade de pixels do raio da borda ao redor do botão. Expanda a Estado de hover seção para selecionar ou alterar ainda mais a cor para a qual seu botão muda quando o usuário passa o mouse sobre ele ou interage com ele.
Borda	Altere a cor e o contorno da borda dos seus componentes, como tabelas ou cartões, dentro do seu widget ou microsite. • Cor Selecione a cor da sua borda. • Espessura Insira uma unidade em pixels para determinar a espessura da sua borda. • Raio da borda Insira uma unidade em pixels para determinar o raio da sua borda.
Campos de formulário	Selecione a cor que você gostaria para os vários campos de formulário dentro do seu widget ou microsite. Isso inclui quaisquer campos de entrada que o usuário preencha. Você também pode inserir uma unidade em pixels para alterar o tamanho do raio da borda. Expanda a Opções avançadas seção para personalizar ainda mais as cores do estado selecionado ou do estado de hover dos seus campos de formulário.
Tamanho do widget	Altere o tamanho dos seus widgets dentro do modelo. Você pode ajustar as dimensões tanto para widgets incorporados quanto pop-up. Selecione um tamanho mínimo e máximo e, nas opções suspensas, selecione a medida das unidades. Escolha definir as medidas por pixel ou por porcentagem.