# Badges e Certificados

Atualmente as opções são:

* Badge avulso, quando um usuário completa um treinamento, **independente da pontuação** obtida.
* Badge avulso, quando um usuário completa um treinamento, **dependendo da pontuação** obtida.
* Badge avulso, quando um usuário completa um módulo, **independente da pontuação** obtida.
* Badge avulso, quando um usuário completa um módulo, **dependendo da pontuação** obtida.
* [Certificado](#tipo-certificado-treinamento-completado), quando um usuário completa um treinamento.

O botão "Restaurar Badges" permite que um badge deletado seja ativado novamente.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FwtytecHwLvyBkIpg9zHa%2Fimage.png?alt=media&#x26;token=637f2e69-d562-4c0f-9821-dfa1b677b270" alt=""><figcaption></figcaption></figure></div>

O botão "Adicionar Badge" permite cadastrar um badge do zero.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FNhDBUbJS36VLSsEzOf0G%2Fimage.png?alt=media&#x26;token=5fc61711-96d5-45a5-9b69-8de895df36e0" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">Criando um novo Badge</mark>

<https://manager.grano.app/admin/badges>

## <mark style="color:blue;">Tipo "Treinamento Completado"</mark>

* Tipo: Selecione o tipo <mark style="background-color:yellow;">**"Treinamento Completado"**</mark>

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FX0i4kfIi5ZHgJthlJJ2p%2Fimage.png?alt=media&#x26;token=de92995a-fedd-4cd3-9db0-54a8c3136514" alt=""><figcaption></figcaption></figure></div>

* Campo <mark style="background-color:yellow;">**"Treinamento Completado"**</mark>: permite escolher o treinamento específico do badge.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FXwYUjNo1rQOM0CiDTfO2%2Fimage.png?alt=media&#x26;token=56968a88-1674-46a4-a10c-921c6e1e52c4" alt=""><figcaption></figcaption></figure></div>

* Campo <mark style="background-color:yellow;">**"Título"**</mark>: nome do badge (sem aspas)

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2F3wdY5drPjeqx4vcp6EMk%2Fimage.png?alt=media&#x26;token=9f20eb92-4e97-4a35-baed-6489070454ed" alt=""><figcaption></figcaption></figure></div>

* Campo <mark style="background-color:yellow;">**"Subtítulo"**</mark>: texto curto, exibido logo abaixo do "Título" na visualização do badge.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FszU4zeBPZJGz1LOhA0LJ%2Fimage.png?alt=media&#x26;token=0cfff114-b3e2-44cf-885b-e996cc55e2cc" alt=""><figcaption></figcaption></figure></div>

* Campo <mark style="background-color:yellow;">**"Texto"**</mark>: descrição do badge; texto completo que aparecerá na área de "Conquistas" do usuário.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2F0hjwSVRnBf4ronS4WsuJ%2Fimage.png?alt=media&#x26;token=d5ad7de6-72dc-4ff7-b59f-fcffe8f3bfc4" alt=""><figcaption></figcaption></figure></div>

Caso não seja preenchido, o texto é gerado automaticamente. Ex: Certificado "xxxxx" disponível.<br>

* Campo <mark style="background-color:yellow;">**"Imagem"**</mark>: imagem do badge, no tamanho de 500x500px.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FLC2ZTNKEq6MzCygFO217%2Fimage.png?alt=media&#x26;token=f20371d1-3603-4b48-9794-47ac34b70e80" alt=""><figcaption></figcaption></figure></div>

* Campo <mark style="background-color:yellow;">**"Cor Hexa"**</mark>: cor do badge; aparecerá na área de "Conquistas" do usuário.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2F2xKz0v2XpEoS3E2M1M52%2Fimage.png?alt=media&#x26;token=64baeadb-e50c-40a9-9975-51409de83dd6" alt=""><figcaption></figcaption></figure></div>

* Campo <mark style="background-color:yellow;">**"Share  - Título"**</mark>: é o título do badge que aparecerá na rede social, quando ele for compartilhado pelo usuário.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2F7WOrVvVzOv0nKNwCWtfW%2Fimage.png?alt=media&#x26;token=c9bbe74a-b846-4e48-8571-9237b39df901" alt=""><figcaption></figcaption></figure></div>

* Campo <mark style="background-color:yellow;">**"Share - Descrição"**</mark>: é a descrição do badge que aparecerá na rede social, quando ele for compartilhado pelo usuário.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FjG7ZmIW2mYsMSf4CqRvA%2Fimage.png?alt=media&#x26;token=781cc050-3eab-42e5-8f5b-ca18fc68c5d7" alt=""><figcaption></figcaption></figure></div>

* Campo <mark style="background-color:yellow;">**"Share  - Imagem"**</mark>: é a imagem do badge (1200x630px) que aparecerá na rede social, quando ele for compartilhado pelo usuário.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FWg5g7wSUbE2JKvk360q8%2Fimage.png?alt=media&#x26;token=54aed66d-4a16-417a-8940-e6c0449600e2" alt=""><figcaption></figcaption></figure></div>

**Exemplo Share:**

<figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FlxEvZpN96FYX1jYsaosR%2Fimage.png?alt=media&#x26;token=6864aeb9-32b8-4acd-b57c-173a6a996681" alt=""><figcaption><p>Exemplo de cadastro de badge e compartilhamento em redes sociais</p></figcaption></figure>

* Campo <mark style="background-color:yellow;">**"Chave Única"**</mark>: é a identificação do badge no LMS; algo único e específico desse badge, para que você cadastre para facilitar buscas futuras.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FBM6gsPVs1wKLXtkuWt8f%2Fimage.png?alt=media&#x26;token=2963819a-0386-47ed-a771-139725b07846" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">Tipo "Treinamento Completado com Pontuação Min/Max"</mark>

Mesma lógica do cadastro anterior, porém, com a opção de ter múltiplos níveis de badges de acordo com a pontuação obtida pelo usuário naquele treinamento.

Por exemplo, digamos que você queira criar 3 níveis de um mesmo badge: ouro, prata e bronze, sendo:

* **Ouro: 100-80**
* **Prata: 79-50**
* **Bronze: 49-20**

Ao cadastrar esses valores nos campos "Percentual Mínimo" e "Percentual Máximo", em cada novo badge, relacionado ao mesmo treinamento, a plataforma distribuirá o badge correspondente aos pontos atingidos. No exemplo acima, se o usuário conquistar 19 pontos ou menos, não receberá nada.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FreFhFBTbBmFFYovzNKLB%2Fimage.png?alt=media&#x26;token=9bdf605f-a076-4d33-a571-a7b56b19b1fc" alt=""><figcaption></figcaption></figure></div>

A mesma lógica anteriormente descrita vale para cadastro de badges para os módulos, quando a opção escolhida no campo "Tipo" for "Módulo Completado" ou "Módulo Completado com Pontuação Min/Max".

## [<mark style="color:blue;">Tipo "Certificado - Treinamento Completado"</mark>](#tipo-certificado-treinamento-completado)<mark style="color:blue;">:</mark>

* Tipo: Selecione o tipo <mark style="background-color:yellow;">**Certificado - Treinamento completado**</mark>

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FHbEucGEC1f7nYSYdC7Tz%2Fimage.png?alt=media&#x26;token=1654f119-a680-4583-92e6-cad8aa43aa80" alt=""><figcaption></figcaption></figure></div>

* Campo <mark style="background-color:yellow;">**"Treinamento Completado"**</mark>: permite escolher o treinamento específico do badge.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FXwYUjNo1rQOM0CiDTfO2%2Fimage.png?alt=media&#x26;token=56968a88-1674-46a4-a10c-921c6e1e52c4" alt=""><figcaption></figcaption></figure></div>

* Campo <mark style="background-color:yellow;">**"Título"**</mark>: nome do badge.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2F3wdY5drPjeqx4vcp6EMk%2Fimage.png?alt=media&#x26;token=9f20eb92-4e97-4a35-baed-6489070454ed" alt=""><figcaption></figcaption></figure></div>

* Campo <mark style="background-color:yellow;">**"Subtítulo"**</mark>: texto curto, exibido logo abaixo do "Título" na visualização do badge.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FszU4zeBPZJGz1LOhA0LJ%2Fimage.png?alt=media&#x26;token=0cfff114-b3e2-44cf-885b-e996cc55e2cc" alt=""><figcaption></figcaption></figure></div>

* Campo <mark style="background-color:yellow;">**"Texto"**</mark>: descrição do badge; texto completo que aparecerá na área de "Conquistas" do usuário.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2F0hjwSVRnBf4ronS4WsuJ%2Fimage.png?alt=media&#x26;token=d5ad7de6-72dc-4ff7-b59f-fcffe8f3bfc4" alt=""><figcaption></figcaption></figure></div>

Caso não seja preenchido, o texto é gerado automaticamente. Ex: Certificado "xxxxx" disponível.<br>

* Campo <mark style="background-color:yellow;">**"Imagem"**</mark>: imagem do badge, no tamanho de 500x500px.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FLC2ZTNKEq6MzCygFO217%2Fimage.png?alt=media&#x26;token=f20371d1-3603-4b48-9794-47ac34b70e80" alt=""><figcaption></figcaption></figure></div>

* Campo <mark style="background-color:yellow;">**"Cor Hexa"**</mark>: cor do badge; aparecerá na área de "Conquistas" do usuário.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2F2xKz0v2XpEoS3E2M1M52%2Fimage.png?alt=media&#x26;token=64baeadb-e50c-40a9-9975-51409de83dd6" alt=""><figcaption></figcaption></figure></div>

* O certificado poderá ser gerado a partir de um template (fundo do certificado sem texto) que você defina previamente. Tal template deve ser exportado como uma imagem .SVG, com resolução 1000x1000 pixels adicionado no campo "Certificado - Imagem".&#x20;

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FUwRsNuqTjLGkavo52zbX%2Fimage.png?alt=media&#x26;token=5f3aa940-c234-4239-99fe-dcec5ff07ba1" alt=""><figcaption></figcaption></figure></div>

**Exemplo:**

<figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FJ6JdmDXgemN5SpfITKeL%2Fcertificado-trilha-design-1edc8074-b54e-6714-854c-06b544221a96.png?alt=media&#x26;token=3717e1a8-cc99-4474-a1bb-69c091a11793" alt=""><figcaption></figcaption></figure>

* No campo <mark style="background-color:yellow;">**"Certificado - Texto"**</mark>, o certificado poderá receber variáveis do sistema, para que ele seja personalizado ao usuário.

<figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FyLoXH5hYcCdX0Tsg0Tkz%2Fimage.png?alt=media&#x26;token=af2bc739-407a-4821-a62e-6302942089d0" alt=""><figcaption></figcaption></figure>

São elas:

* @name: Nome do usuário
* @track: Nome da Trilha
* @date: Data que foi gerado o certificado
* @duration: Duração do treinamento (Treinamento: Duração - Texto)

O campo "Certificado - Texto" recebe diferentes instruções para definir o que será inserido no certificado. Explicando o exemplo disponível no LMS:

<mark style="color:purple;">\<svg width="1000" height="1000" viewBox="0 0 1000 1000"></mark>

Define que a imagem tem 1000x1000

<mark style="color:purple;">\<text text-anchor="middle" fill="#333" font-family="Verdana, Helvetica, sans-serif" font-size="2.2em"></mark>

\
Define a fonte a ser utilizada e o tamanho da mesma. Outras opções, conforme indicação no LMS.

<mark style="color:purple;">\<tspan x="50%" y="55%">Eu, \<tspan font-weight="bold">@name\</tspan>, concluí a trilha de microlearning\</tspan></mark>

"X" é a altura do texto; "Y" é a linha que iniciará a inserção. Nesse exemplo, a variável "@name" será inserida em bold.

<mark style="color:purple;">\<tspan x="50%" y="59%">\<tspan font-weight="bold">”@track”\</tspan> em \<tspan font-weight="bold">@date\</tspan>\</tspan></mark>

<mark style="color:purple;">\<tspan x="50%" y="63%">com duração de \<tspan font-weight="bold">@duration\</tspan> na Plataforma Grano.\</tspan></mark>

Outras 2 linhas, utilizando novas variáveis do sistema.

O resultado final, desse template, parametrizado, é:

<figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FdScObrtTq0bx8xPXBn3t%2F1edc8054-ba7e-63b2-ae8b-06b544221a96.png?alt=media&#x26;token=3cfe64a9-c93e-406f-8d66-7044704ed492" alt=""><figcaption></figcaption></figure>

O uso de variáveis é opcional pelo administrador do sistema. Caso queira apenas um texto genérico, ou uma variável específica (exemplo: @name) basta copiar/colar o trecho de código do exemplo (no campo "Certificado - Texto") e editar (ou excluir) as linhas que iniciam pela tag \<tspan>.

* Campo <mark style="background-color:yellow;">**"Share  - Título"**</mark>: é o título do badge que aparecerá na rede social, quando ele for compartilhado pelo usuário.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2F7WOrVvVzOv0nKNwCWtfW%2Fimage.png?alt=media&#x26;token=c9bbe74a-b846-4e48-8571-9237b39df901" alt=""><figcaption></figcaption></figure></div>

* Campo <mark style="background-color:yellow;">**"Share - Descrição"**</mark>: é a descrição do badge que aparecerá na rede social, quando ele for compartilhado pelo usuário.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FjG7ZmIW2mYsMSf4CqRvA%2Fimage.png?alt=media&#x26;token=781cc050-3eab-42e5-8f5b-ca18fc68c5d7" alt=""><figcaption></figcaption></figure></div>

* Campo <mark style="background-color:yellow;">**"Share  - Imagem"**</mark>: é a imagem do badge (1200x630px) que aparecerá na rede social, quando ele for compartilhado pelo usuário.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FWg5g7wSUbE2JKvk360q8%2Fimage.png?alt=media&#x26;token=54aed66d-4a16-417a-8940-e6c0449600e2" alt=""><figcaption></figcaption></figure></div>

**Exemplo Share:**

<figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FlxEvZpN96FYX1jYsaosR%2Fimage.png?alt=media&#x26;token=6864aeb9-32b8-4acd-b57c-173a6a996681" alt=""><figcaption><p>Exemplo de cadastro de badge e compartilhamento em redes sociais</p></figcaption></figure>

* Campo <mark style="background-color:yellow;">**"Chave Única"**</mark>: é a identificação do badge no LMS; algo único e específico desse badge, para que você cadastre para facilitar buscas futuras.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FBM6gsPVs1wKLXtkuWt8f%2Fimage.png?alt=media&#x26;token=2963819a-0386-47ed-a771-139725b07846" alt=""><figcaption></figcaption></figure></div>

Salve o badge para salvar todas as informações.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2F6ypbap0mWzMYBkSacpMt%2Fimage.png?alt=media&#x26;token=099d9ed2-30a5-4e08-a761-f1b4fce2de87" alt=""><figcaption></figcaption></figure></div>

Após salvar, é possível ter um preview (exemplo) de como a frase será aplicada no template, acessando o menu **"Lista - Badge"**, localizando o respectivo badge criado e, na coluna **"ações"**, clicar no **ícone (olho)** de visualizar item.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FSU6GWjLOayxesvvZUk5C%2Fimage.png?alt=media&#x26;token=47f6b9de-aa5e-4495-ad59-d2cbdcfe321f" alt=""><figcaption></figcaption></figure></div>

![](https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2Ffi8Qm9Nlpj6QAL24F1QP%2Fimage.png?alt=media\&token=2dfcbd88-23d7-4987-8ed7-5ed2360be017)

## <mark style="color:blue;">Exemplo dos badges na aba de Conquistas:</mark>

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FgF2hv2dI9LeALk8tiRH8%2Fimage.png?alt=media&#x26;token=175f2b27-259b-4d97-a7c8-a8707c37b84b" alt=""><figcaption></figcaption></figure></div>

***

> *© 2026 Grano Edtech LTDA. Todos os direitos reservados.*
