WordPress
사용자 HTML 블록 또는 페이지 빌더의 HTML 요소를 씁니다.
기능 · 삽입
코드 한 줄이면 됩니다. HTML을 받는 어떤 사이트든.
웹사이트에 주택담보대출 계산기를 삽입하려면 대시보드에서 코드 조각 하나를 복사해, 사이트 빌더가 사용자 HTML을 허용하는 곳에 붙여 넣으면 됩니다. 인라인 삽입은 분리된 shadow DOM 안에서 렌더링되므로, 테마가 계산기를 망가뜨리지도 계산기가 테마를 망가뜨리지도 않습니다. 버튼, 플로팅 버블, 일반 링크가 더 좋다면 그것도 클릭 한 번이면 됩니다.
- Agent 요금제는 카드 등록이 필요 없습니다
- Team 및 Brokerage 요금제 14일 무료 체험
구획 01
인라인 삽입 코드의 모습
계산기가 나타날 위치에 요소 하나, 그리고 스크립트 태그 하나입니다. 정확한 코드는 대시보드에서 복사하십시오. 삽입 키가 포함되어 있습니다.
예시용 코드입니다. 속성 이름과 스크립트 주소는 대시보드에 표시되며 다를 수 있습니다.
<div data-calc="mortgage" data-key="YOUR_EMBED_KEY" data-mode="inline"></div>
<script src="https://app.calccapture.com/embed.js" async></script>구획 02
계산기를 배치하는 일곱 가지 방법
| 방식 | 방문자에게 보이는 모습 | 적합한 곳 |
|---|---|---|
| 인라인 | 사이트 스타일과 분리된 상태로 페이지 안에 표시되는 계산기 | 매물 페이지, 매수인·매도인 안내 페이지 |
| 프레임 안 인라인 | 같은 계산기를 높이가 자동 조절되는 iframe으로 표시 | iframe만 허용하는 빌더 |
| 팝업 버튼 | 누르면 팝업으로 계산기가 열리는 버튼 | 매물 설명 아래 |
| 플로팅 버블 | 모든 페이지 모서리에 있는 버튼 | 사이트 전체에서 접근 |
| 직접 만든 링크나 버튼 | 원하는 요소를 누르면 계산기가 열림 | 맞춤 디자인과 메뉴 |
| 직접 링크 | 고유 URL의 전체 화면 계산기 | QR 코드, 문자, 이메일, SNS 프로필 |
| 기본 iframe | 일반 iframe | 제한이 많은 플랫폼 |
Squarespace & Wix
코드 블록 또는 삽입 요소를 씁니다 (일부 요금제는 스크립트를 제한하며, 그 경우 iframe 방식이 작동합니다).
Webflow
페이지나 매물용 CMS 템플릿에 Embed 요소를 씁니다.
HighLevel 퍼널과 사이트
퍼널 또는 웹사이트 빌더의 Custom JS/HTML 요소를 씁니다.
IDX 웹사이트
IDX(MLS 매물 정보를 웹사이트에 연동하는 서비스) 제공업체에 따라 다릅니다. 매물 페이지에 사용자 HTML을 허용하는 곳이 많고, 링크만 허용하는 곳도 있습니다.
계산기를 삽입하면 웹사이트 디자인이 깨지나요?
깨지지 않습니다. 인라인 삽입은 스타일을 양방향으로 분리하는 브라우저 기능인 shadow DOM 안에서 렌더링됩니다. 사이트의 CSS는 계산기 안으로 들어가지 않고, 계산기의 CSS도 밖으로 새어 나오지 않습니다. 분리가 불가능한 환경에서는 자동으로 iframe 방식으로 전환됩니다.
주제별 질문
중개인들이 자주 묻는 질문
코딩을 알아야 하나요?
몰라도 됩니다. 코드 조각을 복사해 빌더의 HTML 또는 삽입 요소에 붙여 넣으면 됩니다. 도움말 센터에 플랫폼별 단계 안내가 있습니다.
사이트 빌더가 스크립트를 허용하지 않으면요?
대부분의 빌더가 허용하는 iframe 방식을 쓰거나, 계산기를 별도 페이지로 여는 직접 링크 버튼을 쓰십시오.
이메일에서도 계산기를 쓸 수 있나요?
이메일 프로그램은 스크립트를 실행하지 않으므로 직접 링크나 계산기로 연결되는 버튼 이미지를 쓰십시오. 계산기는 브라우저에서 열리고 리드는 평소처럼 수집됩니다.
제가 쓰는 IDX 제공업체에서도 작동하나요?
제공업체가 매물 상세 페이지에 사용자 HTML, 스크립트, iframe을 허용하는지에 달려 있습니다. 제공업체의 설정이나 고객 지원에 확인하십시오. 허용하지 않는 경우에도 직접 링크는 어디서나 작동합니다. IDX 웹사이트를 참고하십시오.
삽입 코드가 무겁지 않나요?
로더는 작고 콘텐츠가 표시된 뒤 비동기로 불러오며, 각 계산기는 화면에 나타날 때만 자체 리소스를 불러옵니다. 한 페이지에 여러 개를 따로 삽입하기보다 위젯 하나를 쓰십시오.
삽입된 콘텐츠가 검색엔진에 보이나요?
계산기는 상호작용 도구이며 페이지에서 순위를 얻기 위한 것이 아닙니다. 순위는 페이지 본문이 얻습니다. 고급 설정을 위해 선택적인 서버 렌더링 콘텐츠도 제공합니다.
삽입된 계산기는 접근성을 갖추고 있나요?
계산기는 라벨이 붙은 입력 항목, 눈에 보이는 포커스 표시, 화면 낭독기에 친화적인 결과로 키보드만으로 조작할 수 있으며, 팝업은 보이는 버튼이나 Esc 키로 닫힙니다. 접근성 있는 삽입을 참고하십시오.
모바일에서 팝업이 방문자를 가두지 않나요?
가두지 않습니다. 팝업과 플로팅 패널에는 크고 잘 보이는 닫기 버튼이 있고, 휴대폰에서는 전체 화면으로 열리며, 닫으면 처음 눌렀던 버튼으로 포커스가 돌아갑니다.