Putting a card on your own site
A card can live inside a page you already have, whether a team page, an intranet post or a site for the occasion, as a frame holding the real card rather than a picture of one.
What the embed is
The same card, rendered without Noya around it: no site header, no editing controls, nothing belonging to whoever made it. People reading your page can read the cards and add their own, exactly as they could on the link. The framed card is not indexed by search engines, and anything in it that leads back to Noya opens in a new tab rather than inside your page.
The code
Paste this wherever the card should sit, and replace YOUR_WALL_ID with your card's own id, the part of its link that comes after /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>What you can change
The frame is an ordinary iframe, so its attributes are yours to edit to suit the page it lands on.
| Attribute | What it does |
|---|---|
| width | How wide the frame is. Left at 100% it takes the width of whatever column it sits in. |
| height | How tall the frame is, in pixels. The frame does not grow as the card does, so a card taller than this scrolls inside it. |
| title | What the frame is called for screen readers, and for anyone browsing without images. |
| loading | Left as lazy, the card is only fetched once a reader scrolls near it. |
A worked example
The same snippet with a card's id filled in and a height chosen for the page it sits on.
<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>Worth doing
- Leave the width at 100% so the card follows your layout instead of pushing out of it.
- Pick a height you are happy to scroll inside, and raise it when the card fills up.
- Keep the lazy loading. A card further down a page should not hold up the top of it.
- Embed the invite link, never the delivery link. A card on a page you have published is a card people are meant to write on, which is not what the delivery link is for.
Where to find it in Noya
You do not have to copy anything from this page. Open Embed in the card's tool rail and the snippet is there with that card's id already in it, and a button that copies the lot.