# Documentação [TOTEM - Configuração]

Guia simples para personalizar a aparência do totem Credsystem PIX.

<div class="wrap" id="bkmrk-neste-documento1.-co"><div class="toc">**Neste documento**</div><div class="toc">1. [Acessar a configuração](#bkmrk-1.-acessar-a-configur)  
2. [Configurações gerais](#bkmrk-2.-configuracoes-gera)  
3. [Tela Principal](#bkmrk-3.-tela-principal)  
4. [Telas Internas](#bkmrk-4.-telas-internas)  
5. [Após salvar](#bkmrk-5.-apos-salvar)</div></div>Nesta tela você personaliza o totem de autoatendimento Credsystem PIX: imagem ou cor de fundo, indicador pulsante e tempo de retorno por inatividade. As alterações são salvas no servidor e passam a valer nos totens depois de recarregar a página.

\----------------------------------------------------------------------------------------------------------------------------------

## 1. Acessar a configuração

Abra a tela **Configuração Credsystem** no portal.

<div class="wrap" id="bkmrk-acesso-path"><div class="acesso">**Acesso — Configuração Credsystem** `v1/credsystem-pix/configuracao`</div></div>A tela está organizada em três blocos (acordeões). Abra um de cada vez para configurar:

<div class="wrap" id="bkmrk-blocos-lista">1. **Configurações gerais** — retorno automático por inatividade.
2. **Tela Principal** — fundo, cor e pulsar da tela de atração (primeira tela do totem).
3. **Telas Internas** — fundo e cor das etapas de CPF, pagamento e sucesso.

</div>Use o botão **Voltar** no canto superior para sair da tela.

\----------------------------------------------------------------------------------------------------------------------------------

## 2. Configurações gerais

Neste bloco fica o controle de quanto tempo o totem espera sem interação antes de voltar sozinho para a tela inicial.

### Retorno por inatividade

Define por quanto tempo o totem aguarda **sem toque ou tecla** nas telas internas (CPF, pagamento e sucesso) antes de voltar automaticamente para a tela inicial.

**Passo a passo**

<div class="wrap" id="bkmrk-passos-inatividade">1. Abra **Configurações gerais** e depois **Retorno por inatividade**.
2. Informe o tempo em **Segundos**.
3. Clique em **Salvar tempo**.

</div>### O que cada campo significa

<div class="wrap" id="bkmrk-tabela-inatividade"><table style="width: 98.4524%;"><tbody><tr><th style="width: 40.1244%;">Segundos</th><td style="width: 59.7201%;">Tempo sem atividade antes de voltar à tela inicial. Aceita de **1** a **3600** segundos. Padrão: **30** segundos.

</td></tr></tbody></table>

</div>\----------------------------------------------------------------------------------------------------------------------------------

## 3. Tela Principal

Personaliza a **tela de atração** do totem — a primeira tela, com o convite para pagar a fatura via PIX.

### Imagem de fundo da tela inicial

Envie a imagem da tela de atração. Sem arquivo, permanece o layout padrão. Com imagem, ela substitui o fundo e os textos iniciais.

**Passo a passo**

<div class="wrap" id="bkmrk-passos-imagem-inicial">1. Abra **Tela Principal** e depois **Imagem de fundo da tela inicial**.
2. Clique em **Escolher imagem** e selecione o arquivo.
3. Confira a pré-visualização.
4. Clique em **Enviar** para aplicar no totem.
5. Para voltar ao padrão, clique em **Remover imagem**.

</div>### O que cada campo significa

<div class="wrap" id="bkmrk-tabela-imagem-inicial"><table style="width: 98.4524%;"><tbody><tr><th style="width: 40.1244%;">Arquivo de imagem</th><td style="width: 59.7201%;">JPG, PNG, WEBP ou GIF — até **8 MB**. Tamanho recomendado: **970 px** (largura) × **1705 px** (altura).

</td></tr><tr><th style="width: 40.1244%;">Pré-visualização</th><td style="width: 59.7201%;">Mostra como a imagem ficará na proporção do totem.

</td></tr><tr><th style="width: 40.1244%;">Enviar</th><td style="width: 59.7201%;">Grava a imagem selecionada no servidor.

</td></tr><tr><th style="width: 40.1244%;">Remover imagem</th><td style="width: 59.7201%;">Remove o arquivo e volta ao layout padrão (cor de fundo ou tema original).

</td></tr></tbody></table>

</div>### Cor de fundo da tela inicial

Escolha a cor de fundo quando **não há imagem** configurada. Se existir imagem de fundo, a cor fica indisponível — remova a imagem antes de alterar a cor.

**Passo a passo**

<div class="wrap" id="bkmrk-passos-cor-inicial">1. Abra **Tela Principal** e depois **Cor de fundo da tela inicial**.
2. Escolha uma paleta pronta (Credsystem, Azul escuro, Verde, Vinho, Grafite) ou uma cor personalizada.
3. Confira a pré-visualização.
4. Clique em **Salvar cor**.

</div>### O que cada campo significa

<div class="wrap" id="bkmrk-tabela-cor-inicial"><table style="width: 98.4524%;"><tbody><tr><th style="width: 40.1244%;">Paleta</th><td style="width: 59.7201%;">Cores prontas alinhadas à marca ou ao ambiente da loja.

</td></tr><tr><th style="width: 40.1244%;">Cor personalizada</th><td style="width: 59.7201%;">Permite escolher qualquer cor em hexadecimal.

</td></tr><tr><th style="width: 40.1244%;">Salvar cor</th><td style="width: 59.7201%;">Grava a cor no servidor. Os totens aplicam após recarregar a página.

</td></tr></tbody></table>

</div>### Pulsar

Controla o indicador pulsante na tela inicial: se aparece, qual texto fica abaixo dele e em que posição da grade 3×3.

**Passo a passo**

<div class="wrap" id="bkmrk-passos-pulsar">1. Abra **Tela Principal** e depois **Pulsar**.
2. Ligue ou desligue **Exibir pulsar**.
3. Se estiver ligado, preencha a **Mensagem** e escolha a **Posição na tela** na grade 3×3.
4. Confira a pré-visualização (referência aproximada).
5. Clique em **Salvar pulsar**.

</div>### O que cada campo significa

<div class="wrap" id="bkmrk-tabela-pulsar"><table style="width: 98.4524%;"><tbody><tr><th style="width: 40.1244%;">Exibir pulsar</th><td style="width: 59.7201%;">Liga ou oculta o indicador pulsante na tela inicial.

</td></tr><tr><th style="width: 40.1244%;">Mensagem</th><td style="width: 59.7201%;">Texto exibido abaixo do pulsar. Até **60** caracteres. Padrão: `Toque em qualquer lugar`.

</td></tr><tr><th style="width: 40.1244%;">Posição na tela</th><td style="width: 59.7201%;">Grade 3×3 (superior, centro ou inferior × esquerda, centro ou direita). Padrão: **Inferior centro**.

</td></tr><tr><th style="width: 40.1244%;">Pré-visualização</th><td style="width: 59.7201%;">Referência aproximada — pode não refletir 100% como aparecerá no totem.

</td></tr></tbody></table>

</div>\----------------------------------------------------------------------------------------------------------------------------------

## 4. Telas Internas

Personaliza o fundo das etapas **depois** da tela inicial: digitação de CPF, escolha de valor, PIX e sucesso.

### Imagem de fundo das telas internas

Envie a imagem de fundo das etapas internas. Sem arquivo, permanece o layout padrão.

**Passo a passo**

<div class="wrap" id="bkmrk-passos-imagem-interna">1. Abra **Telas Internas** e depois **Imagem de fundo das telas internas**.
2. Clique em **Escolher imagem** e selecione o arquivo.
3. Confira a pré-visualização.
4. Clique em **Enviar**.
5. Para voltar ao padrão, clique em **Remover imagem**.

</div>### O que cada campo significa

<div class="wrap" id="bkmrk-tabela-imagem-interna"><table style="width: 98.4524%;"><tbody><tr><th style="width: 40.1244%;">Arquivo de imagem</th><td style="width: 59.7201%;">JPG, PNG, WEBP ou GIF — até **8 MB**. Tamanho recomendado: **970 px** (largura) × **1705 px** (altura).

</td></tr><tr><th style="width: 40.1244%;">Enviar</th><td style="width: 59.7201%;">Grava a imagem no servidor.

</td></tr><tr><th style="width: 40.1244%;">Remover imagem</th><td style="width: 59.7201%;">Remove o arquivo e volta ao fundo padrão das telas internas.

</td></tr></tbody></table>

</div>### Cor de fundo das telas internas

Escolha a cor de fundo quando **não há imagem** nas telas internas. Com imagem configurada, a cor fica bloqueada até a imagem ser removida.

**Passo a passo**

<div class="wrap" id="bkmrk-passos-cor-interna">1. Abra **Telas Internas** e depois **Cor de fundo das telas internas**.
2. Escolha uma paleta ou cor personalizada.
3. Confira a pré-visualização.
4. Clique em **Salvar cor**.

</div>### O que cada campo significa

<div class="wrap" id="bkmrk-tabela-cor-interna"><table style="width: 98.4524%;"><tbody><tr><th style="width: 40.1244%;">Paleta / Cor personalizada</th><td style="width: 59.7201%;">Mesmo funcionamento da cor da tela inicial, aplicado às etapas internas.

</td></tr><tr><th style="width: 40.1244%;">Salvar cor</th><td style="width: 59.7201%;">Grava a cor no servidor. Aplicada nos totens após recarregar a página.

</td></tr></tbody></table>

</div>\----------------------------------------------------------------------------------------------------------------------------------

## 5. Após salvar

Toda alteração salva no servidor só aparece no totem depois de **recarregar a página** do totem. Se a sincronização falhar, a tela avisa e a mudança pode ficar só neste navegador até o servidor responder.

<div class="wrap" id="bkmrk-dicas-finais"><table><tbody><tr><th>Imagem e cor</th><td>Não usam ao mesmo tempo: com imagem, a cor fica indisponível; sem imagem, a cor vale.</td></tr><tr><th>Pulsar</th><td>Só existe na Tela Principal (atração). Nas telas internas não há pulsar.</td></tr><tr><th>Inatividade</th><td>Vale apenas nas telas internas. A tela inicial (atração) não volta por tempo — ela já é o destino do retorno.</td></tr><tr><th>Formato da imagem</th><td>JPG, PNG, WEBP ou GIF, máximo 8 MB. Preferir 970 × 1705 px.</td></tr></tbody></table>

</div>Credsystem PIX × ILLI · Guia de configuração do totem