Website Embedding & Security
Embed interactive maps on Webflow, WordPress, Shopify, Next.js, or custom websites. Protect your visual assets with Allowed Origins domain whitelisting.
Installation Methods: Script vs. iframe
Layerpin gives you two installation methods to publish your interactive map on any website, CMS, or web application. Both methods support fluid responsiveness, multi-touch pinch-to-zoom, and dynamic container resizing:
A single self-initializing script tag. It automatically measures the container width, manages dynamic viewport height, and prevents cumulative layout shifts without requiring custom CSS.
<script src="https://layerpin.com/embed.v1.js?map=emb_YOUR_MAP_ID&width=100%25&height=640px&minHeight=320px&border=none"></script>Standard sandboxed iframe snippet. Ideal for strict CMS environments, third-party sandboxes, and platforms that restrict external JavaScript tags.
<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>Direct URL Protection
Visiting the embed URL directly in a browser address bar is blocked by design. Layerpin requires a verified parent origin to render the map securely within an authorized embedding container.
Height Presets & Responsive Layout
The embed width always stretches to fill 100% of its containing block. You can select from four predefined height presets or specify custom dimensions:
Suited for sidebar columns, product detail widgets, and compact blog inserts.
The balanced default for full-width landing pages, guides, and directory listings.
Designed for multi-floor architectural blueprints, campus tours, and high-density schematics.
Fills the entire browser viewport on mobile and desktop, ideal for dedicated map explorer applications.
Loading Modes & Viewer Controls
Configure how the embedded map loads and what controls are available to visitors:
Lazy (Default): Defers map initialization until the visitor scrolls near the container, maximizing page speed scores. Eager: Loads immediately on initial HTML parse for hero sections.
Enables a fullscreen expand button inside the viewer. Visitors can expand the map across their entire monitor for deep inspection without navigating away from your website.
Toggle the platform attribution badge inside the embedded viewer. Paid plans can hide branding for a seamless, fully white-labeled visual presentation.
Pass a language query parameter (e.g. ?lang=ja) in the iframe src to pre-select the locale on regional pages. Learn more in the Multi-Language Guide.
Allowed Origins & Domain Whitelisting
Domain whitelisting ensures your interactive maps can only be embedded on websites you approve. Unauthorized domains attempting to iframe your map will receive an access denied notice.
Origin Security Rules
- HTTPS Protocol Required: Embed origins require secure connections. Enter domains with or without protocol (e.g.,
https://mycompany.comormycompany.com). - No Paths, Queries, or Hashes: Do not include subpaths or parameters (e.g., use
https://store.example.com, nothttps://store.example.com/map?view=1). - Wildcard Subdomain Matching (Premium): Add
https://*.mycompany.comto authorize all staging branches, regional microsites, and dynamic subdomains under a single origin rule. - Strict Referrer Policy: Iframes must include
referrerpolicy="strict-origin-when-cross-origin"so the browser sends the parent origin header to our authorization validator.
Prerequisites to Enable Embedding
The map must be published and have at least one valid origin listed before website embedding can be toggled on.
Trial maps are private drafts and cannot be embedded publicly until an active map plan is selected.
Embed ID Revocation & Rotation
If an embed code is accidentally leaked in a public code repository, or an external agency handoff is completed, you can rotate the token instantly:
In the live status rail on the right side of the Embed Configuration page, click Regenerate ID. Layerpin instantly creates a brand new unique embed token (e.g., emb_...).
Multi-Device Live Preview
Test the live embedded experience directly inside your Layerpin dashboard before publishing code to your production website:
Simulates standard desktop monitors and widescreen viewports.
Tests iPad and tablet layouts with responsive UI drawers.
Validates touch navigation, popup sheets, and pinch-to-zoom on phones.
Free Dashboard Previews
Map impressions generated inside the dashboard Preview tab do not count against your monthly map view quota. You can inspect layout changes and test category filters freely.
Website Builders & CMS Guides
Layerpin interactive maps work natively with all major website builders. Choose your platform below for tailored setup recommendations:
Embed responsive interactive maps into WordPress using Gutenberg Custom HTML blocks, Classic Editor, Elementor, or Divi HTML widgets.
Embed interactive maps in Webflow Designer using the Custom Code Embed element with full support for fluid responsive containers.
Embed full-width or fixed-dimension interactive maps in Wix Studio and Wix Editor using the HTML Embed element.
Install responsive interactive maps into Squarespace 7.1 and Fluid Engine sections using Code blocks.
Add interactive maps directly into Framer canvases using the native Embed component with fluid responsiveness.
Insert responsive interactive maps into Ghost CMS publications, member pages, and posts using HTML cards.
Detailed Tutorial
Need step-by-step screenshots for Webflow, WordPress, Wix, Squarespace, or Framer?
Origin Limits & Plan Capacity
Allowed origin capacity and wildcard support are determined by your active subscription plan:
| Plan | Allowed Origins | Wildcard Domains (*.) | Included Monthly Views | Published Maps |
|---|---|---|---|---|
| Trial | Private only | Not supported | Draft testing only | 0 (Draft only) |
| Basic | 10 origins | Not supported | 5,000 views | 3 maps |
| Pro | 25 origins | Not supported | 25,000 views | 15 maps |
| Premium | 50 origins | Supported | 100,000 views | 50 maps |