การฝังบนเว็บไซต์และความปลอดภัย
ฝังแผนที่แบบโต้ตอบบน Webflow, WordPress, Shopify, Next.js หรือเว็บไซต์ที่คุณกำหนดเอง ปกป้องเนื้อหาภาพของคุณด้วยไวท์ลิสต์โดเมนต้นทางที่อนุญาต
วิธีการติดตั้ง: สคริปต์กับ iframe
Layerpin มีวิธีการติดตั้งสองวิธีเพื่อเผยแพร่แผนที่เชิงโต้ตอบของคุณบนเว็บไซต์ CMS หรือเว็บแอปพลิเคชันใดๆ ทั้งสองวิธีรองรับการตอบสนองของไหล การบีบนิ้วเพื่อซูมแบบมัลติทัช และการปรับขนาดคอนเทนเนอร์แบบไดนามิก:
แท็กสคริปต์ที่เริ่มต้นด้วยตนเองแท็กเดียว โดยจะวัดความกว้างของคอนเทนเนอร์โดยอัตโนมัติ จัดการความสูงของวิวพอร์ตแบบไดนามิก และป้องกันการเปลี่ยนแปลงเค้าโครงสะสมโดยไม่ต้องใช้ CSS แบบกำหนดเอง
<script src="https://layerpin.com/embed.v1.js?map=emb_YOUR_MAP_ID&width=100%25&height=640px&minHeight=320px&border=none"></script>ข้อมูลโค้ด 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>การป้องกัน URL โดยตรง
การเยี่ยมชม URL ที่ฝังโดยตรงในแถบที่อยู่ของเบราว์เซอร์ถูกบล็อกโดยการออกแบบ Layerpin ต้องการต้นทางที่ได้รับการยืนยันเพื่อแสดงแผนที่อย่างปลอดภัยภายในคอนเทนเนอร์ฝังที่ได้รับอนุญาต
ความสูงที่ตั้งไว้ล่วงหน้าและเค้าโครงที่ตอบสนอง
ความกว้างที่ฝังจะยืดออกไปจนเต็ม 100% ของบล็อกที่มีอยู่เสมอ คุณสามารถเลือกจากค่าความสูงที่กำหนดไว้ล่วงหน้าสี่ค่าหรือระบุขนาดที่กำหนดเอง:
เหมาะสำหรับคอลัมน์แถบด้านข้าง วิดเจ็ตรายละเอียดผลิตภัณฑ์ และการแทรกบล็อกขนาดเล็ก
ค่าเริ่มต้นที่สมดุลสำหรับแลนดิ้งเพจแบบเต็มความกว้าง คำแนะนำ และรายการไดเร็กทอรี
ออกแบบมาสำหรับพิมพ์เขียวสถาปัตยกรรมหลายชั้น ทัวร์ชมมหาวิทยาลัย และแผนผังที่มีความหนาแน่นสูง
เติมเต็มวิวพอร์ตเบราว์เซอร์บนมือถือและเดสก์ท็อป เหมาะสำหรับแอปพลิเคชัน Map Explorer โดยเฉพาะ
กำลังโหลดโหมดและการควบคุมโปรแกรมดู
กำหนดค่าวิธีการโหลดแผนที่แบบฝังและการควบคุมใดบ้างที่ผู้เยี่ยมชมสามารถใช้ได้:
ขี้เกียจ (ค่าเริ่มต้น): Defers map initialization until the visitor scrolls near the container, maximizing page speed scores. กระตือรือร้น: โหลดทันทีในการแยกวิเคราะห์ HTML เริ่มต้นสำหรับส่วนฮีโร่
เปิดใช้ปุ่มขยายเต็มหน้าจอภายในโปรแกรมแสดง ผู้เยี่ยมชมสามารถขยายแผนที่ทั่วทั้งจอภาพเพื่อตรวจสอบเชิงลึกโดยไม่ต้องออกจากเว็บไซต์ของคุณ
สลับป้ายระบุแหล่งที่มาของแพลตฟอร์มภายในโปรแกรมดูที่ฝังไว้ แผนแบบชำระเงินสามารถซ่อนการสร้างแบรนด์เพื่อการนำเสนอด้วยภาพที่มีป้ายกำกับสีขาวและไร้รอยต่อ
ส่งพารามิเตอร์การค้นหาภาษา (เช่น ?lang=ja) ใน iframe src 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.comormycompany.com). - ไม่มีเส้นทาง ข้อความค้นหา หรือแฮช: Do not include subpaths or parameters (e.g., use
https://store.example.com, nothttps://store.example.com/map?view=1). - การจับคู่โดเมนย่อย Wildcard (พรีเมียม): Add
https://*.mycompany.comto authorize all staging branches, regional microsites, and dynamic subdomains under a single origin rule. - นโยบายผู้อ้างอิงที่เข้มงวด: Iframes must include
Referrerpolicy="เข้มงวด-ต้นกำเนิด-เมื่อ-ข้าม-แหล่งกำเนิด"so the browser sends the parent origin header to our authorization validator.
ข้อกำหนดเบื้องต้นในการเปิดใช้งานการฝัง
แผนที่ก็ต้องเป็น ที่ตีพิมพ์ และมีต้นทางที่ถูกต้องอย่างน้อยหนึ่งรายการก่อนที่จะเปิดการฝังเว็บไซต์ได้
แผนที่ทดลองเป็นแบบร่างส่วนตัว และไม่สามารถฝังแบบสาธารณะได้จนกว่าจะเลือกแผนแผนที่ที่ใช้งานอยู่
ฝังการเพิกถอน ID & การหมุน
หากโค้ดที่ฝังรั่วไหลโดยไม่ได้ตั้งใจในที่เก็บโค้ดสาธารณะ หรือแฮนด์ออฟของหน่วยงานภายนอกเสร็จสิ้น คุณสามารถหมุนเวียนโทเค็นได้ทันที:
ในแถบสถานะสดทางด้านขวาของหน้าการกำหนดค่าแบบฝัง ให้คลิก สร้าง ID ใหม่. Layerpin instantly creates a brand new unique embed token (e.g., ฝัง_...).
ดูตัวอย่างสดหลายอุปกรณ์
ทดสอบประสบการณ์ฝังตัวแบบสดโดยตรงภายในแดชบอร์ด Layerpin ของคุณก่อนที่จะเผยแพร่โค้ดไปยังเว็บไซต์การผลิตของคุณ:
จำลองจอภาพเดสก์ท็อปมาตรฐานและวิวพอร์ตแบบจอกว้าง
ทดสอบเค้าโครง iPad และแท็บเล็ตด้วยลิ้นชัก UI ที่ตอบสนอง
ตรวจสอบการนำทางแบบสัมผัส แผ่นป๊อปอัป และการบีบนิ้วเพื่อซูมบนโทรศัพท์
ตัวอย่างแดชบอร์ดฟรี
การแสดงผลแผนที่ที่สร้างขึ้นภายในแท็บแสดงตัวอย่างแดชบอร์ดจะไม่นับรวมในโควต้าการดูแผนที่รายเดือนของคุณ คุณสามารถตรวจสอบการเปลี่ยนแปลงเค้าโครงและทดสอบตัวกรองหมวดหมู่ได้อย่างอิสระ
เครื่องมือสร้างเว็บไซต์และคำแนะนำ CMS
แผนที่เชิงโต้ตอบของ Layerpin ทำงานร่วมกับผู้สร้างเว็บไซต์รายใหญ่ทั้งหมดได้ เลือกแพลตฟอร์มของคุณด้านล่างเพื่อรับคำแนะนำในการตั้งค่าที่ปรับให้เหมาะสม:
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.
บทช่วยสอนโดยละเอียด
ต้องการภาพหน้าจอทีละขั้นตอนสำหรับ Webflow, WordPress, Wix, Squarespace หรือ Framer ใช่ไหม
ขีดจำกัดแหล่งกำเนิดและความจุของแผน
ความจุต้นทางที่อนุญาตและการสนับสนุนไวด์การ์ดถูกกำหนดโดยแผนการสมัครสมาชิกที่ใช้งานอยู่ของคุณ:
| วางแผน | ต้นกำเนิดที่ได้รับอนุญาต | โดเมนตัวแทน (*.) | รวมการดูรายเดือน | แผนที่ที่เผยแพร่ |
|---|---|---|---|---|
| Trial | Private only | ไม่รองรับ | Draft testing only | 0 (Draft only) |
| Basic | 10 origins | ไม่รองรับ | 5,000 views | 3 maps |
| Pro | 25 origins | ไม่รองรับ | 25,000 views | 15 maps |
| Premium | 50 origins | รองรับ | 100,000 views | 50 maps |