---
title: "Aparência do Widget"
slug: "widget-appearance"
updated: 2026-06-12T10:30:57Z
published: 2026-06-12T10:30:57Z
canonical: "docs.xtremepush.com/widget-appearance"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.xtremepush.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Aparência do Widget

Personalize o estilo visual do widget por meio de paletas de cores e configurações de fonte

Na **aba Personalizar** , você pode personalizar as cores e o tamanho geral da fonte usando as **opções Paleta** e **Fonte** à direita. Esta aba também inclui uma opção **HTML** para injetar scripts em segundo plano para rastreamento de terceiros.

Para fazer mudanças mais amplas no layout ou ajustar tamanhos específicos de fonte, você deve usar a opção **Modelo JSON** .

> [!TIP]
> **Widget Versions**
> 
> After you make your changes to the widget, ensure you save your changes. These changes are recorded under **Pages**> **Version History** and you can revert to any earlier version if required. To view your saved changes in the widget **Preview**, ensure you click **Publish**.

## Personalização da Cor

Você pode definir as seguintes propriedades de cor:

- **Paleta Geral**: Inclui cores primárias e secundárias.
- **Contexto**: Isso inclui **papel** para fundos de superfície e **padrão** para o fundo geral da página.
- **Cores de status**: Essas definem a aparência das mensagens de Sucesso, Aviso, Erro e Informação.
- **Ação**: Isso define a cor para botões e outros elementos interativos.
- **Divisor**: Isso define a cor das linhas usadas para separar os diferentes componentes da página.
- **Texto**: Isso é dividido em quatro categorias:
  - **Principal:** Aplicado a títulos principais e etiquetas.
  - **Secundário**: Subtítulos e textos aplicados dentro de cartões ou seções do seu widget.
  - **Dinheiro**: Solicitado para saldos de tokens, valores de moeda ou valores de recompensas monetárias.
  - **Desativado**: Usado para texto dentro de recursos ou recursos de fidelidade bloqueados ou inacessíveis.
- **Perks**: Você pode atribuir cores individuais a cada um dos cinco níveis de perks do Nível 1 ao Nível 5.
- **Avatar**: Este oferece oito variações diferentes de cor para ícones de perfil de usuário.

## Fonte Personalização

Você pode selecionar um tipo de fonte e um tamanho base de fonte para serem aplicados em todo o widget. Embora isso defina um estilo global, o tamanho dos elementos individuais do texto pode variar de acordo com o tipo de componente. Para personalizar o tamanho de elementos específicos da fonte, você deve fazer essas alterações dentro da seção **de Modelo JSON** .

## HTML

A opção **HTML** permite adicionar scripts personalizados ao widget. Essa opção é destinada a processos em segundo plano, e não para adicionar componentes de interface. Use esse recurso para integrações de terceiros, por exemplo, adicionando Google Analytics ou outras ferramentas de rastreamento para monitorar o desempenho dos widgets.

Apenas tags de script são suportadas. Todos os outros elementos HTML são automaticamente removidos.

## Modelo JSON

Você pode usar o Modelo JSON para fazer alterações no layout, cor e fonte. Essa opção oferece controle granular sobre a estrutura do widget e é a única área onde você pode modificar tamanhos individuais de fontes ou propriedades avançadas de layout.