Layerpin logo
가입하기편집기
통합

웹사이트 임베드 및 보안

Webflow, WordPress, Shopify, Next.js 또는 맞춤 웹사이트에 인터랙티브 지도를 삽입하세요. 도메인 화이트리스트로 시각 자산을 보호합니다.

설치 방법: 스크립트 대 iframe

Layerpin은 웹사이트, CMS 또는 웹 애플리케이션에 대화형 지도를 게시할 수 있는 두 가지 설치 방법을 제공합니다. 두 방법 모두 유연한 반응성, 멀티 터치 핀치 투 줌 및 동적 컨테이너 크기 조정을 지원합니다.

옵션 1: 설치 스크립트
추천

단일 자체 초기화 스크립트 태그입니다. 컨테이너 너비를 자동으로 측정하고, 동적 뷰포트 높이를 관리하며, 맞춤 CSS 없이도 누적 레이아웃 변경을 방지합니다.

<script src="https://layerpin.com/embed.v1.js?map=emb_YOUR_MAP_ID&width=100%25&height=640px&minHeight=320px&border=none"></script>
가장 적합한 대상: Webflow, WordPress, Framer, Ghost 및 사용자 정의 HTML 템플릿.
옵션 2: 반응형 iframe

표준 샌드박스 iframe 스니펫. 엄격한 CMS 환경, 타사 샌드박스 및 외부 JavaScript 태그를 제한하는 플랫폼에 이상적입니다.

<iframe
  src="https://layerpin.com/embed/emb_YOUR_MAP_ID"
  title={t("Interactive map")}
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
  allow="fullscreen"
  allowfullscreen
  style="display:block;width:100%;height:640px;min-height:320px;border:0;"
></iframe>
가장 적합한 대상: Wix, Squarespace, Shopify 및 엄격한 React/Next.js 샌드박스.

직접 URL 보호

브라우저 주소 표시줄에서 삽입 URL을 직접 방문하는 것은 설계상 차단되어 있습니다. Layerpin은 승인된 임베딩 컨테이너 내에서 지도를 안전하게 렌더링하기 위해 확인된 상위 원본이 필요합니다.

높이 사전 설정 및 반응형 레이아웃

포함 너비는 항상 포함 블록을 100% 채울 정도로 늘어납니다. 사전 정의된 4개의 높이 사전 설정 중에서 선택하거나 사용자 정의 치수를 지정할 수 있습니다.

콤팩트
560px(최소 320px)

사이드바 열, 제품 세부정보 위젯, 컴팩트 블로그 삽입물에 적합합니다.

기준기본
640px(최소 320px)

전체 너비 랜딩 페이지, 가이드 및 디렉토리 목록에 대한 균형 잡힌 기본값입니다.

키가 큰
720px(최소 420px)

다층 건축 청사진, 캠퍼스 투어, 고밀도 회로도용으로 설계되었습니다.

전체 뷰포트
100dvh(최소 240px)

모바일과 데스크톱의 전체 브라우저 뷰포트를 채우며 전용 지도 탐색기 애플리케이션에 이상적입니다.

사용자 정의 픽셀 높이: Choose "Custom height" in the Layout dropdown to configure explicit pixel values between 240 px and 1,600 px for both primary height and minimum height.

로딩 모드 및 뷰어 컨트롤

내장된 지도가 로드되는 방식과 방문자가 사용할 수 있는 컨트롤을 구성합니다.

게으른 로딩과 열정적인 로딩

게으른(기본값): Defers map initialization until the visitor scrolls near the container, maximizing page speed scores. 열렬한: 히어로 섹션에 대한 초기 HTML 구문 분석 시 즉시 로드됩니다.

전체 화면 허용

뷰어 내에서 전체 화면 확장 버튼을 활성화합니다. 방문자는 웹사이트에서 벗어나지 않고도 심층 조사를 위해 전체 모니터에 걸쳐 지도를 확장할 수 있습니다.

레이어핀 속성

내장된 뷰어 내에서 플랫폼 속성 배지를 전환하세요. 유료 플랜은 완벽하고 화이트 라벨이 붙은 시각적 프레젠테이션을 위해 브랜딩을 숨길 수 있습니다.

현지화된 삽입(?lang=)

언어 쿼리 매개변수를 전달합니다(예: ?lang=ja) iframe에서 소스 to pre-select the locale on regional pages. Learn more in the 다국어 가이드.

허용된 출처 및 도메인 화이트리스트

도메인 화이트리스트를 사용하면 귀하가 승인한 웹사이트에만 대화형 지도를 삽입할 수 있습니다. 지도를 iframe하려는 승인되지 않은 도메인은 액세스 거부 알림을 받게 됩니다.

오리진 보안 규칙

  • HTTPS 프로토콜 필요: Embed origins require secure connections. Enter domains with or without protocol (e.g., https://mycompany.com or mycompany.com).
  • 경로, 쿼리 또는 해시 없음: Do not include subpaths or parameters (e.g., use https://store.example.com, not https://store.example.com/map?view=1).
  • 와일드카드 하위 도메인 일치(프리미엄): Add https://*.mycompany.com to authorize all staging branches, regional microsites, and dynamic subdomains under a single origin rule.
  • 엄격한 추천인 정책: Iframes must include Referrerpolicy="strict-origin-when-cross-origin" so the browser sends the parent origin header to our authorization validator.

포함을 활성화하기 위한 전제 조건

지도는 다음과 같아야합니다. 출판됨 웹사이트 삽입을 켜기 전에 적어도 하나의 유효한 출처가 나열되어 있어야 합니다.

시험 지도는 비공개 초안이므로 활성 지도 계획을 선택할 때까지 공개적으로 삽입할 수 없습니다.

Embed ID 취소 및 순환

공개 코드 저장소에서 포함 코드가 실수로 유출되거나 외부 기관의 핸드오프가 완료된 경우 토큰을 즉시 순환할 수 있습니다.

Embed ID 재생성

포함 구성 페이지 오른쪽의 실시간 상태 레일에서 ID 재생성. Layerpin instantly creates a brand new unique embed token (e.g., 엠_...).

즉시 철회: 취소된 포함 ID를 참조하는 모든 기존 설치는 즉시 로드를 중지합니다. 새로 생성된 스니펫으로 웹사이트 코드 블록을 업데이트해야 합니다.

다중 장치 실시간 미리보기

프로덕션 웹사이트에 코드를 게시하기 전에 Layerpin 대시보드 내에서 직접 라이브 임베디드 환경을 테스트하세요.

데스크탑(100%)

표준 데스크탑 모니터와 와이드스크린 뷰포트를 시뮬레이션합니다.

태블릿(768px)

반응형 UI 서랍으로 iPad 및 태블릿 레이아웃을 테스트합니다.

모바일(390px)

휴대폰의 터치 탐색, 팝업 시트 및 핀치 투 줌을 검증합니다.

무료 대시보드 미리보기

대시보드 미리보기 탭 내에서 생성된 지도 노출수는 월별 지도 보기 할당량에 포함되지 않습니다. 레이아웃 변경 사항을 검사하고 카테고리 필터를 자유롭게 테스트할 수 있습니다.

웹사이트 빌더 및 CMS 가이드

Layerpin 대화형 지도는 모든 주요 웹 사이트 빌더에서 기본적으로 작동합니다. 맞춤형 설정 권장사항을 보려면 아래에서 플랫폼을 선택하세요.

WordPressInstallation script

Embed responsive interactive maps into WordPress using Gutenberg Custom HTML blocks, Classic Editor, Elementor, or Divi HTML widgets.

플랫폼 문서
WebflowInstallation script

Embed interactive maps in Webflow Designer using the Custom Code Embed element with full support for fluid responsive containers.

플랫폼 문서
WixIframe code

Embed full-width or fixed-dimension interactive maps in Wix Studio and Wix Editor using the HTML Embed element.

플랫폼 문서
SquarespaceIframe code

Install responsive interactive maps into Squarespace 7.1 and Fluid Engine sections using Code blocks.

플랫폼 문서
FramerInstallation script

Add interactive maps directly into Framer canvases using the native Embed component with fluid responsiveness.

플랫폼 문서
GhostInstallation script or iframe

Insert responsive interactive maps into Ghost CMS publications, member pages, and posts using HTML cards.

플랫폼 문서

자세한 튜토리얼

Webflow, WordPress, Wix, Squarespace 또는 Framer에 대한 단계별 스크린샷이 필요하십니까?

심층적인 웹사이트 빌더 삽입 가이드를 읽어보세요.

원산지 제한 및 계획 용량

허용되는 원본 용량 및 와일드카드 지원은 활성 구독 계획에 따라 결정됩니다.

계획허용된 출처와일드카드 도메인(*.)포함된 월별 보기게시된 지도
TrialPrivate only지원되지 않음Draft testing only0 (Draft only)
Basic10 origins지원되지 않음5,000 views3 maps
Pro25 origins지원되지 않음25,000 views15 maps
Premium50 origins지원됨100,000 views50 maps