내 사이트에 카드 올리기
카드는 이미 갖고 있는 페이지 안에서도 살 수 있어요. 팀 페이지, 사내 게시글, 그날을 위한 사이트 안에요. 카드 사진이 아니라 진짜 카드를 담은 창으로요.
임베드가 무엇인가요
Noya의 껍데기 없이 그려진 같은 카드예요. 사이트 헤더도, 편집 도구도, 만든 사람의 것은 아무것도 없어요. 내 페이지를 읽는 사람은 링크에서와 똑같이 카드를 읽고 자기 것을 남길 수 있어요. 틀 안의 카드는 검색 엔진에 올라가지 않고, 그 안에서 Noya로 이어지는 것은 내 페이지 안이 아니라 새 탭에서 열려요.
코드
카드가 있어야 할 자리에 이걸 붙여 넣고, YOUR_WALL_ID 부분을 내 카드 id로 바꿔 주세요. 링크에서 /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>바꿀 수 있는 것
이 틀은 평범한 iframe이라, 올라갈 페이지에 맞게 속성을 마음대로 고쳐도 돼요.
| 속성 | 하는 일 |
|---|---|
| width | 틀의 너비예요. 100%로 두면 들어가는 칸의 너비를 그대로 따라가요. |
| height | 틀의 높이예요, 픽셀 단위로요. 카드가 길어져도 틀은 커지지 않아서, 이보다 긴 카드는 안에서 스크롤돼요. |
| title | 스크린 리더가 읽어 주는 틀의 이름이고, 이미지 없이 보는 사람에게도 보여요. |
| loading | lazy로 두면 읽는 사람이 가까이 스크롤할 때에야 카드를 불러와요. |
실제 예시
카드 id를 채우고 그 페이지에 맞는 높이를 정한, 같은 코드예요.
<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>이렇게 하면 좋아요
- 너비는 100%로 두세요. 그래야 카드가 레이아웃 밖으로 밀고 나오지 않고 따라가요.
- 스크롤해도 괜찮을 높이를 고르고, 카드가 차면 높여 주세요.
- lazy 로딩은 그대로 두세요. 페이지 아래쪽의 카드가 위쪽을 붙잡고 있으면 안 되니까요.
- 전달 링크가 아니라 초대 링크를 임베드하세요. 공개한 페이지에 올린 카드는 사람들이 쓰라고 있는 것이고, 그건 전달 링크가 할 일이 아니에요.
Noya 안에서 찾기
이 페이지에서 뭘 복사하지 않아도 돼요. 카드 도구 막대에서 ‘임베드’를 열면 그 카드 id가 이미 들어간 코드가 있고, 전부 복사해 주는 버튼도 있어요.