Loading
Dans cet article, nous allons voir comment insérer un code HTML, CSS et JS sur des pages créées à partir de systeme.io.
Ce dont vous aurez besoin :
- un compte systeme.io
- un code HTML, CSS ou JS
Pourquoi ajouter du code personnalisé à vos pages ?
En ajoutant du code HTML à votre page, il est possible d'ajouter un style personnalisé, une fonctionnalité et une structure aux contenus des images, du texte, des liens, etc.
Par exemple :
- Pour personnaliser le style, vous pouvez ajouter du code CSS.
- Pour ajouter des animations sur une page ou des éléments individuels (par exemple lors du survol ou du clic sur un bouton), ajoutez du code JS.
- Pour ajouter des titres ou du texte en général, créer des tableaux ou structurer les sections de votre page, ajoutez du code HTML.
Notes importantes :
Lors de l'ajout de code personnalisé dans les sections de code header, footer, tracking ou code html, ne pas inclure les balises suivantes :
<head> </head><footer> </footer><html> </html><body> </body>
Lors de l'ajout d'une vidéo via une iframe , aucun tag supplémentaire n'est requis.
Incorrect :
<div>
<iframe src="link to your video"></iframe>
</div>
Correct :
<iframe src="link to your video"></iframe>
Il existe trois (3) méthodes pour intégrer différents codes sur vos pages :
1. L'ajout des codes dans la partie "Codes de tracking" :
Pour intégrer vos codes de tracking, il faut vous rendre sur le tunnel de vente contenant la page sur laquelle vous souhaitez mettre en place le code.
Ensuite, accéder à l'éditeur de cette page, puis accéder aux "Paramètres" depuis le volet gauche (1).
Faites défiler le menu de gauche jusqu'à la section "Tracking" (2).
1.1 Les codes à insérer dans la partie code d'en-tête :
Toute partie introductive d'un code doit être mise dans la partie dite <head>. De ce fait, tout code qu'il vous est demandé d'insérer dans la partie "Header" est à inclure dans la section du code d'en-tête de votre éditeur sur systeme.io.
1.2 Les codes à insérer dans la partie code de bas de page :
Tout code destiné au "Document Object Model" aussi appelé "Le Modèle Objet de Document" (DOM), est à insérer dans la partie code de pied de page.
2. L'ajout d'un code depuis les paramètres des tunnels de vente :
Il y a des codes qu'il faut ajouter sur chaque page de votre tunnel de vente. Afin d'éviter la contrainte d'avoir à le faire à chaque fois, il vous est possible de l'appliquer directement sur le code de tracking à cet effet, et celui-ci sera automatiquement déployé sur l'ensemble du tunnel de vente.
Pour ce faire, veuillez vous rendre sur votre "Menu" (au-dessous de votre image de profil), puis sur "Paramètres", ensuite sur les "Tunnels de vente", et insérer le code dans l'emplacement à cette fin.
3. L'ajout d'un élément "Code HTML" sur la page :
Il est également possible d'insérer tout code HTML directement sur une page créée sur systeme.io via l'éditeur.
Remarque : l'élément "Code HTML" n'est pas disponible sur les pages d'information. Si vous modifiez une page d'information et que vous ne trouvez pas l'élément "Code HTML" dans le panneau latéral, c'est parce que les blocs HTML personnalisés ne sont pas pris en charge sur ce type de page spécifique.
1. Il faudra ajouter l'élément "Code HTML" sur la partie souhaitée de votre page, en le faisant glisser.
2. Ensuite, cliquez sur l'icône de paramètres, afin que les paramètres de celui-ci s'affichent (1).
Sur le volet gauche, la section destinée à l'intégration du code HTML s'affichera, vous devez cliquer sur "Modifier le code" (2).
Vous devez ensuite ajouter le code HTML (3), puis "Enregistrer" (4).
Veillez à sauvegarder vos modifications (5).
Remarque : le rendu du code HTML n’apparaît pas en mode Aperçu. Le résultat sera visible uniquement sur la page en ligne.
FAQ :
- Question :
Est-il possible, depuis un bouton HTML personnalisé, d’ouvrir un pop-up systeme.io natif ?
- Réponse :
Oui, il est possible d'ouvrir une popup depuis un bouton personnalisé intégré dans un bloc HTML à condition de maîtriser le HTML / JavaScript. Cela peut notamment être réalisé en utilisant l’attribut ID de la popup.