Intégration web et sécurité
Intégrez des cartes interactives sur Webflow, WordPress, Shopify, Next.js ou des sites personnalisés. Protégez vos ressources visuelles avec la liste blanche de domaines pour les origines autorisées.
Méthodes d'installation : Script ou iframe
Layerpin vous propose deux méthodes d'installation pour publier votre carte interactive sur n'importe quel site Web, CMS ou application Web. Les deux méthodes prennent en charge la réactivité fluide, le pincement multi-touch pour zoomer et le redimensionnement dynamique des conteneurs :
Une seule balise de script à initialisation automatique. Il mesure automatiquement la largeur du conteneur, gère la hauteur de la fenêtre d'affichage dynamique et empêche les changements de disposition cumulatifs sans nécessiter de CSS personnalisé.
<script src="https://layerpin.com/embed.v1.js?map=emb_YOUR_MAP_ID&width=100%25&height=640px&minHeight=320px&border=none"></script>Extrait iframe standard en bac à sable. Idéal pour les environnements CMS stricts, les sandbox tiers et les plates-formes qui restreignent les balises JavaScript externes.
<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>Protection directe des URL
La visite de l’URL intégrée directement dans la barre d’adresse d’un navigateur est bloquée par conception. Layerpin nécessite une origine parent vérifiée pour restituer la carte en toute sécurité dans un conteneur d'intégration autorisé.
Préréglages de hauteur et disposition réactive
La largeur d'intégration s'étend toujours pour remplir 100 % de son bloc conteneur. Vous pouvez choisir parmi quatre hauteurs prédéfinies ou spécifier des dimensions personnalisées :
Convient aux colonnes de la barre latérale, aux widgets de détails sur les produits et aux encarts de blog compacts.
La valeur par défaut équilibrée pour les pages de destination, les guides et les listes d'annuaire pleine largeur.
Conçu pour les plans architecturaux à plusieurs étages, les visites de campus et les schémas haute densité.
Remplit toute la fenêtre d'affichage du navigateur sur mobile et ordinateur de bureau, idéal pour les applications d'exploration de cartes dédiées.
Modes de chargement et commandes de la visionneuse
Configurez le mode de chargement de la carte intégrée et les contrôles disponibles pour les visiteurs :
Paresseux (par défaut) : Defers map initialization until the visitor scrolls near the container, maximizing page speed scores. Désireux: Se charge immédiatement lors de l'analyse HTML initiale pour les sections héros.
Active un bouton de développement en plein écran dans la visionneuse. Les visiteurs peuvent étendre la carte sur l’ensemble de leur écran pour une inspection approfondie sans quitter votre site Web.
Basculez le badge d'attribution de plate-forme dans la visionneuse intégrée. Les forfaits payants peuvent masquer la marque pour une présentation visuelle transparente et entièrement en marque blanche.
Transmettez un paramètre de requête de langage (par ex. ?lang=ja) dans l'iFrame src to pre-select the locale on regional pages. Learn more in the Guide multilingue.
Origines autorisées et liste blanche de domaines
La liste blanche des domaines garantit que vos cartes interactives ne peuvent être intégrées que sur les sites Web que vous approuvez. Les domaines non autorisés tentant d'iframer votre carte recevront un avis d'accès refusé.
Règles de sécurité d'origine
- Protocole HTTPS requis : Embed origins require secure connections. Enter domains with or without protocol (e.g.,
https://mycompany.comormonentreprise.com). - Aucun chemin, requête ou hachage : Do not include subpaths or parameters (e.g., use
https://store.example.com, nothttps://store.example.com/map?view=1). - Correspondance de sous-domaines génériques (Premium) : Add
https://*.mycompany.comto authorize all staging branches, regional microsites, and dynamic subdomains under a single origin rule. - Politique de référence stricte : Iframes must include
referrerpolicy="strict-origin-when-cross-origin"so the browser sends the parent origin header to our authorization validator.
Conditions préalables pour activer l'intégration
La carte doit être publié et avoir au moins une origine valide répertoriée avant que l'intégration du site Web puisse être activée.
Les cartes d'essai sont des brouillons privés et ne peuvent pas être intégrées publiquement tant qu'un plan de carte actif n'est pas sélectionné.
Intégrer la révocation et la rotation des identifiants
Si un code intégré est accidentellement divulgué dans un référentiel de code public ou si un transfert d'agence externe est effectué, vous pouvez faire pivoter le jeton instantanément :
Dans le rail d'état en direct sur le côté droit de la page Intégrer la configuration, cliquez sur Régénérer l'identifiant. Layerpin instantly creates a brand new unique embed token (e.g., emb_...).
Aperçu en direct multi-appareils
Testez l'expérience intégrée en direct directement dans votre tableau de bord Layerpin avant de publier le code sur votre site Web de production :
Simule les moniteurs de bureau standard et les fenêtres d'affichage grand écran.
Teste les mises en page pour iPad et tablettes avec des tiroirs d'interface utilisateur réactifs.
Valide la navigation tactile, les feuilles contextuelles et le pincement pour zoomer sur les téléphones.
Aperçus gratuits du tableau de bord
Les impressions de carte générées dans l'onglet Aperçu du tableau de bord ne sont pas prises en compte dans votre quota mensuel d'affichage de carte. Vous pouvez inspecter librement les modifications de mise en page et tester les filtres de catégorie.
Constructeurs de sites Web et guides CMS
Les cartes interactives Layerpin fonctionnent de manière native avec tous les principaux créateurs de sites Web. Choisissez votre plate-forme ci-dessous pour des recommandations de configuration personnalisées :
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.
Tutoriel détaillé
Besoin de captures d'écran étape par étape pour Webflow, WordPress, Wix, Squarespace ou Framer ?
Limites d’origine et capacité du plan
La capacité d'origine autorisée et la prise en charge des caractères génériques sont déterminées par votre plan d'abonnement actif :
| Plan | Origines autorisées | Domaines génériques (*.) | Vues mensuelles incluses | Cartes publiées |
|---|---|---|---|---|
| Trial | Private only | Non pris en charge | Draft testing only | 0 (Draft only) |
| Basic | 10 origins | Non pris en charge | 5,000 views | 3 maps |
| Pro | 25 origins | Non pris en charge | 25,000 views | 15 maps |
| Premium | 50 origins | Soutenu | 100,000 views | 50 maps |