L’intégration du FORMAT Brand Space s’effectue à l’aide du code iframe suivant, que vous pouvez insérer dans votre système de gestion de contenu ou dans votre boutique:
<iframe src="https://formattools.eu/brand-space-integrated/" allow="fullscreen" width="100%" height="800px" style="border:none;"></iframe>
Vous trouverez ci-dessous un guide avec des explications détaillées étape par étape:
Tout d’abord, vous devez vérifier si le système de gestion de contenu de votre site web ou de votre boutique en ligne offre la possibilité d’insérer des codes HTML. Une telle fonction devrait être disponible dans la grande majorité des systèmes de gestion de contenu. Il peut s’agir d’un champ de texte avec option de code, d’un champ « iframe » ou « intégration », d’un éditeur pour des adaptations individuelles du code ou tout simplement de l’accès aux fichiers sources du système dans lequel il est possible d’insérer son propre code.
Vous trouverez une liste des systèmes de gestion de contenu et des systèmes de boutique les plus courants ainsi que des recommandations pour l’intégration du code iframe à la fin de cette page, ou sous le lien suivant : https://formattools.eu/dokumentation-brand-space/#cmslist
Il convient tout d’abord d’analyser à quel endroit le FORMAT Brand Space doit être intégré au mieux sur le site Web. L’endroit idéal pour l’intégration dépend du design de chaque site web.
Nous recommandons toutefois de créer une nouvelle sous-page pour le site web. Sur cette nouvelle sous-page, il est possible de présenter exclusivement le FORMAT Brand Space et éventuellement les informations correspondantes (voir par ex. https://formattools.eu/brand-space-englisch/). En outre, il est recommandé d’intégrer la nouvelle sous-page dans le menu du site web. De plus, un lien de redirection devrait être créé à partir d’une bannière de la page d’accueil ou d’une zone de texte sur la page d’accueil, afin que l’utilisateur puisse trouver facilement le FORMAT Brand Space.
Si l’utilisateur le souhaite, il est possible d’établir ce lien de telle sorte qu’un clic sur un bouton ouvre le Brand Space dans un nouvel onglet. Un tel réglage est toutefois indépendant de l’intégration de l’iframe et doit être effectué comme d’habitude pour le bouton concerné dans votre système de gestion de contenu ou de boutique.
Remarque : la création d’une page de test n’est pas obligatoire. Cependant, nous recommandons cette étape intermédiaire afin de pouvoir vérifier au préalable l’intégration réussie du FORMAT Brand Space.
Pour éviter que le code iframe ne soit directement intégré dans le système de production, il convient de créer d’abord une page de test dans le CMS. Cette procédure permet de vérifier dans un premier temps la bonne intégration du code iframe sans que le FORMAT Brand Space ne soit visible pour les visiteurs du site. En outre, une telle page de test est avantageuse pour pouvoir effectuer en toute tranquillité des adaptations au niveau de l’affichage et du fonctionnement de l’iframe (voir étapes 4 et 5).
Si votre système de gestion de contenu offre la possibilité d’insérer des codes HTML (voir étape 1), veuillez insérer le code iframe suivant à l’endroit approprié :
<iframe src="https://formattools.eu/brand-space-integrated/" allow="fullscreen" width="100%" height="800px" style="border:none;"></iframe>
Vous pouvez maintenant avoir un aperçu de votre page. Grâce à cette fonction, vous avez la possibilité de visualiser la future vue. Après avoir inséré le code iframe, l’espace de marque FORMAT devrait être visible ici. Si vous êtes satisfait de la représentation, vous pouvez alors enregistrer l’adaptation de la page effectuée. Si vous souhaitez adapter la représentation ou les modes de fonctionnement sélectionnés de l’iframe, il convient de suivre les étapes 5 et 6.
Vous pouvez adapter vous-même les valeurs width="100%" et height="800px" dans le code iframe afin d’ajuster la largeur et la hauteur de la fenêtre de l’espace de marque. Vous pouvez indiquer les valeurs en pourcentage ou en taille de pixel fixe.
Via style="", vous avez la possibilité d’écrire des propriétés CSS pour le « Styling ». Actuellement, on y trouve par exemple border:none; ; pour supprimer la bordure standard de la fenêtre Brand Space. Ici, il serait par exemple possible de définir des bordures de couleur pour la fenêtre de l’espace de marque qui correspondent au Corporate Design de votre entreprise. Pour cela, écrivez une définition selon le modèle suivant au lieu de border:none; :
border:1px solid #ff0000;
Celle-ci ajoutera une bordure continue de 1 pixel de large avec la couleur rouge (valeur hexadécimale #ff0000;).
Vous trouverez une liste de toutes les définitions CSS possibles ici: https://www.w3schools.com/cssref/index.php
Si vous n’obtenez pas le résultat souhaité avec ces paramètres, d’autres adaptations de style sont nécessaires dans votre système de gestion de contenu ou de boutique.
En ajoutant d’autres paramètres au code iframe existant, il est également possible d’adapter les modes de fonctionnement de l’iframe.
Par exemple, il est possible de configurer le démarrage automatique du Brand Space lors du chargement de la sous-page. Le visiteur ne doit alors plus cliquer lui-même sur le bouton de démarrage. Pour activer cette option, il suffit d’ajouter la mention ?vt=open au lien dans le code de l’iframe.
Le code iframe complet se présente alors comme suit:
<iframe src="https://formattools.eu/brand-space-integrated/?vt=open" allow="fullscreen" width="100%" height="800px" style="border:none;"></iframe>
D’autres fonctions sélectionnées au sein du FORMAT Brand Space sont gérées de manière centralisée par E/D/E. Cela concerne par exemple le lien entre les produits de l’espace de la marque et votre boutique en ligne.
Remarque : cette étape n’est pertinente que si vous avez d’abord créé le FORMAT Brand Space sur une page de test (voir étape 3).
Si vous avez créé une page test à l’étape 3, vous pouvez maintenant la publier et la lier dans votre menu principal, sur la page d’accueil ou à un autre endroit.
Si vous souhaitez plutôt intégrer le FORMAT Brand Space dans une autre page, copiez le contenu de votre page test à l’endroit correspondant.
Systèmes de gestion de contenu et de boutique courants :
Les explications suivantes concernant les systèmes de gestion de contenu et les systèmes de boutique les plus courants et sont des recommandations. Chaque système étant unique, il se peut que vous disposiez de possibilités de paramétrage totalement différentes.
Si vous n’êtes pas sûr que l’intégration de FORMAT Brand Space soit possible avec votre système, vous pouvez volontiers faire contrôler votre site web par un prestataire de services externe.
Pour un suivi en anglais et en allemand, nous vous recommandons de prendre contact avec Robert Drost, de FARN Digital GmbH, à l’adresse e-mail drost@farn.de.
WordPress ou WooCommerce dispose d’un bloc dans l’éditeur de blocs appelé « HTML individuel », dans lequel le code iframe peut être inséré.
Dans Shopify, le bouton « Afficher HTML » permet de passer l’éditeur en mode code, dans lequel on peut insérer le code iframe.
Dans les blocs du thème, il est également possible d’ajouter son propre HTML à l’aide du bloc « Liquid personnalisé ».
Dans Typo3, les champs de saisie de texte peuvent être mis en mode code avec l’option « Code source ». L’iframe peut être inséré ici.
Shopware 6 dispose d’un bloc appelé « HTML » dans lequel le code iframe peut être inséré.
Dans Magento 2, il est possible d’ajouter l’élément « HTML Code » dans lequel on peut insérer le code iframe.
Dans Drupal, le code iframe peut être ajouté à l’aide de la section « Iframe ». Il est également possible de passer en mode code à l’aide du champ de saisie de texte dans la section « Texte ».
Dans Hubspot, le bloc « Rich Text » du contenu peut être mis en mode code source en cliquant en haut sur « Avancé » puis « Code source ».
