Colocar um cartão no seu próprio site
Um cartão pode ficar dentro de uma página que você já tem (a página da equipe, um post na intranet, um site feito para a ocasião), como uma moldura segurando o cartão de verdade, e não uma foto dele.
O que é a incorporação
O mesmo cartão, exibido sem o Noya em volta: sem o cabeçalho do site, sem controles de edição, sem nada que pertença a quem o fez. Quem lê a sua página pode ler os cartões e acrescentar o seu, exatamente como faria pelo link. O cartão na moldura não aparece em buscadores, e tudo nele que leva de volta ao Noya abre numa aba nova, e não dentro da sua página.
O código
Cole isto onde o cartão deve ficar e troque YOUR_WALL_ID pelo id do seu cartão, a parte do link dele que vem depois de /c/.
<iframe data-noya-src="https://noya.so/embed/YOUR_WALL_ID" width="100%" height="720" style="border:0;width:100%;" title="Noya" loading="lazy" allow="camera; microphone" referrerpolicy="no-referrer-when-downgrade"></iframe>
<script>(function(d){var w="https://noya.so/noya-embed.js",v=function(){if(window.noyaEmbed){window.noyaEmbed.load()}else{d.querySelectorAll("iframe[data-noya-src]:not([src])").forEach(function(f){f.src=f.getAttribute("data-noya-src")})}};if(window.noyaEmbed){v()}else if(!d.querySelector('script[src="'+w+'"]')){var s=d.createElement("script");s.src=w;s.async=true;s.onload=v;s.onerror=v;(d.body||d.head).appendChild(s)}})(document);</script>O que dá para mudar
A moldura é um iframe comum, então os atributos dela são seus para editar conforme a página em que ela cai.
| Atributo | O que faz |
|---|---|
| width | A largura da moldura. Deixada em 100%, ela ocupa a largura da coluna em que estiver. |
| height | A altura da moldura, em pixels. A moldura não cresce junto com o cartão, então um cartão mais alto do que isso rola dentro dela. |
| title | Como a moldura é chamada para leitores de tela, e para quem navega sem imagens. |
| loading | Deixado em lazy, o cartão só é buscado quando alguém rola perto dele. |
Um exemplo pronto
O mesmo trecho com o id de um cartão preenchido e uma altura escolhida para a página em que ele fica.
<iframe data-noya-src="https://noya.so/embed/b7Kq2mXsPnR4" width="100%" height="1000" style="border:0;width:100%;" title="Noya" loading="lazy" allow="camera; microphone" referrerpolicy="no-referrer-when-downgrade"></iframe>
<script>(function(d){var w="https://noya.so/noya-embed.js",v=function(){if(window.noyaEmbed){window.noyaEmbed.load()}else{d.querySelectorAll("iframe[data-noya-src]:not([src])").forEach(function(f){f.src=f.getAttribute("data-noya-src")})}};if(window.noyaEmbed){v()}else if(!d.querySelector('script[src="'+w+'"]')){var s=d.createElement("script");s.src=w;s.async=true;s.onload=v;s.onerror=v;(d.body||d.head).appendChild(s)}})(document);</script>Vale a pena
- Deixe a largura em 100% para o cartão acompanhar o seu layout em vez de sair dele.
- Escolha uma altura em que você não se importe de rolar, e aumente quando o cartão encher.
- Mantenha o lazy loading. Um cartão lá embaixo numa página não deve segurar o começo dela.
- Incorpore o link de convite, nunca o de entrega. Um cartão numa página que você publicou é um cartão em que as pessoas devem escrever, e não é para isso que serve o link de entrega.
Onde achar isso no Noya
Você não precisa copiar nada desta página. Abra Incorporar na barra de ferramentas do cartão e o trecho já está lá com o id daquele cartão, e um botão que copia tudo.