# 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.*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.grano.app/conteudo/estrutura-e-conteudos/badges-e-certificados.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.