PrequalFunnel로 웹사이트에 모기지(주택담보대출) 계산기를 임베드하려면, 원하는 위치에 div 하나와 script 태그 하나를 붙여 넣으면 됩니다. 방식은 인라인(스타일 격리, iframe 없음), 프레임 안 인라인, 팝업 버튼, 플로팅 버블, 자체 버튼 또는 링크, 직접 링크, 기존 iframe 중에서 고릅니다. HighLevel, WordPress, Wix, Squarespace, Webflow에서 작동합니다.
핵심 요약
- 코드 한 줄: div 하나와 script 하나.
- 인라인 방식은 스타일이 격리되어 사이트의 CSS가 계산기를 깨뜨리지 않습니다.
- 그 밖의 경우에는 팝업, 플로팅, 자체 트리거, 직접 링크, 기존 iframe을 씁니다.
- HighLevel 퍼널을 포함해 사용자 HTML을 허용하는 모든 빌더에서 작동합니다.
01
임베드 코드는 어떻게 작동합니까?
임베드는 계산기를 지정하는 요소 하나와 작은 로더 스크립트로 이루어집니다. 로더가 요소를 찾고, 저장된 설정(테마, 색상, 문구)을 불러와 그 자리에 계산기를 표시합니다. 설정은 실행 시점에 불러오므로 대시보드에서 바꾼 내용이 코드를 다시 고치지 않아도 사이트에 반영됩니다.
기본값인 인라인 방식에는 iframe이 없습니다. 계산기는 페이지 안의 격리된 컨테이너에 표시되므로 사이트 테마의 CSS가 글꼴이나 간격을 바꿀 수 없고, 계산기의 스타일도 밖으로 새어 나가 페이지를 바꾸지 않습니다. 인라인 표시가 완료되지 않으면 자동으로 프레임 방식으로 전환되어, 차입자는 여전히 작동하는 계산기를 봅니다.
인라인 방식은 요소 안에 검색 엔진이 읽을 수 있는 콘텐츠를 선택적으로 담을 수도 있습니다. 제목, 짧은 소개, 용어 정의, 면책 조항, 그리고 선택적인 구조화 데이터입니다. 계산기가 있는 페이지에 검색 엔진이 읽을 내용이 생깁니다. 순위를 약속하지는 않습니다. 계산기 자리가 빈 상자로 보이는 것을 막을 뿐입니다.
모든 방식이 같은 리드 양식을 쓰므로, 어떤 방식을 고르든 리드는 같은 입력값, 결과, 유입 경로와 함께 내장 CRM에 들어옵니다.
임베드 코드는 어떤 모양입니까?
대시보드에서 받는 코드 조각의 형태입니다. 복사할 때 실제 키와 계산기가 채워집니다. 방식을 바꾸려면 data-mode를 변경합니다.
<!-- FHA 계산기, 인라인(기본값) -->
<div data-prequal="fha-loan" data-key="ak_…" data-mode="inline" data-lang="en"></div>
<script src="https://app.prequalfunnel.com/embed.js" async></script>
<!-- 같은 계산기를 왼쪽 아래 플로팅 버블로 -->
<div data-prequal="fha-loan" data-key="ak_…" data-mode="floating"
data-label="FHA 월 상환액 계산하기" data-color="#0f5c4a" data-position="bl"></div>
<!-- 자체 버튼으로 열기 -->
<button class="open-calculator">내 숫자 확인하기</button>
<div data-prequal="fha-loan" data-key="ak_…" data-mode="trigger" data-trigger=".open-calculator"></div>어떤 임베드 방식을 써야 합니까?
인라인으로 시작하십시오. 페이지 레이아웃이나 빌더 사정에 따라 다른 방식을 씁니다.
| 방식 | 표시 형태 | 적합한 용도 |
|---|---|---|
| 인라인(기본값) | 페이지 흐름 안에 표시, 스타일 격리, iframe 없음 | 계산기 페이지와 대출 프로그램 페이지 |
| 프레임 안 인라인 | 페이지 흐름 안의 자동 크기 조절 프레임 | 페이지 자체의 스크립트를 제한하는 빌더 |
| 팝업 버튼 | 누르면 팝업으로 계산기가 열리는 버튼 | 히어로 섹션과 요금표 형태의 블록 |
| 플로팅 버블 | 모든 페이지 모서리의 버튼(위 또는 아래, 왼쪽 또는 오른쪽) | 사이트 전체 적용 |
| 자체 버튼 또는 링크 | CSS 선택자에 맞는 요소를 누르면 열림 | 기존 CTA, 메뉴 항목, 이미지 |
| 직접 링크 | 전체 페이지 계산기 URL | 이메일, 문자, 소셜 프로필, QR 코드 |
| 기존 iframe | 표준 iframe | iframe만 허용하는 오래된 플랫폼 |
인라인과 iframe, 실제로 무엇이 다릅니까?
둘 다 작동합니다. 대부분의 대출 담당자(LO) 웹사이트에는 인라인이 더 나은 기본값입니다.
인라인(iframe 없음)
- 페이지에 맞춰 자연스럽게 크기가 정해져, 스크롤 안의 스크롤이 없습니다
- 양방향으로 스타일이 격리됩니다
- 검색 엔진이 읽을 수 있는 제목, 용어 정의, 면책 조항을 담을 수 있습니다
- 사이트 내 여러 페이지에 걸쳐 첫 유입 경로와 마지막 유입 경로를 유지합니다
- 필요하면 자동으로 프레임 방식으로 전환됩니다
기존 iframe
- 거의 모든 플랫폼에서 허용됩니다
- 자동 크기 조절 프레임 방식을 쓰지 않으면 상자 크기가 고정됩니다
- 콘텐츠가 다른 페이지에 있어, 내 페이지 크롤링에는 보이지 않습니다
- 페이지 URL을 넘기지 않으면 호스트 페이지만 알고 전체 캠페인 이력은 모릅니다
- 제한이 많은 빌더용 대안으로는 충분합니다
계산기 주변 페이지에는 무엇이 있어야 합니까?
계산기에는 자체 면책 조항이 있지만, 계산기가 놓인 페이지는 귀하의 광고입니다. NMLS ID, 공정 주택 기회(Equal Housing Opportunity) 문구, 주별 면허 정보를 잘 보이게 두고, 리드 양식의 동의 문구가 전화·문자 연락에 대해 컴플라이언스 팀이 승인한 내용과 일치하는지 확인하십시오. 배경 설명은 TCPA 동의를 참고하시고, 구체적인 상황은 컴플라이언스 팀이나 법률 자문에게 확인하십시오.
더 읽어 보기
자주 묻는 질문 · 질문 10개
대출 담당자들이 묻는 질문
WordPress에 모기지 계산기를 임베드하려면 어떻게 합니까?
계산기를 표시할 위치에 사용자 HTML 블록을 추가하고 대시보드의 코드 조각을 붙여 넣습니다. 로더 스크립트도 같은 블록에 둘 수 있습니다. 보안 플러그인이 스크립트를 제거한다면 해당 스크립트를 허용하거나, 프레임 안 인라인 또는 기존 iframe 방식을 쓰십시오.
HighLevel 퍼널과 웹사이트에서도 작동합니까?
예. 퍼널이나 웹사이트 페이지의 사용자 코드 요소에 코드 조각을 붙여 넣습니다. 리드를 워크플로로 보내려면 HighLevel 연동을 참고하십시오. Producer 또는 Brokerage 요금제의 웹훅(webhook)을 사용합니다.
Wix, Squarespace, Webflow에서도 작동합니까?
예. 각 빌더의 사용자 코드 또는 임베드 요소를 사용합니다. 빌더가 임베드를 자체 프레임 안에 격리하더라도 계산기는 작동합니다. 프레임 기반 방식은 스크립트를 완전히 막는 빌더를 위한 것입니다.
웹사이트 스타일이 계산기를 깨뜨리지 않습니까?
인라인 방식에서는 그렇지 않습니다. 계산기가 격리된 컨테이너에 표시되므로 테마의 글꼴, 여백, 버튼 스타일이 닿지 않고, 계산기의 스타일도 페이지에 영향을 주지 않습니다.
이미 있는 버튼으로 계산기를 열 수 있습니까?
예. 트리거 방식을 쓰고 버튼이나 링크에 CSS 클래스 또는 선택자를 지정합니다. 일치하는 요소를 누르면 계산기가 팝업으로 열리므로 기존 디자인을 그대로 유지할 수 있습니다.
계산기의 기본 언어를 스페인어나 한국어로 설정할 수 있습니까?
예. 요소에 data-lang="es"(스페인어) 또는 data-lang="ko"(한국어)처럼 언어 코드를 추가합니다. en, es, zh, ko, vi, ar 6개 언어를 쓸 수 있으며, 방문자는 계산기 안에서 언어를 계속 바꿀 수 있습니다. 자세한 내용은 다국어 계산기를 참고하십시오.
계산기 스타일을 바꿀 때 코드도 바꿔야 합니까?
아니요. 테마, 색상, 문구는 계산기가 표시될 때마다 저장된 설정에서 불러오므로, 대시보드 변경 사항이 새 코드 없이 사이트에 반영됩니다.
임베드 하나에 계산기 여러 개를 넣을 수 있습니까?
예, 위젯을 쓰면 됩니다. 위젯은 같은 코드 한 줄 방식으로 계산기들을 플로팅 런처, 탭, 버튼 또는 카드로 묶습니다.
임베드 코드에 자사 도메인을 쓸 수 있습니까?
예, Producer와 Brokerage에서 가능합니다. 맞춤 도메인이 활성화되면 임베드 코드와 그 코드가 불러오는 계산기가 app.prequalfunnel.com 대신 해당 도메인에서 제공됩니다.
직접 링크만 따로 써도 유용합니까?
예. 직접 링크는 귀하의 브랜드가 적용된 전체 페이지 계산기를 엽니다. 코드를 임베드할 수 없는 이메일, 문자, 소셜 프로필, 전단지의 QR 코드에 잘 맞습니다.
PrequalFunnel
다음 차입자는 이미 회원님의 사이트에 와 있습니다.
찾아온 숫자를 보여 주고, 그 숫자가 담긴 리드를 받으십시오.
Originator는 영구 무료입니다. 웹훅과 자사 브랜드가 필요할 때 업그레이드하십시오. 월간·연간 요금제는 14일 무료 체험이 있습니다. 체험 종료 전에 해지하면 요금이 청구되지 않습니다.