조이 가이드

super.so에 설치하기

oopy.io는 노션페이지를 웹사이트로 만들어주는 서비스입니다.

우피로 만든 웹페이지에 한번에 조이 블록을 설치하는 방법을 알아보겠습니다.

먼저 아래의 과정을 진행해주세요!

• oopy.io에 로그인
• 노션 페이지 연결

1. 조이 Embed Script를 만들어주세요.

https://joey.team/script에 들어가시면 Embed로 블록을 설치할 수 있는 스크립트가 있습니다. Comment Block, Q&A Block, Like Block을 누르면 댓글, Q&A, 좋아요를 넣는 스크립트가 만들어집니다.

oopy.io에 사용하기 위해서는 약간의 수정이 필요합니다. 빨간색 영역의 내용을 복사해서 아래 [여기에 복사한 텍스트를 넣어주세요.]에 넣어주세요.

아래 스크립트를 수정해서 사용해주세요.

<script>
	window.onload = function() {
	  const content = document.getElementsByClassName("notion-page-content")[0];
		content.insertAdjacentHTML("beforeend", '**[여기에 복사한 텍스트를 넣어주세요.]'**);
		content.lastChild.style = "width:100%;";
		(function() {
      var d = document, s = d.createElement('script');
      s.src = '<https://joey.team/embed.js>';
      s.setAttribute('data-timestamp', +new Date());
      (d.head || d.body).appendChild(s);
      })();
	}
</script>

붙여넣기 된 예시입니다.

<script>
	window.onload = function() {
	  const content = document.getElementsByClassName("notion-page-content")[0];
		content.insertAdjacentHTML("beforeend", '<div class="joey_block" owner_id="gIXHefbD9KXEnudcMRfHALtGcDa2" block_type="comment"></div>');
		content.lastChild.style = "width:100%;";
		(function() {
      var d = document, s = d.createElement('script');
      s.src = '<https://joey.team/embed.js>';
      s.setAttribute('data-timestamp', +new Date());
      (d.head || d.body).appendChild(s);
      })();
	}
</script>

2. HTML edition설정 창을 아래 순서에 따라 들어가주세요.

HTML edition(맨 아래) > Go