Como customizar o widget/botão de fidelidade - Versão Popular
Nesse artigo vou mostrar o passo a passo para fazer a customização do widget e deixar ele com a cara da sua loja.
Sabe o botão de fidelidade que aparece no site da sua loja com os prêmios disponíveis, cupons, desafios (e etc) para seus clientes? Chamamos ele de Widget. 😀✔️
A customização é muito importante, porque chama a atenção do seu consumidor. Então, vamos deixar ele bem bonito?
💡Importante: Está é a versão para planos abaixo de R$ 750,00 mensais.
![](https://storage.crisp.chat/users/helpdesk/website/86ab5ca88f79b800/834454ee-16b9-4907-a35e-8fe00b_ici2nx.gif)
![](https://storage.crisp.chat/users/helpdesk/website/b89ed7ee76081000/4c8e0c86-69a8-4100-bb7f-3d183d_2oigmo.png)
![](https://storage.crisp.chat/users/helpdesk/website/eda2bbf83be7a000/e7cbdef6-cddc-4b85-b8c2-868889_118iksj.png)
💡 Importante: Sempre deixe a opção Ativar para que o widget apareça no seu site.
Nome do programa: Escreva o nome que estará escrito no botão. Exemplo: No caso desse site, a loja optou por colocar "Fidelidade Fru-Fruta".
![](https://storage.crisp.chat/users/helpdesk/website/ea253b03b7f44000/79dc01a3-aeb4-4590-8905-3b0b0d_5aoovs.png)
Nome dos pontos: Personalize o nome das pontuações. Essa loja optou por colocar o nome dos pontos dela de "Pérolas" 😻
![](https://storage.crisp.chat/users/helpdesk/website/3a467699dccd2600/7a39e46a-3047-4a2c-8600-abab66_10kslki.png)
Ocultar botão no mobile: Selecione essa opção se deseja que o widget não apareça no site da loja quando o cliente estiver acessando pelo celular.
Ocultar botão no desktop: Selecione essa opção se deseja que o widget não apareça no site da loja quando o cliente estiver acessando pelo computador / notebook.
Ocultar texto do botão: Selecione essa opção se deseja que nenhum texto apareça e que fique somente o ícone no widget. Exemplo:
![](https://storage.crisp.chat/users/helpdesk/website/d015dedb871d7000/f2a866b9-02f1-4861-9f61-b295f0_gvb1p0.jpeg)
Ocultar ícone do botão: Selecione se deseja que nenhum widget apareça somente o texto / nome do programa. Exemplo:
![](https://storage.crisp.chat/users/helpdesk/website/49c53ab11a940800/3fb42de1-4ffd-40c8-9f50-2396a9_1099726.png)
Ocultar o menu produto: O menu produto é onde fica os produtos disponíveis para resgates de acordo com a quantidade de pontos. Selecione se deseja que ele não apareça. Você pode usar isso para não ter nenhum produto como premiação.
Ocultar o cupom de menu: O menu cupom é onde fica os cupons disponíveis para resgates de acordo com a quantidade de pontos. Selecione se deseja que o menu de cupons não apareça. Você pode usar isso para não ter nenhum cupom como premiação.
Customização de comportamento
Passo 5 - Personalize o comportamento do botão no seu site
![](https://storage.crisp.chat/users/helpdesk/website/2ecd4bbdc989ca00/b84c7964-2d05-4021-ae53-2cd570_9ep1az.png)
Selecione a posição do botão: Coloque em qual posição deseja que o widget apareça no site. Você tem as opções de colocar na direita lateral direita, esquerda, ou no rodapé no canto direito, esquerdo e central.
Animação: Selecione se deseja que o botão se movimente ou fique parado no site. Exemplo: Essa loja preferiu que ele se mexesse.
![](https://storage.crisp.chat/users/helpdesk/website/9ae140d0efd2d800/bb56efab-eba2-44df-a7e5-cb2ce0_1kt0k0b.gif)
Selecione o ícone: Coloque qual vai ser o ícone/imagem que irá aparecer no seu programa de fidelidade.
Cor do fundo do botão: Escolha a cor que ficará no fundo do botão.
Cor da fonte do botão: Escolha a cor que será o texto que estará no botão.
Exemplo: No caso dessa loja, a cor da fonte é branca e a cor do fundo é a roxa.
![](https://storage.crisp.chat/users/helpdesk/website/46ba7d28989d5c00/99fb1d3c-b6d1-4e3f-8142-20eb78_kesrko.gif)
Selecione o banner: Este banner ficará na tela inicial, como mostramos no print abaixo.
![](https://storage.crisp.chat/users/helpdesk/website/bfacaf3b27cb3000/9f280169-9482-410d-ac28-cce5cd_p2nzlu.png)
Selecione a(s) página(s) que deseja mostrar o widget: Caso deseje, você pode escolher em quais páginas deseja que o seu botão de fidelidade apareça. Exemplo: Pagina inicial e de checkout.
💡 Importante: Caso deseje visualizar como a customização do seu widget está ficando, clique em Preview . Automaticamente você será direcionado para uma tela onde terá que selecionar sua plataforma de e-commerce, em seguida visualizar por parceiro .
![](https://storage.crisp.chat/users/helpdesk/website/ec865dc748fb7000/04eee244-4e91-4881-b2b0-1f2204_55b809.gif)
Esperamos ter te ajudado! 😀
Sabe o botão de fidelidade que aparece no site da sua loja com os prêmios disponíveis, cupons, desafios (e etc) para seus clientes? Chamamos ele de Widget. 😀✔️
A customização é muito importante, porque chama a atenção do seu consumidor. Então, vamos deixar ele bem bonito?
💡Importante: Está é a versão para planos abaixo de R$ 750,00 mensais.
Passo 1 - Acesse o painel administrativo e faça seu login. Clique aqui
Passo 2 - Clique em Mais > Configurações
![](https://storage.crisp.chat/users/helpdesk/website/86ab5ca88f79b800/834454ee-16b9-4907-a35e-8fe00b_ici2nx.gif)
Passo 3 - Logo em seguida, no lado esquerdo da sua tela clique em Customizar
![](https://storage.crisp.chat/users/helpdesk/website/b89ed7ee76081000/4c8e0c86-69a8-4100-bb7f-3d183d_2oigmo.png)
Passo 4 - Nesse primeiro quadro preencha as seguintes informações:
![](https://storage.crisp.chat/users/helpdesk/website/eda2bbf83be7a000/e7cbdef6-cddc-4b85-b8c2-868889_118iksj.png)
💡 Importante: Sempre deixe a opção Ativar para que o widget apareça no seu site.
Nome do programa: Escreva o nome que estará escrito no botão. Exemplo: No caso desse site, a loja optou por colocar "Fidelidade Fru-Fruta".
![](https://storage.crisp.chat/users/helpdesk/website/ea253b03b7f44000/79dc01a3-aeb4-4590-8905-3b0b0d_5aoovs.png)
Nome dos pontos: Personalize o nome das pontuações. Essa loja optou por colocar o nome dos pontos dela de "Pérolas" 😻
![](https://storage.crisp.chat/users/helpdesk/website/3a467699dccd2600/7a39e46a-3047-4a2c-8600-abab66_10kslki.png)
Ocultar botão no mobile: Selecione essa opção se deseja que o widget não apareça no site da loja quando o cliente estiver acessando pelo celular.
Ocultar botão no desktop: Selecione essa opção se deseja que o widget não apareça no site da loja quando o cliente estiver acessando pelo computador / notebook.
Ocultar texto do botão: Selecione essa opção se deseja que nenhum texto apareça e que fique somente o ícone no widget. Exemplo:
![](https://storage.crisp.chat/users/helpdesk/website/d015dedb871d7000/f2a866b9-02f1-4861-9f61-b295f0_gvb1p0.jpeg)
Ocultar ícone do botão: Selecione se deseja que nenhum widget apareça somente o texto / nome do programa. Exemplo:
![](https://storage.crisp.chat/users/helpdesk/website/49c53ab11a940800/3fb42de1-4ffd-40c8-9f50-2396a9_1099726.png)
Ocultar o menu produto: O menu produto é onde fica os produtos disponíveis para resgates de acordo com a quantidade de pontos. Selecione se deseja que ele não apareça. Você pode usar isso para não ter nenhum produto como premiação.
Ocultar o cupom de menu: O menu cupom é onde fica os cupons disponíveis para resgates de acordo com a quantidade de pontos. Selecione se deseja que o menu de cupons não apareça. Você pode usar isso para não ter nenhum cupom como premiação.
Customização de comportamento
Passo 5 - Personalize o comportamento do botão no seu site
![](https://storage.crisp.chat/users/helpdesk/website/2ecd4bbdc989ca00/b84c7964-2d05-4021-ae53-2cd570_9ep1az.png)
Selecione a posição do botão: Coloque em qual posição deseja que o widget apareça no site. Você tem as opções de colocar na direita lateral direita, esquerda, ou no rodapé no canto direito, esquerdo e central.
Animação: Selecione se deseja que o botão se movimente ou fique parado no site. Exemplo: Essa loja preferiu que ele se mexesse.
![](https://storage.crisp.chat/users/helpdesk/website/9ae140d0efd2d800/bb56efab-eba2-44df-a7e5-cb2ce0_1kt0k0b.gif)
Selecione o ícone: Coloque qual vai ser o ícone/imagem que irá aparecer no seu programa de fidelidade.
Cor do fundo do botão: Escolha a cor que ficará no fundo do botão.
Cor da fonte do botão: Escolha a cor que será o texto que estará no botão.
Exemplo: No caso dessa loja, a cor da fonte é branca e a cor do fundo é a roxa.
![](https://storage.crisp.chat/users/helpdesk/website/46ba7d28989d5c00/99fb1d3c-b6d1-4e3f-8142-20eb78_kesrko.gif)
Selecione o banner: Este banner ficará na tela inicial, como mostramos no print abaixo.
![](https://storage.crisp.chat/users/helpdesk/website/bfacaf3b27cb3000/9f280169-9482-410d-ac28-cce5cd_p2nzlu.png)
Selecione a(s) página(s) que deseja mostrar o widget: Caso deseje, você pode escolher em quais páginas deseja que o seu botão de fidelidade apareça. Exemplo: Pagina inicial e de checkout.
Passo 6: Após isso, Salve os Dados
💡 Importante: Caso deseje visualizar como a customização do seu widget está ficando, clique em Preview . Automaticamente você será direcionado para uma tela onde terá que selecionar sua plataforma de e-commerce, em seguida visualizar por parceiro .
![](https://storage.crisp.chat/users/helpdesk/website/ec865dc748fb7000/04eee244-4e91-4881-b2b0-1f2204_55b809.gif)
Esperamos ter te ajudado! 😀
Atualizado em: 19/05/2023
Obrigado!