Integrasi

Penyematan Situs Web & Keamanan

Sematkan peta interaktif di Webflow, WordPress, Shopify, Next.js, atau situs web khusus. Lindungi aset visual Anda dengan daftar putih domain asal yang diizinkan.

Metode Instalasi: Skrip vs. iframe

Layerpin memberi Anda dua metode instalasi untuk mempublikasikan peta interaktif Anda di situs web, CMS, atau aplikasi web apa pun. Kedua metode ini mendukung respons yang lancar, pinch-to-zoom multi-sentuh, dan pengubahan ukuran container dinamis:

Opsi 1: Skrip Instalasi

Direkomendasikan

Satu tag skrip yang menginisialisasi sendiri. Secara otomatis mengukur lebar penampung, mengelola tinggi area pandang dinamis, dan mencegah pergeseran tata letak kumulatif tanpa memerlukan CSS khusus.

<script src="https://layerpin.com/embed.v1.js?map=emb_YOUR_MAP_ID&width=100%25&height=640px&minHeight=320px&border=none"></script>

Terbaik untuk: Webflow, WordPress, Framer, Ghost, dan templat HTML khusus.

Opsi 2: Iframe responsif

Cuplikan iframe kotak pasir standar. Ideal untuk lingkungan CMS yang ketat, kotak pasir pihak ketiga, dan platform yang membatasi tag JavaScript eksternal.

<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>

Terbaik untuk: Wix, Squarespace, Shopify, dan kotak pasir React/Next.js yang ketat.

Perlindungan URL Langsung

Mengunjungi URL yang disematkan secara langsung di bilah alamat browser memang sengaja diblokir. Layerpin memerlukan asal induk yang terverifikasi untuk merender peta dengan aman dalam wadah penyematan resmi.

Preset Tinggi & Tata Letak Responsif

Lebar penyematan selalu melebar hingga memenuhi 100% blok yang memuatnya. Anda dapat memilih dari empat preset ketinggian yang telah ditentukan sebelumnya atau menentukan dimensi khusus:

Kompak

560 piksel (minimal 320 piksel)

Cocok untuk kolom sidebar, widget detail produk, dan sisipan blog ringkas.

StandarBawaan

640 piksel (minimal 320 piksel)

Default seimbang untuk halaman arahan lebar penuh, panduan, dan daftar direktori.

Tinggi

720 piksel (minimal 420 piksel)

Dirancang untuk cetak biru arsitektur multi-lantai, tur kampus, dan skema kepadatan tinggi.

Area Pandang Penuh

100dvh (minimal 240 piksel)

Mengisi seluruh area pandang browser di perangkat seluler dan desktop, ideal untuk aplikasi penjelajah peta khusus.

Ketinggian Piksel Khusus: 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.

Mode Pemuatan & Kontrol Penampil

Konfigurasikan bagaimana peta yang disematkan dimuat dan kontrol apa yang tersedia bagi pengunjung:

Malas vs. Bersemangat Memuat

Malas (Default): Defers map initialization until the visitor scrolls near the container, maximizing page speed scores. Ingin sekali: Segera dimuat pada parsing HTML awal untuk bagian pahlawan.

Izinkan Layar Penuh

Mengaktifkan tombol perluas layar penuh di dalam penampil. Pengunjung dapat memperluas peta di seluruh monitor mereka untuk pemeriksaan mendalam tanpa harus keluar dari situs web Anda.

Atribusi Layerpin

Alihkan lencana atribusi platform di dalam penampil tersemat. Paket berbayar dapat menyembunyikan branding untuk presentasi visual yang mulus dan diberi label putih sepenuhnya.

Sematan yang Dilokalkan (?lang=)

Berikan parameter kueri bahasa (mis. ?lang=ja) di iframe src to pre-select the locale on regional pages. Learn more in the Panduan Multi-Bahasa.

Asal yang Diizinkan & Daftar Putih Domain

Daftar putih domain memastikan peta interaktif Anda hanya dapat disematkan di situs web yang Anda setujui. Domain tidak sah yang mencoba melakukan iframe pada peta Anda akan menerima pemberitahuan akses ditolak.

Aturan Keamanan Asal

Diperlukan Protokol HTTPS: Embed origins require secure connections. Enter domains with or without protocol (e.g., https://mycompany.com or perusahaan saya.com).
Tanpa Jalur, Kueri, atau Hash: Do not include subpaths or parameters (e.g., use https://store.example.com, not https://store.example.com/map?view=1).
Pencocokan Subdomain Wildcard (Premium): Add https://*.mycompany.com to authorize all staging branches, regional microsites, and dynamic subdomains under a single origin rule.
Kebijakan Perujuk yang Ketat: Iframes must include referrerpolicy="asal-ketat-bila-asal-silang" so the browser sends the parent origin header to our authorization validator.

Prasyarat untuk Mengaktifkan Penyematan

Petanya harus diterbitkan dan mencantumkan setidaknya satu asal yang valid sebelum penyematan situs web dapat diaktifkan.

Peta percobaan merupakan rancangan pribadi dan tidak dapat disematkan secara publik sampai rencana peta aktif dipilih.

Pencabutan & Rotasi ID Sematan

Jika kode semat bocor secara tidak sengaja di repositori kode publik, atau serah terima agensi eksternal selesai, Anda dapat langsung merotasi token:

Membuat Ulang ID Sematan Anda

Di rel status langsung di sisi kanan halaman Konfigurasi Sematkan, klik Regenerasi ID. Layerpin instantly creates a brand new unique embed token (e.g., menanamkan_...).

Pencabutan Segera: Semua instalasi yang ada yang merujuk pada ID penyematan yang dicabut akan segera berhenti memuat. Anda harus memperbarui blok kode situs web Anda dengan cuplikan yang baru dibuat.

Pratinjau Langsung Multi-Perangkat

Uji pengalaman langsung yang disematkan langsung di dalam dasbor Layerpin Anda sebelum memublikasikan kode ke situs web produksi Anda:

Desktop (100%)

Mensimulasikan monitor desktop standar dan area pandang layar lebar.

Tablet (768 piksel)

Menguji tata letak iPad dan tablet dengan panel samping UI yang responsif.

Seluler (390 piksel)

Memvalidasi navigasi sentuh, lembar popup, dan pinch-to-zoom pada ponsel.

Pratinjau Dasbor Gratis

Tayangan peta yang dihasilkan di tab Pratinjau dasbor tidak dihitung terhadap kuota tampilan peta bulanan Anda. Anda dapat memeriksa perubahan tata letak dan menguji filter kategori dengan bebas.

Pembuat Situs Web & Panduan CMS

Peta interaktif Layerpin berfungsi secara native dengan semua pembuat situs web utama. Pilih platform Anda di bawah untuk rekomendasi penyiapan yang disesuaikan:

WordPressInstallation script

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

Dokumen platform

WebflowInstallation script

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

Dokumen platform

WixIframe code

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

Dokumen platform

SquarespaceIframe code

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

Dokumen platform

FramerInstallation script

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

Dokumen platform

GhostInstallation script or iframe

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

Dokumen platform

Tutorial Lengkap

Butuh tangkapan layar langkah demi langkah untuk Webflow, WordPress, Wix, Squarespace, atau Framer?

Baca panduan penyematan pembuat situs web kami yang mendalam

Batas Asal & Kapasitas Paket

Kapasitas asal yang diizinkan dan dukungan wildcard ditentukan oleh paket langganan aktif Anda:

Rencana	Asal yang Diizinkan	Domain Wildcard (*.)	Termasuk Tampilan Bulanan	Peta yang Diterbitkan
Trial	Private only	Tidak didukung	Draft testing only	0 (Draft only)
Basic	10 origins	Tidak didukung	5,000 views	3 maps
Pro	25 origins	Tidak didukung	25,000 views	15 maps
Premium	50 origins	Didukung	100,000 views	50 maps