> For the complete documentation index, see [llms.txt](https://docs.grano.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.grano.app/conteudo/estrutura-e-conteudos/badges-e-certificados.md).

# 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="/files/qflBcEH1cKQuvuHEMQFI" alt=""><figcaption></figcaption></figure></div>

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

<div align="left"><figure><img src="/files/3xWcdiVdxitHSTPCIZ0M" 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="/files/Eggk0bhMehQzTRRammmj" 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="/files/d7fQxLGHYB1iETYIPhGc" 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="/files/ss9VqhSu5an4ytYJz4zn" 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="/files/eXf9uj3wU1VgCzyQ50us" 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="/files/ldGJMuHP6n7PH6gFc1Xl" 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="/files/kwcsSUD2q5RBdinaekf8" 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="/files/c4gfkJmnLXfxZ5kyY8qb" 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="/files/nbmgTKFHDauB55p2EdHx" 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="/files/oFRffEum0L3mDdD9VYVa" 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="/files/PWuBisCLeNuTUfgCTwJJ" alt=""><figcaption></figcaption></figure></div>

**Exemplo Share:**

<figure><img src="/files/ne8sArQHmsPV54kPNOsK" 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="/files/siJHIG3nmluxTTBMp8jv" 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="/files/TJc5ASfTBw3Hf23L5r9J" 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="/files/gOuBAlOnxhb54UAxapZi" 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="/files/d7fQxLGHYB1iETYIPhGc" alt=""><figcaption></figcaption></figure></div>

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

<div align="left"><figure><img src="/files/ss9VqhSu5an4ytYJz4zn" 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="/files/eXf9uj3wU1VgCzyQ50us" 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="/files/ldGJMuHP6n7PH6gFc1Xl" 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="/files/kwcsSUD2q5RBdinaekf8" 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="/files/c4gfkJmnLXfxZ5kyY8qb" 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="/files/EILK9jiPGbkjVI6Ce9sj" alt=""><figcaption></figcaption></figure></div>

**Exemplo:**

<figure><img src="/files/q1yeNkqxg8uYuXMfpG7y" 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="/files/ypOrGC3mvCvyeMnIKHJu" 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="/files/83BQ2YHuhaPpLeyoohZ1" 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="/files/nbmgTKFHDauB55p2EdHx" 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="/files/oFRffEum0L3mDdD9VYVa" 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="/files/PWuBisCLeNuTUfgCTwJJ" alt=""><figcaption></figcaption></figure></div>

**Exemplo Share:**

<figure><img src="/files/ne8sArQHmsPV54kPNOsK" 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="/files/siJHIG3nmluxTTBMp8jv" alt=""><figcaption></figcaption></figure></div>

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

<div align="left"><figure><img src="/files/jUvLZmB2d75ENUnClaCu" 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="/files/vZ6KrDjuvDBMUplTDIme" alt=""><figcaption></figcaption></figure></div>

![](/files/6TaFdqPqb44bjge0QJRw)

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

<div align="left"><figure><img src="/files/BXS9l4sF9Um3MgPpBo3T" alt=""><figcaption></figcaption></figure></div>

***

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