Fillio 폼 임베드하기

Fillio 폼을 웹사이트에 추가하는 세 가지 방법: 표준, 팝업, 전체 페이지.

코드를 찾는 곳

폼을 열고 공유 탭으로 가서 임베드를 고르세요. Fillio가 폼 ID와 선택한 옵션을 이미 채워 넣은 코드를 만들어 줍니다. 아래 예시가 그 결과물입니다.

임베드 모드

레이아웃에 맞는 모드를 선택하세요.

표준

페이지 섹션 내 인라인 임베드

팝업

트리거 시 모달 오버레이로 열림

전체 페이지

전체 HTML 페이지를 차지함

표준 임베드

코드를 임의의 HTML 페이지에 붙여넣으세요. 폼이 인라인 iframe으로 렌더링됩니다.

임베드 코드

<iframe data-fillio-src="https://fillio.so/embed/YOUR_FORM_ID" width="100%" height="800" frameborder="0" marginheight="0" marginwidth="0" title="Form" loading="lazy"></iframe>
<script>var d=document,w="https://fillio.so/widgets/embed.js",v=function(){"undefined"!=typeof Fillio?Fillio.loadEmbeds():d.querySelectorAll("iframe[data-fillio-src]:not([src])").forEach((function(e){e.src=e.dataset.fillioSrc}))};if("undefined"!=typeof Fillio)v();else if(d.querySelector('script[src="'+w+'"]')==null){var s=d.createElement("script");s.src=w,s.onload=v,s.onerror=v,d.body.appendChild(s);}</script>

자동 크기 조정은 코드에 들어 있는 위젯 스크립트가 맡습니다. 그대로 두면 응답자가 페이지를 오갈 때 iframe이 폼에 맞춰 커지고 작아집니다.

스크립트 없이

위젯을 불러오고 싶지 않다면 높이를 고정한 평범한 iframe을 쓰세요. 크기가 변하지 않으니 가장 긴 페이지에 맞는 높이를 고르세요.

<iframe src="https://fillio.so/embed/YOUR_FORM_ID" width="100%" height="800" frameborder="0" marginheight="0" marginwidth="0" title="Form" style="border: 1px solid #e5e7eb; border-radius: 8px;"></iframe>

옵션

임베드 URL에 다음 쿼리 매개변수를 추가하여 동작을 맞춤 설정하세요.

매개변수	설명
?hideTitle=1	임베드 내 폼 제목을 숨깁니다
?transparentBackground=1	임베드 프레임에서 흰색 배경을 제거합니다
?dynamicHeight=1	폼 높이에 맞게 iframe을 자동으로 조절합니다

팝업 임베드

어떤 버튼이나 링크에서도 폼을 트리거할 수 있습니다. Fillio 위젯 스크립트 로드가 필요합니다.

1. 스크립트 추가

<script async src="https://fillio.so/widgets/embed.js"></script>

2. 버튼으로 트리거

<button data-fillio-open="YOUR_FORM_ID" data-fillio-width="500">Open Form</button>

data-fillio-open이 붙은 요소에는 Fillio의 기본 버튼 스타일이 적용됩니다. 직접 만든 클래스를 더해 덮어쓰세요.

속성	설명
data-fillio-open	폼 ID (필수)
data-fillio-width	팝업 너비(픽셀)
data-fillio-hide-title	1로 설정하면 폼 제목을 숨깁니다

3. JavaScript로 트리거

Fillio.openPopup('YOUR_FORM_ID', {
  width: 500,
  hideTitle: false,
  onOpen: function () {},
  onClose: function () {}
});

직접 만든 코드에서 언제든 팝업을 닫을 수 있습니다.

Fillio.closePopup('YOUR_FORM_ID');

링크로 열기

URL 프래그먼트를 쓰면 페이지가 열리는 즉시 팝업이 뜨므로, 메뉴 항목이나 메시지, 다른 페이지에서 폼으로 데려오기 쉽습니다.

<a href="https://your-site.com/page#fillio-open=YOUR_FORM_ID&fillio-width=600">Open Form</a>

팝업 동작

팝업은 너비를 지정하지 않으면 500px이고, 가로세로 어느 쪽으로도 화면의 90%를 넘지 않습니다. 배경을 클릭하거나 Esc를 누르면 닫히며, 열고 닫히는 순간에 각각 onOpen과 onClose가 실행됩니다.

전체 페이지 임베드

폼이 전체 뷰포트를 채워야 할 때 이 HTML 템플릿을 사용하세요.

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Form</title>
    <script async src="https://fillio.so/widgets/embed.js"></script>
    <style type="text/css">
      html { margin: 0; height: 100%; overflow: hidden; }
      iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 0; }
    </style>
  </head>
  <body>
    <iframe data-fillio-src="https://fillio.so/embed/YOUR_FORM_ID" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0" title="Form"></iframe>
  </body>
</html>

옵션

임베드 URL에 다음 쿼리 매개변수를 추가하여 동작을 맞춤 설정하세요.

매개변수	설명
?transparentBackground=1	임베드 프레임에서 흰색 배경을 제거합니다

팁

임베드된 폼은 호스팅된 폼과 똑같이 동작합니다. 조건부 로직, 여러 페이지, 폼 테마 모두 iframe 안에서 그대로 작동합니다.