Passar para o conteúdo principal

Personalização da plataforma WiFeed

Como personalizar a plataforma WiFeed com a identidade visual da sua marca

Escrito por Marianna Rossi de Medeiros

Neste tutorial, você aprenderá a personalizar a plataforma do WiFeed com a identidade visual da sua empresa.

Você poderá visualizar as alterações antes de publicá-las, garantindo que tudo esteja de acordo com a sua marca.


Quem pode personalizar?

IMPORTANTE: A personalização do domínio e das telas da plataforma é um recurso contratado à parte. Para ativá-los na sua conta, fale com o nosso time comercial.

O acesso aos recursos de personalização do domínio e das telas da plataforma, depende do tipo de conta:

  • Estabelecimentos com o recurso contratado: podem configurar a identidade visual da plataforma.

  • Parceiros com o recurso contratado: podem configurar a identidade visual da plataforma, que será aplicada também aos estabelecimentos vinculados.

    • Estabelecimentos desse parceiro: seguem automaticamente a identidade visual definida pelo parceiro e não possuem acesso às configurações de personalização.


O que você pode personalizar

Com a Personalização da Plataforma, você pode substituir a identidade visual do WiFeed pela da sua empresa, configurando:

  • Endereços de acesso: utilize um endereço personalizado com o domínio WiFeed ou configure seu próprio domínio.

  • Identidade visual: personalize logotipo, favicon, título da aba do navegador, fontes e cores da plataforma.

  • Suporte: escolha entre manter o chat do WiFeed, disponibilizar seu próprio e-mail de suporte ou ocultar o componente.

Essas configurações ficam disponíveis no menu lateral, em Personalização da Plataforma:

ATENÇÃO: para visualizar a identidade visual personalizada, os usuários devem acessar a plataforma por um dos endereços configurados na seção Domínio. Ao acessar o WiFeed pelo endereço padrão da plataforma, a personalização poderá não ser exibida. Por isso, recomendamos começar por ele.


Passo 1 — Configure os endereços de acesso

Ao abrir o menu Domínio, você verá os dois endereços disponíveis para a sua conta. Eles funcionam ao mesmo tempo e levam ao mesmo painel personalizado. Clique em Editar no endereço que quer configurar.

Endereço com o domínio do WiFeed

Este endereço já vem pronto e fica sempre ativo. Você pode trocar apenas a chave, que é a parte do endereço que identifica a sua conta.

  1. Digite a nova chave. Escolha algo curto e fácil de lembrar, como o nome da sua empresa. O endereço completo aparece logo abaixo.

    Atenção: a chave não pode ficar em branco nem ser igual à de outra conta. Se ela já estiver em uso, a tela avisará e você precisa escolher outra.

  2. Clique em Salvar alterações.

  3. Use os ícones ao lado do endereço para copiá-lo ou abri-lo em uma nova aba.

Endereço com o seu próprio domínio (opcional)

Se você quer um endereço sem "WiFeed" no nome, por exemplo, painel.suaempresa.com, configure o seu próprio domínio.

Importante: tenha em mãos o acesso ao painel onde o domínio da sua empresa é administrado, o seu provedor de DNS. Se não tiver, peça ajuda ao time de TI.

  1. Clique em Endereço com domínio próprio

  2. Ative a opção de domínio próprio usando o botão no topo da tela.

  3. Digite o subdomínio, por exemplo, painel.suaempresa.com.

  4. Crie o registro CNAME no seu provedor de DNS, copiando os dados da tabela exibida na tela (Tipo, Host e Valor).

  5. Clique em Verificar apontamento para confirmar que o registro foi encontrado. O registro pode levar algum tempo para ser encontrado, pois depende da propagação do domínio (que varia de acordo com o seu provedor). Se ele ainda não for encontrado, aguarde e clique em Verificar apontamento novamente.

  6. Após o apontamento ser confirmado, clique em Salvar alterações. A plataforma começará a preparar o endereço.

  7. Aguarde o endereço ficar pronto. Quando a preparação terminar, o status muda para Endereço pronto para uso, e você já pode usar seu endereço personalizado.

Atenção: Mantenha o registro CNAME no seu provedor. Se ele for removido ou alterado, o endereço deixa de funcionar. A plataforma não confere isso sozinha, então, se você mexer no registro, volte nesse passo e clique em Verificar apontamento novamente para atualizar o status.

Entendendo os status

A tela mostra dois status, que avançam separadamente:

1. Status do apontamento de DNS:

Status

O que significa

O que fazer

Aguardando apontamento de DNS

O registro CNAME ainda não foi verificado

Crie o registro e clique em Verificar apontamento

Apontamento de DNS confirmado

O registro foi encontrado

Clique em Salvar alterações

Apontamento não encontrado

O registro não existe ou está com dados diferentes

Confira os dados no seu provedor DNS e verifique de novo

2. Status da preparação do endereço:

Status

O que significa

O que fazer

Preparando o endereço

O endereço está sendo preparado em nossos servidores

Aguardar o endereço ficar pronto para uso

Endereço pronto para uso

O endereço já responde

Nada, já pode utilizar o endereço personalizado


Passo 2 — Personalize as Telas da Plataforma

Em Telas da plataforma, você personaliza:

Material

Requisitos / Especificações

Logo principal

PNG ou SVG com fundo transparente, 400×120 px, até 1 MB

Favicon

PNG, ICO ou SVG quadrado, 64×64 px, até 100 KB. Prefira só o símbolo da marca, sem texto

Título da aba

O nome que aparece na aba do navegador e nos favoritos, como o nome da empresa ou do produto. Obrigatório

Cores da marca

Códigos em hexadecimal ou RGB da cor primária, de destaque, da tela de login e de até dez cores para os gráficos.

Fonte da interface

A tipografia usada em todo o sistema

Ícone e endereço de e-mail do suporte

Permite incluir um email de suporte da sua empresa como suporte dentro da ferramenta.

Logos, título e fontes

  1. Clique em Personalização da Plataforma > Telas da plataforma e abra o bloco Logos, título e fontes

  2. Clique sobre a imagem do logotipo atual.

  3. Selecione o arquivo em seu computador, e clique em Abrir

  4. Confira o resultado na pré-visualização à direita.

    Para alterar o favicon, repita o procedimento no campo correspondente.

  5. Para ajustar o título do navegador, altere-o direto no campo “Título da Aba do Navegador”, e confira o resultado na tela de pré-visualização ao lado:

  6. Para ajustar a Fonte da interface, clique no menu suspenso “Fonte da Interface”, e selecione entre as opções de fontes disponíveis:

Cores

Neste bloco, você configura as cores utilizadas na plataforma: cor primária, cor de destaque, cor da tela de login e uma paleta de até dez cores para os gráficos.

Importante: Assim como a fonte, as cores valem para todo o sistema. As telas da pré-visualização são apenas exemplos de como elas ficam aplicadas.

Você pode definir cada cor de três formas:

  • Pelo campo do código: digite o código hexadecimal no campo ao lado da cor.

  • Pelo seletor: clique no quadrado da cor e escolha o tom na área de cor ou na barra colorida. Para usar RGB, clique nas setas ao lado de hex até aparecer rgba.

  • Pelo conta-gotas: clique no ícone do conta-gotas e depois no ponto da tela com a cor que você quer.

Como as cores se comportam nos botões e outros elementos

O WiFeed ajusta automaticamente os tons das cores escolhidas para indicar interações, como quando o usuário passa o mouse sobre um botão (hover). Você não precisa configurar essas variações manualmente:

Cor primária

É a cor principal da sua marca. Usada nos elementos de ação e de destaque da interface, como botões, links, títulos e menu lateral.

Cor de destaque

É a cor que destaca um elemento do fundo. Ex: fundo dos ícones:

Cor da tela de login

É a cor do fundo das telas de acesso à plataforma, como login e-mail e senha, recuperação de senha e login via SSO:

Cor da paleta dos gráficos

As cores são utilizadas na sequência em que aparecem na paleta. Por exemplo, se um gráfico apresentar cinco categorias, serão utilizadas as cinco primeiras cores configuradas.

Chat de suporte

No canto inferior direito das telas existe um ícone de suporte.

Escolha o que ele faz para os seus usuários:

  • Chat de suporte do WiFeed (padrão) — abre um chat com o suporte do WiFeed. É a opção padrão.

  • Somente e-mail de contato — o ícone passa a usar a sua cor primária e, ao ser clicado, mostra o e-mail de suporte que você informar. Preencha o campo E-mail de suporte, que aparece logo abaixo da opção.

  • Sem componente de suporte — nenhum ícone de suporte aparece.

Confira e salve sua marca

Entenda quando as alterações são aplicadas:

  • Antes de salvar: as mudanças aparecem só na pré-visualização. Nada muda para você nem para os seus usuários.

  • Depois de salvar: as alterações já aparecem no seu painel na navegação atual, e para quem acessa sua plataforma através dos endereços e domínios personalizados cadastrados.

Para confirmar se o endereço/domínio está carregando a personalização, faça o teste:

  1. Após configurar o dominio, as telas , e o ícone de suporte (se desejado), clique em Salvar alterações, no canto inferior direito da tela.
    A mensagem "Personalização salva" confirma que deu certo.

  2. Acesse a plataforma pelo seu endereço personalizado. Abra em uma nova aba o endereço que você configurou em Domínio e confira se a logo, as cores e o suporte estão como você definiu.

Como voltar à aparência padrão do WiFeed?

Após salvar uma personalização, não é possível desfazer automaticamente as alterações ou restaurar uma versão anterior.

Caso queira voltar à aparência padrão do WiFeed, acesse Personalização da Plataforma > Telas da plataforma e configure manualmente os valores abaixo:

Fonte e cores padrão

Configuração

Valor padrão

Fonte da interface

Akt

Cor primária

#00494E

Cor de destaque

#9EB38D

Cor da tela de login

#00494E

Paleta padrão dos gráficos

Item

Código hexadecimal

1º

#00494E

2º

#D5CFEB

3º

#F98F00

4º

#999999

5º

#B44A13

6º

#00D27E

7º

#014133

8º

#21AEAC

9º

#2979FF

10º

#3CC480

Outros elementos

  • Título da aba do navegador: WiFeed.

  • Logotipo e favicon: para recuperar os arquivos originais do WiFeed, entre em contato com nosso suporte.

Após realizar os ajustes, clique em Salvar alterações para aplicar a aparência padrão novamente.

Importante: essas configurações restauram manualmente a aparência padrão do WiFeed, e não uma personalização anterior criada pela sua empresa.


Dúvidas frequentes

  1. O status mostra "Apontamento não encontrado". O que confiro? Veja no seu provedor de DNS se o registro é do tipo CNAME e se o Host e o Valor estão exatamente como na tabela da tela. Alguns provedores levam alguns minutos para publicar o registro. Aguarde e clique em Verificar apontamento de novo.

  2. Troquei o subdomínio sem querer. Perdi a configuração? Não. Se você digitar de novo o subdomínio que já estava funcionando, os status voltam a aparecer como estavam, sem precisar verificar outra vez.

  3. Se eu desativar o meu domínio, perco a configuração?Sim. Ao desativar o endereço personalizado, a plataforma pede uma confirmação:

    1. Manter domínio: cancela a remoção, e o endereço continua funcionando normalmente.

    2. Remover domínio: o endereço deixa de responder e o certificado SSL é descartado. Para voltar a usá-lo, é preciso configurar tudo novamente no WiFeed.

  4. O arquivo da logo não aparece para eu selecionar.
    Só aparecem para seleção os arquivos no formato aceito: PNG ou SVG para a logo, e PNG, ICO ou SVG para o favicon.

  5. Posso remover a logo ou o favicon?
    Não. Eles podem ser substituídos, mas não removidos. A plataforma sempre precisa de um de cada.
    ​

  6. Por que o gráfico não mostra todas as cores da paleta?
    Os gráficos usam apenas as cores necessárias para os dados, sempre na ordem. Com cinco locais, por exemplo, só as cinco primeiras cores aparecem.
    ​

  7. Não consigo clicar em Salvar alterações.
    O botão fica desabilitado enquanto não houver alterações, ou se algum campo obrigatório estiver vazio ou incorreto, como o título da aba ou o e-mail de suporte.
    ​

  8. Salvei, mas não vejo a minha marca na plataforma.
    A personalização completa só aparece para quem acessa pelos endereços configurados em Domínio. Abra o endereço a partir daquela tela e confira.

Respondeu à sua pergunta?