Description : Cet outil permet de créer des catalogues numériques interactifs, où les images peuvent être "taguées" avec des points cliquables renvoyant à des produits ou contenus spécifiques.
À quoi ça sert ? (Exemples pratiques)
Utilisez les catalogues taguables pour transformer des images statiques en expériences de navigation dynamiques et commerciales.
- E-commerce de mobilier : Montrez une photo d'un salon et taguez chaque meuble (canapé, lampe, table basse) en le reliant directement à la page d'achat du produit.
- Catalogues de mode : Chargez une image d'un mannequin et taguez les vêtements individuels (veste, pantalon, chaussures) pour permettre un achat immédiat.
- Schémas techniques ou plans : Permettez aux utilisateurs de cliquer sur des zones spécifiques d'un diagramme ou d'une carte pour afficher des détails techniques ou des informations supplémentaires.
Fonctionnalités principales
Gestion des catalogues
La zone de gestion principale permet de :
1. Créer de nouveaux catalogues : en attribuant un nom et une structure de pages.
2. Charger les pages : chaque page du catalogue est une image sur laquelle il est possible de positionner les tags.
3. Définir les tags interactifs : en utilisant l'éditeur visuel pour placer les points d'intérêt sur l'image.
Éditeur visuel des tags
Lors de la modification d'une page du catalogue, on accède à un mode d'édition qui permet de :
- Ajouter de nouveaux tags : en cliquant n'importe où sur l'image.
- Déplacer les tags existants : en faisant glisser le point d'intérêt à l'emplacement souhaité.
- Modifier le contenu du tag : chaque tag doit être lié à un élément existant dans le système (typiquement un produit ou un service).
Liaison automatique aux contenus
Le système est conçu pour récupérer automatiquement les informations d'un produit ou service et les afficher à l'intérieur du tag.
Lors de la création ou modification d'un tag, il est nécessaire d'insérer un code spécifique identifiant le contenu à lier. Ce code est composé du type de contenu et de son ID unique, séparés par une virgule.
| Champ dans le Tag | Description | Format Exemple |
|---|---|---|
| Texte du Tag | Identifiant du contenu à afficher (ex. Produit, Article, Service). | prodotto,1234 |
Si la liaison est valide, le tag affichera automatiquement :
- Un aperçu de l'élément.
- Le titre de l'élément.
- Le prix (si applicable et correctement formaté par le système).
- Un lien direct vers la page de l'élément.
Interaction utilisateur (Frontend)
Lorsque le catalogue est affiché sur le site web, les tags fonctionnent comme suit :
- Affichage : Les tags sont représentés par un point visible sur l'image.
- Interaction : En passant le curseur de la souris sur le point (ou en le touchant sur les appareils mobiles), un popup contenant les informations détaillées de l'élément lié apparaît.
- Navigation : En cliquant sur le popup, l'utilisateur est redirigé vers la page complète de l'élément.
Comment le configurer
La configuration se déroule en deux phases : la création du catalogue (backend) et l'insertion sur la page (frontend).
1. Création et gestion du catalogue (Backend)
1. Accédez au menu principal et sélectionnez Cataloghi taggabili.
2. Créez un nouveau catalogue ou modifiez-en un existant.
3. À l'intérieur du catalogue, ajoutez les pages en chargeant les images qui composeront votre catalogue.
4. Pour chaque page, cliquez sur l'option pour activer le mode éditeur.
5. Cliquez sur l'image à l'endroit où vous souhaitez positionner un tag.
6. Un champ de texte s'ouvrira dans le popup du tag : insérez le code de liaison (ex. prodotto,567).
7. Cliquez sur le bouton Enregistrer pour confirmer le tag.
8. Répétez l'opération pour tous les produits à taguer.
2. Insertion du catalogue dans une page (Frontend - Visual Builder)
Pour afficher le catalogue interactif sur une page de votre site :
1. Ouvrez la page souhaitée dans l'éditeur visuel.
2. Ajoutez un nouveau bloc et recherchez le bloc nommé Catalogo taggabile.
3. Dans les options de configuration du bloc, sélectionnez le catalogue que vous avez créé précédemment via le sélecteur approprié.
4. Enregistrez et publiez la page. Le catalogue s'affichera avec tous les tags actifs.
Intégrations automatiques
Intégration avec les données de stock/services
Le système utilise la fonction de recherche interne pour récupérer en temps réel les détails (nom, prix, lien) des produits, services ou autres contenus spécifiés dans le code du tag. Cela garantit que les informations affichées dans les popups sont toujours à jour.
Accès via API
Les données des catalogues sont exposées via des interfaces de programmation (API), permettant aux développeurs externes d'intégrer les catalogues taguables dans des applications personnalisées ou des systèmes externes.
