# Embed

Suporta as mesmas funcionalidades do card [**Default**](/conteudo/estrutura-e-conteudos/cards/default.md), porém possibilita trazer *embeds* de plataformas externas, em dois formatos:

* HTML
* URL

### <mark style="color:blue;">Embed HTML</mark>

\
Basta colar o trecho HTML a ser embedado (copiado da plataforma externa) no campo "<mark style="background-color:yellow;">**Embed - Html**</mark>".

Caso esse embed permita receber parâmetros da plataforma de origem, a Grano possibilita que você adicione dois valores específicos:

* **@GRANO\_USER\_ID@** para o código do usuário.&#x20;
* **@GRANO\_USER\_NAME@** para nome do usuário.

### <mark style="color:blue;">Embed URL</mark>

\
Basta colar a URL a ser embedada (copiado da plataforma externa) no campo "<mark style="background-color:yellow;">**Embed - Url**</mark>".

A Grano **suporta qualquer URL** (YouTube, Vimeo, playlist do Spotify, Typeform, Google Forms, sites de notícias, etc.). O conteúdo (embed) será exibido dentro dos limites (tamanho) do card.

### <mark style="color:blue;">Inline / Outline</mark>

\
O campo "<mark style="background-color:yellow;">**Embed - Inline**</mark>" determina o padrão de abertura do embed (HTML ou URL), sendo:

* **Inline: SIM** -- ignora toda a configuração prévia desse card e exibe o embed **por cima de tudo**.
* **Inline: NÃO** -- mantém a configuração prévia do card (padrão de cores e textos), exibindo um "botão de play" (como ação prévia para abrir o conteúdo do embed em si).

<div align="left"><figure><img src="https://lh6.googleusercontent.com/dRnQjXnRgjCSWDtvdiaYX8ruQe7lxLMIxdQv2NZRcqCpo04uT5AVWl5ncl0FBrFuOeqnjub8JGnCpBl5TinMktrjp_ihLqYJitnMumVd5QyZwxYQ6sjjQgjMWHNecVH9aT9h8eYwE_EDE2aEw7WNYM4" alt=""><figcaption><p>Campo "Embed - Inline"</p></figcaption></figure></div>

**Inline: SIM** -- abre o embed "dentro do card":

![](https://lh4.googleusercontent.com/UaPiGEXz7Z3GPhoDLPCOolXusqAFKNeSlCbfKdFGpXRO_FMEG2C87y_XDu-giv1OLfMUh9iMbBwTZZ3O0v49UCwb6nxrUPO6PWxEd-csth9CQ3V_eA6XnxMDKElnE-2PdWGpSxxdy5UiTU8MqNXOPz4)

**Inline: NÃO** --  exibe card anterior, com botão de play; ao clicar no play, o conteúdo embedado fica sobre o card.\
\
![](https://lh3.googleusercontent.com/X-SiDSnrumYyo5JRFjPmlOxaINcg96X2oA0IDc3KaKR8SkCJIwrrgWB4SF_RddjjBfeSy85624LbEBCdT2NlxWZc9Zgqt2Yy1cfrUzoOpNuwt2tUvjasx_zX5OMc0FlLlyKrZvzKPXLYFfMmuGExHBI)

### <mark style="color:blue;">Rodapé do Card</mark>

\
No card tipo **Embed** sempre são exibidos os botões "**Voltar**" e "**Avançar**" no rodapé do respectivo card.

Isso visa dar ao usuário a opção de prosseguir sua navegação, independente (e sem interferência) do conteúdo do embed.

{% hint style="info" %}
Lembrar de sempre clicar na opção “**Salvar Card**” ao final de cada cadastro ou edição.
{% endhint %}

![](/files/X6MDbjt0QQ3vCSZqOmN6)

{% hint style="warning" %}
Na Grano, é necessário que você fique atento aos **tamanhos** dos arquivos e mídias no momento de fazer o cadastro dos cards.\
\
**Cards imagem = até 800 KB**\
**Gifs e Vídeos que são cadastrados direto na plataforma =** **até 200KB** - Esse peso não se aplica para vídeos que serão hospedados em outras ferramentas (Vimeo, Youtube, etc)\
**Sons = até 10 MB**\
\
**Lembre-se:** arquivos mais leves são preferíveis. Eles contribuem para o desempenho otimizado da plataforma e aprimoram a experiência do usuário. Antes de fazer o upload, confira o tamanho dos arquivos que você planeja enviar e realize os ajustes necessários. \
\
Se precisar reduzir o tamanho de um arquivo, ferramentas de compressão online gratuitas podem ser uma solução útil.
{% endhint %}

### <mark style="color:blue;">Exemplos de Embeds:</mark>

Vídeo de **Vimeo**; inline: NÃO.

![](https://lh4.googleusercontent.com/UaPiGEXz7Z3GPhoDLPCOolXusqAFKNeSlCbfKdFGpXRO_FMEG2C87y_XDu-giv1OLfMUh9iMbBwTZZ3O0v49UCwb6nxrUPO6PWxEd-csth9CQ3V_eA6XnxMDKElnE-2PdWGpSxxdy5UiTU8MqNXOPz4)

Vídeo de **Youtube**; inline: SIM.

![](https://lh6.googleusercontent.com/cG7m-1DhuUbA18m7_CgljzHAB6z5YYRXbpzKWQnhD5Y-OCMJzfb_YgfWnMktVDc_shFp3B9T-JiqKksEe1EkVm-XE707Ma7XMUNs-F9HpzJjFIqv2DCsns6wvjnBWeEfc1d-uK9FfIP4ynDOE55A3y4)

Playlist de **Spotify**; inline: SIM.

![](/files/98FVkeJHlg2hk24LbFyO)

Embed "**Link de notícia de Portal**"; inline: SIM.

*(nesse caso o card possibilita "fazer scroll" normalmente para ler a notícia)*

![](https://lh3.googleusercontent.com/4qgZacEWHimCcwCpn9EPF2rXlEEUOV1efn8D069VVfEABw7pD0D3mAtEkGvWcEwlV45AIpDBOKL5ZyeKaly8sxMOhoND7m9Unn_JkE0YEIZ5kKHpMu_HzWUA78pA0bM7KfvQexUQY8kATViYh4BxaIA)

***

> *© 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/cards/embed.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.