> For the complete documentation index, see [llms.txt](https://docs.openspaces.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.openspaces.design/plain-jane-docs-v2-fr/plain-jane-interactive/sections-and-features/adding-interactive-points.md).

# Ajout de points interactifs

Les points interactifs sont les zones cliquables qui donnent vie à vos Espaces Interactifs. Ce guide couvre tout ce que vous devez savoir sur la création, le positionnement et le style de ces éléments interactifs.

## 🎯 Que sont les points interactifs ?

Les points interactifs sont des zones cliquables superposées à votre image d'arrière-plan qui révèlent des informations produit, des liens ou du contenu personnalisé. Lorsque les visiteurs survolent ou cliquent sur ces points, ils voient :

* Détails et prix du produit
* Options d'ajout rapide au panier
* Liens vers les pages produit
* Texte personnalisé ou messages d'appel à l'action

## 🛠️ Ajouter votre premier point interactif

### Étape 1 : Accéder aux paramètres du point

1. **Ouvrir le personnalisateur de thème**
   * Accédez à **Boutique en ligne → Thèmes**
   * Cliquer sur **Personnaliser** sur Plain Jane Interactive
2. **Sélectionner la section Environnement Interactif**
   * Cliquez sur votre section Environnement Interactif
   * Faites défiler jusqu'à **Points interactifs**
3. **Ajouter un nouveau point**
   * Cliquer sur **Ajouter un point interactif**
   * Une nouvelle configuration de point apparaîtra

### Étape 2 : Configurer le contenu du point

#### Points basés sur un produit

1. **Sélectionner un produit**
   * Cliquer sur **Sélectionner le produit**
   * Choisissez dans le catalogue de produits de votre boutique
   * Le titre, le prix et l'image du produit se remplissent automatiquement
2. **Options de remplacement**
   * **Titre personnalisé**: Remplacer le nom du produit
   * **Description personnalisée**: Ajouter des détails spécifiques
   * **Afficher le prix**: Activer/désactiver l'affichage du prix

#### Points avec lien personnalisé

1. **Activer le lien personnalisé**
   * Basculer **Utiliser un lien personnalisé** sur ON
   * Saisissez votre URL de destination
   * Ajouter un titre et une description personnalisés

### Étape 3 : Positionner votre point

#### Positionnement visuel

1. **Position X (Horizontale)**
   * Plage de valeurs : 0-100%
   * 0% = Bord gauche
   * 50% = Centre
   * 100% = Bord droit
2. **Position Y (Verticale)**
   * Plage de valeurs : 0-100%
   * 0% = Bord supérieur
   * 50% = Milieu
   * 100% = Bord inférieur

#### Conseils de positionnement

* **Utilisez le mode aperçu** pour voir le placement des points en temps réel
* **Ajustez finement avec de petits incréments** (ajustements de 1-2%)
* **Testez sur différentes tailles d'écran** pour assurer un placement correct

## 🎨 Styliser vos points

### Options d'apparence des points

#### Types de style

1. **Pulse (Par défaut)**
   * Cercle animé qui pulse
   * Idéal pour attirer l'attention
   * Un mouvement subtil capte le regard
2. **Icône Plus**
   * Symbole "+" épuré
   * Minimal et moderne
   * Adapté aux thèmes professionnels/corporatifs
3. **Point**
   * Indicateur circulaire simple
   * Option la plus discrète
   * Se fond naturellement dans les images

#### Personnalisation des couleurs

* **Couleur primaire**: Couleur principale du point
* **Couleur secondaire**: Couleur d'accent ou de pulse
* **Couleur du texte**: Texte de superposition de contenu
* **Couleur d'arrière-plan**: Fond du point

### Taille et visibilité

* **Taille du point**: Ajuster le diamètre (par défaut : 40px)
* **Intensité du pulse**: Contrôler la puissance de l'animation
* **Opacité**: Définir la transparence du point
* **Z-index**: Ordre des calques (plus haut = plus visible)

## 📱 Considérations mobiles

### Conception adaptée au tactile

* **Taille minimale**: 44px pour un tap facile
* **Espacement**: Au moins 8px entre les points
* **Contraste**: Assurez-vous que les points sont visibles sur mobile

### Paramètres spécifiques au mobile

* **Afficher sur mobile**: Activer/désactiver la visibilité des points
* **Multiplicateur de taille mobile**: Ajuster la taille pour les petits écrans
* **Animations simplifiées**: Réduire le mouvement pour les performances

## 🔧 Configuration avancée des points

### Effets au survol

```css
/* Animations personnalisées au survol */
.interactive-point:hover {
  transform: scale(1.2);
  transition: transform 0.3s ease;
}
```

### Superpositions de contenu personnalisées

* **Formatage de texte enrichi**: Utilisez du HTML dans les descriptions
* **Superpositions d'image**: Ajouter des images produit aux infobulles
* **Contenu vidéo**: Intégrer des vidéos produit
* **Preuve sociale**: Inclure des avis ou des évaluations

### Affichage conditionnel

* **Afficher/masquer selon l'appareil**: Mobile vs bureau
* **Affichage basé sur le temps**: Contenu saisonnier ou promotionnel
* **Comportement utilisateur**: Afficher un contenu différent pour les visiteurs de retour

## 💡 Bonnes pratiques

### Placement stratégique

1. **Mettre en avant les produits clés**
   * Mettre en lumière les best-sellers ou les nouveautés
   * Se concentrer sur les articles à forte marge
   * Créer des regroupements logiques de produits
2. **Positionnement naturel**
   * Placez les points sur ou près des produits réels dans l'image
   * Évitez les espaces vides ou les placements aléatoires
   * Considérez le chemin du regard du spectateur
3. **Distribution équilibrée**
   * Ne regroupez pas tous les points dans une seule zone
   * Créez un rythme visuel à travers l'espace
   * Laissez de l'espace entre les éléments

### Stratégie de contenu

1. **Texte attrayant**
   * Utilisez un langage orienté action
   * Mettez en avant les caractéristiques ou avantages uniques
   * Gardez le texte concis et facile à scanner
2. **Stratégie de tarification**
   * Affichez les prix pour une transparence immédiate
   * Utilisez les prix soldés pour créer de l'urgence
   * Envisagez de cacher les prix pour les articles de luxe
3. **Optimisation des appels à l'action**
   * CTA clairs et spécifiques ("Acheter maintenant", "En savoir plus")
   * Créez de l'urgence lorsque c'est approprié
   * Adaptez le style du CTA à la voix de votre marque

## 🎪 Idées créatives de mise en œuvre

### Campagnes saisonnières

* **Collections de vacances**: Guides cadeaux interactifs
* **Été/Hiver**: Vitrines de produits saisonniers
* **Rentrée**: Essentiels pour étudiants en contexte de dortoir

### Intégration au style de vie

* **Relooking de pièces**: Avant/après avec produits achetables
* **Constitueurs de tenues**: Coordination d'une tenue complète
* **Intégration de recettes**: Ustensiles de cuisine dans des contextes culinaires

### Narration de marque

* **Dans les coulisses**: Processus de production avec mise en avant d'outils
* **Patrimoine de la marque**: Frise historique avec évolution des produits
* **Durabilité**: Caractéristiques écoresponsables des produits

## 📊 Optimisation des performances

### Considérations de chargement

* **Optimisation des images**: Compressez les images d'arrière-plan
* **Limites de points**: Maximum 10-12 points par section
* **Chargement paresseux**: Charger les points au fur et à mesure qu'ils entrent dans la vue

### Intégration analytique

```javascript
// Suivre les interactions avec les points
function trackPointClick(productId, pointPosition) {
  // Envoyer à la plateforme d'analytique
  gtag('event', 'interactive_point_click', {
    'product_id': productId,
    'position_x': pointPosition.x,
    'position_y': pointPosition.y
  });
}
```

## 🐛 Dépannage

### Problèmes courants

#### Points non affichés

* **Vérifiez les valeurs de positionnement**: Doivent être entre 0 et 100%
* **Vérifiez le statut du produit**: Assurez-vous que les produits sont publiés
* **Visibilité de la section**: Confirmez que la section est activée

#### Problèmes d'affichage sur mobile

* **Taille de la cible tactile**: Augmentez la taille du point pour le mobile
* **Problèmes de viewport**: Testez sur différentes tailles d'appareils
* **Performance**: Réduisez les animations sur les appareils lents

#### Chevauchement de contenu

* **Conflits de Z-index**: Ajustez l'ordre des calques
* **Positionnement des infobulles**: Configurez le placement des superpositions
* **Points de rupture responsive**: Définissez différentes positions pour différents écrans

### Problèmes de performance

* **Chargement lent**: Optimisez les images et réduisez le nombre de points
* **Ralentissement des animations**: Simplifiez les effets ou désactivez-les sur mobile
* **Utilisation de la mémoire**: Mettez en œuvre le chargement paresseux pour les grandes sections

## 🔍 Tests et optimisation

### Idées de tests A/B

* **Placement des points**: Testez différentes positions
* **Styles visuels**: Comparez pulse vs points statiques
* **Types de contenu**: Informations produit vs messages personnalisés
* **Schémas de couleurs**: Testez les couleurs de marque vs des couleurs contrastées

### Mesures à suivre

* **Taux de clics**: Clics sur les points vers visites de pages produit
* **Taux de conversion**: Achats provenant des points interactifs
* **Temps d'engagement**: Temps passé à interagir avec les points
* **Mobile vs bureau**: Différences de performances selon l'appareil


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.openspaces.design/plain-jane-docs-v2-fr/plain-jane-interactive/sections-and-features/adding-interactive-points.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.