PollUnit 임베드
내 웹사이트의 투표, 설문조사, 사진 콘테스트
PollUnit으로 설문조사와 투표를 내 웹사이트에 통합하세요. 여기에서는 고급 프로그래밍 지식 없이 PollUnit을 홈페이지에 임베드하는 방법을 보여 줍니다.
어떤 PollUnit 유형이든 홈페이지에 임베드할 수 있습니다. 이렇게 하면 일정 조율, 평가, 이미지 투표를 웹사이트에 쉽게 통합할 수 있습니다. 먼저 PollUnit을 만들어야 합니다. 방법은 여기에서 확인할 수 있습니다:
첫 투표 만들기
계정을 만들면 모든 PollUnit이 »내 PollUnits« 섹션에 표시됩니다. 여기에서 필요한 설정을 할 수 있습니다.
컨텍스트 메뉴 아이콘(점 세 개)을 클릭하면 메뉴가 나타납니다.
PollUnit 자체에서도 컨텍스트 메뉴를 직접 열 수 있습니다(관리자 링크). 권한에 따라 다른 기능도 여기에 표시될 수 있습니다.
자신의 설문조사와 투표만 홈페이지에 게시할 수 있습니다. 다른 사람의 PollUnit을 게시하려면 해당 사람이 필요한 설정을 해야 합니다. 또한 Premium 사용자의 설문조사만 자신의 웹사이트에 임베드할 수 있습니다.
»임베딩«을 클릭하세요.
여기에서 먼저 웹사이트의 호스트를 입력해야 합니다. 이렇게 하면 웹사이트가 PollUnit에 접근할 수 있습니다. 호스트는 domain.com 또는 subdomain.domain.com과 같은 형태일 수 있습니다.
이는 다른 웹사이트가 허가 없이 투표를 임베드하지 못하도록 하기 위해 필요합니다. 원하는 수의 웹사이트나 호스트에 대해 설문조사를 활성화할 수 있습니다.
»Code« 섹션에서 작은 코드 스니펫을 받을 수 있습니다. 이 코드는 웹사이트에 포함해야 합니다. 필요에 맞게 콘텐츠의 높이와 너비를 조정할 수 있습니다.
<div data-pollunit-width="100%" data-pollunit-height="700"
data-pollunit-src="https://pollunit.com/polls/MEMBERLINK"></div>
<script src="https://pollunit.com/embed/v2.1/parent_code.js"
integrity="sha384-6II6rmwjJBTtYXvc8Cp7CNK/1EEbdzNNwHHmbKeEJgO/mLDydfVVAWxx108HCuZd"
crossorigin="anonymous">
</script>
참여자 링크를 관리자 링크로 바꾸면 PollUnit의 관리자 보기도 웹사이트에 통합할 수 있습니다. 이 경우 웹사이트를 적절히 보호해야 합니다!
이제 참여자는 내 웹사이트에서 직접 옵션을 평가하고 추가하며 댓글을 달 수 있습니다. 참여자에게 계정은 필요하지 않습니다.
고급 임베딩 옵션
div에 data-pollunit-options="..."를 추가하면 추가 설정을 할 수 있습니다. 이 설정은 내 웹사이트의 투표에만 적용되며, 독립 실행형 PollUnit에는 영향을 주지 않습니다.
autoresize
스니펫을 조정하면 임베드된 콘텐츠가 웹사이트에서 최적의 높이로 자동 조정되도록 할 수 있습니다. 이렇게 하면 설문조사 안에서 스크롤할 필요가 없습니다.
<div data-pollunit-width="100%" data-pollunit-height="700"
data-pollunit-src="https://pollunit.com/polls/MEMBERLINK"
data-pollunit-options="autoresize"></div>
<script src="https://pollunit.com/embed/v2.1/parent_code.js"
integrity="sha384-6II6rmwjJBTtYXvc8Cp7CNK/1EEbdzNNwHHmbKeEJgO/mLDydfVVAWxx108HCuZd"
crossorigin="anonymous">
</script>
임베드된 설문조사는 모바일 기기 해상도를 포함해 웹사이트에 반응형으로 맞춰집니다.
kill_background
kill_background을 사용하면 PollUnit의 배경을 숨길 수 있습니다. 그러면 투표가 웹사이트에 투명하게 임베드되어 웹사이트의 색상이나 배경 이미지/패턴이 그대로 보입니다.
<div data-pollunit-width="100%" data-pollunit-height="700"
data-pollunit-src="https://pollunit.com/polls/MEMBERLINK"
data-pollunit-options="kill_background"></div>
<script src="https://pollunit.com/embed/v2.1/parent_code.js"
integrity="sha384-6II6rmwjJBTtYXvc8Cp7CNK/1EEbdzNNwHHmbKeEJgO/mLDydfVVAWxx108HCuZd"
crossorigin="anonymous">
</script>
kill_padding
kill_padding을 사용하면 PollUnit 주변의 여백을 제거해 전체 페이지를 채우지 않는 레이아웃에서 공간을 절약할 수 있습니다.
<div data-pollunit-width="100%" data-pollunit-height="700"
data-pollunit-src="https://pollunit.com/polls/MEMBERLINK"
data-pollunit-options="kill_padding"></div>
<script src="https://pollunit.com/embed/v2.1/parent_code.js"
integrity="sha384-6II6rmwjJBTtYXvc8Cp7CNK/1EEbdzNNwHHmbKeEJgO/mLDydfVVAWxx108HCuZd"
crossorigin="anonymous">
</script>
kill_title
kill_title을 사용하면 PollUnit의 제목이 숨겨집니다. 이를 통해 웹사이트에서 직접 제목이나 헤딩을 만들 수 있습니다.
<div data-pollunit-width="100%" data-pollunit-height="700"
data-pollunit-src="https://pollunit.com/polls/MEMBERLINK"
data-pollunit-options="kill_title"></div>
<script src="https://pollunit.com/embed/v2.1/parent_code.js"
integrity="sha384-6II6rmwjJBTtYXvc8Cp7CNK/1EEbdzNNwHHmbKeEJgO/mLDydfVVAWxx108HCuZd"
crossorigin="anonymous">
</script>
옵션 조합
여러 옵션을 사용하려면 예시처럼 쉼표로 구분해 추가할 수 있습니다.
<div data-pollunit-width="100%" data-pollunit-height="700"
data-pollunit-src="https://pollunit.com/polls/MEMBERLINK"
data-pollunit-options="autoresize,kill_title,kill_padding,kill_background"></div>
<script src="https://pollunit.com/embed/v2.1/parent_code.js"
integrity="sha384-6II6rmwjJBTtYXvc8Cp7CNK/1EEbdzNNwHHmbKeEJgO/mLDydfVVAWxx108HCuZd"
crossorigin="anonymous">
</script>
CMS(Content Management System)를 위한 투표
투표를 Wordpress에 통합하든, Joomla에서 투표를 구현하든, Drupal에서 이미지 투표를 만들든 PollUnit을 사용하면 몇 초 만에 가능합니다. 물론 다른 웹 기술에도 PollUnit을 통합할 수 있습니다.