Éditeur de contenu web

Création 30 juillet 2021 13:39

Mise à jour 8 avril 2025 08:40

L'éditeur de contenu web vous permet de concevoir, de manière responsive et très visuelle, les contenus personnalisés qui seront affichés à vos contacts depuis votre compte, via des workflows créés à cet effet, sans nécessiter de programmation supplémentaire sur votre site.

Connectif propose 5 types de contenus web : popup, full screen, slide in, floating bar et inline. Pour en savoir plus sur les particularités de chacun, cliquez sur leurs noms pour visiter les articles détaillés.

Comment accéder ?

Vous pouvez accéder à l'éditeur de contenu web via deux méthodes :

1. Depuis “Contenu > Contenu Web”. Cliquez sur Créer un nouveau contenu web pour générer un nouveau contenu, ou sur Plus puis sélectionnez Modifier pour éditer un contenu web existant.

Lors de la création d'un nouveau contenu web, sélectionnez le type et attribuez-lui un nom pour l'identifier facilement.

2. Depuis le nœud "Envoyer contenu web" dans un workflow, en cliquant sur (Modifier la configuration du nœud). Cliquez sur Créer un nouveau contenu ou sur Modifier pour éditer un contenu web existant.

Interface

L'éditeur de contenu web est composé de trois blocs :

1. Aperçu et enregistrement : pour enregistrer ou annuler les modifications apportées. Vous pouvez également prévisualiser le résultat final du contenu qui sera intégré dans votre eCommerce ou consulter sa version HTML.

2. Panneau de conception : pour construire visuellement le contenu web en utilisant les structures et composants du panneau 3 (outils).

3. Outils : pour configurer toutes les propriétés du contenu et utiliser les composants de mise en page. Ce panneau peut être réduit ou développé en cliquant sur (Ouvrir les outils) ou (Fermer les outils).

Fonctionnement

L'éditeur de contenu web utilise la méthode de conception 'drag and drop' (glisser-déposer), ce qui permet de concevoir les contenus de manière rapide, simple et très visuelle.

1. Modifier le style général

Dans le panneau Outils (3), cliquez sur l'onglet Général pour modifier les paramètres d'apparence générale du contenu. Vous pouvez également y accéder en cliquant sur Propriétés générales du panneau de conception (2).

Bien qu'il existe des paramètres communs, la configuration des propriétés générales peut varier selon le type de contenu web que vous créez.
N'oubliez pas que vous disposez ci-dessus des liens vers la documentation de chacun d'entre eux.

Les paramètres communs à définir sont :

Nom : nom que vous souhaitez donner au contenu pour l'identifier dans votre compte Connectif.
Étiquettes : catégorisez votre contenu web et retrouvez-le rapidement en cliquant sur Ajouter des étiquettes et en ajoutant des mots-clés qui vous aideront à l'identifier.

Les étiquettes sont très utiles pour retrouver rapidement vos workflows ou pour les regrouper en fonction de leurs caractéristiques et de leur objectif. Nous vous recommandons d'ajouter des étiquettes avec :
— Nom de la campagne.
— Date de lancement.
— Public cible.
— Objectif de la campagne (vente, fidélisation, acquisition…).

Par exemple, en utilisant les étiquettes "Soldes de Printemps", "Clients ayant acheté" et "Acquisition".

Bordures : couleur, épaisseur et style de la bordure de votre contenu.
Fond du contenu : couleur et effets d'image pour la couche de fond de votre contenu.
Ombre : couleur et effets d'ombre de la structure qui affichera votre contenu.
Z Index : valeur numérique indiquant l'ordre de superposition des couches.
Responsive : seuil de conception responsive (jusqu'à quelle largeur d'écran il sera considéré comme un appareil mobile).

2. Construire un contenu web par blocs

Dans le panneau Outils (3), cliquez sur l'onglet Composants pour élaborer votre composition en faisant glisser et déposer des structures ou des éléments dans le panneau de conception (2).

Structure

Répartition que prendra un bloc d'éléments au sein de la mise en page du contenu web. Elle peut se présenter en une ou plusieurs colonnes, avec des proportions identiques ou différentes.

La structure doit être définie en premier lieu. Si elle n'est pas incluse, par défaut une structure à une colonne sera utilisée.

Une fois le bloc d'éléments créé, placez la souris dessus et cliquez sur (Modifier le bloc) pour le modifier, (Dupliquer le bloc) pour créer un duplicata ou (Supprimer le bloc) pour l'effacer.

Éléments

Contrairement aux propriétés générales, les éléments sont communs et peuvent être utilisés pour concevoir tous les types de contenu web.

Les éléments sont les unités minimales de contenu fonctionnel qui permettent de construire la mise en page de votre contenu web, en les faisant glisser dans les blocs créés dans le panneau de conception (2). Comme pour la structure, vous pouvez les éditer en plaçant la souris sur un élément et en cliquant sur le bouton (Modifier l'élément) ou directement sur le contenu lui-même. Vous pouvez également les dupliquer en cliquant sur (Dupliquer l'élément), ou les supprimer en cliquant sur (Supprimer l'élément).

Les éléments disponibles sont :

"Texte"
Rédigez votre contenu en appliquant un format enrichi (gras, italique, liens…), en insérant des variables dynamiques ou en modifiant la disposition dans le bloc inséré.

Les variables dynamiques permettent de personnaliser le texte en fonction des données collectées dans le profil de chaque contact. Pour en savoir plus sur les variables et améliorer les performances de votre contenu web, nous vous recommandons de consulter l'article Que sont les variables et comment les utiliser.

Le bouton (Convertir en HTML) de cet élément et des suivants convertit l'élément texte en format HTML de manière irréversible. Pour utiliser cette fonction, vous aurez besoin de connaissances de base en HTML & CSS. Si vous n'avez pas d'expertise dans ce domaine, nous vous recommandons de ne pas procéder à la conversion.

"Image"
Si votre image est déjà publiée sur Internet, collez l' URL de l'image pour l'inclure dans le contenu web. Pour la télécharger depuis votre appareil, cliquez sur Télécharger l'image ou sur ( ), puis sélectionnez le fichier dans la fenêtre contextuelle. Une fois chargée, l'URL de l'image sera automatiquement renseignée.

Vous pouvez également ajouter un lien à l'image, ajuster sa position par rapport au bloc qui la contient ou changer la couleur d'arrière-plan. En option, vous pouvez définir le Texte alternatif (qui s'affiche si l'image ne charge pas) et l'Attribut ‘title’ de l'image (le texte affiché lors du survol de l'image).

"Bouton lien"
Définissez le texte qui apparaîtra sur votre bouton, l'attribut ‘title’ et le lien (qui peut être spécifique ou prédéfini pour exécuter une action donnée). Pour configurer son apparence visuelle, sélectionnez les couleurs de texte et d'arrière-plan, personnalisez les bordures et les coins, et ajustez sa position dans le bloc.

"Diviseur"
Configurez à la fois la couleur et la position de la ligne verticale pour séparer visuellement les contenus.

"Espace"
Définissez la distance à insérer entre deux blocs. Par défaut, ce bloc est transparent, mais vous pouvez définir une couleur si nécessaire pour votre mise en page.

"Produits"
Insérez un carrousel de produits qui sera complété avec les articles d'intérêt pour le contact. Vous pouvez choisir parmi trois modèles par défaut (Produit de base, Produit avec marque ou Produit avec prix) ou personnaliser leur apparence finale dans l'éditeur de texte. Vous pouvez également définir la structure des lignes et des colonnes en fonction de l'appareil.

Pour que le carrousel de produits affiche les articles pertinents pour le contact, il est indispensable d'utiliser un nœud “Obtenir des produits” avant le nœud “Envoyer du contenu web”. Vous pouvez en apprendre plus dans les articles Afficher des produits personnalisés dans un contenu et Nœud “Obtenir des produits”.

"HTML"
Insérez un code HTML personnalisé et ajustez sa mise en page.

Pour insérer cet élément, il est recommandé de faire appel à un expert en mise en page et design CSS et HTML afin de garantir la bonne visualisation du contenu.

"WhatsApp"
Ajoutez un bouton permettant aux utilisateurs de vous contacter ou de partager la page qu'ils visitent via WhatsApp. Définissez le texte qui apparaîtra sur votre bouton, l'attribut ‘title’, le type d'action et le message par défaut qui sera envoyé. Pour configurer son apparence visuelle, sélectionnez les couleurs du texte et de l'arrière-plan, personnalisez les bordures et les coins, et ajustez sa position dans le bloc.

"Vidéo"
Collez l'URL de la vidéo YouTube ou Vimeo que vous souhaitez afficher dans votre contenu et définissez ses options de lecture. Si elle est valide, la vignette de la vidéo apparaîtra dans le panneau de conception (2).
Pour les réglages visuels, vous pouvez ajuster la disposition de la vidéo ou changer la couleur de fond.

"Compte à rebours"
Configurez le compteur en définissant une date de fin et son format. Personnalisez la police, la taille et la couleur des chiffres et des étiquettes, dont vous pouvez également modifier le texte. Choisissez une couleur d'arrière-plan et ajustez la disposition du compteur.

Éléments de formulaire

Les éléments de formulaire permettent de collecter des informations sur le contact via votre contenu web, ce qui permet de capturer des leads, de réaliser des sondages, des enquêtes, etc.

Si vous envisagez de créer un formulaire dans votre contenu web, nous vous recommandons de lire l'article Formulaires dans les contenus web.

Les éléments de formulaire disponibles selon le type de données collectées sont :

"Texte" : pour un ou plusieurs mots, tous les caractères sont acceptés.
"Nombre" : pour toute valeur numérique avec ou sans décimales.
"Date" : pour une date au format jour, mois et année, compatible en interne avec ISO 8601.
"Email" : pour une adresse e-mail valide.
"Multiligne" : pour plusieurs lignes de texte.
"Radio" : pour afficher une liste d'options dont une seule peut être sélectionnée.
"Sélection" : pour afficher un menu déroulant avec plusieurs options dont une seule peut être sélectionnée.
"Case à cocher" : pour afficher une liste d'options dont une ou plusieurs peuvent être sélectionnées.
"Bouton Envoyer" : Permet au contact d'envoyer le formulaire et de recueillir dans Connectif les données saisies.

Lorsque le contact clique sur ce bouton, un événement "Formulaire envoyé" est généré, auquel il est possible de réagir dans un workflow via le nœud "À l'envoi du formulaire".

Pour en savoir plus sur les types de données que vous pouvez recueillir auprès des contacts, cliquez ici.

3. Créer et utiliser des composants personnalisés existants

Dans la section Composants personnalisés du bloc d'outils (3), cliquez sur Créer nouveau pour enregistrer la conception que vous avez réalisée comme modèle. Sélectionnez le bloc ou les blocs qui feront partie du modèle et, dans la barre d'aperçu et d'enregistrement (1), cliquez sur Créer nouveau.

Dans la fenêtre contextuelle, attribuez un nom et des étiquettes au composant personnalisé, puis cliquez sur Enregistrer.

Les composants personnalisés peuvent être utilisés dans tout type de contenu web comme modèle, indépendamment du contenu d'origine à partir duquel ils ont été créés.

Vous pouvez également concevoir rapidement vos contenus web depuis le panneau Outils (3), en faisant glisser dans la zone de conception (2) les composants personnalisés que vous avez créés, disponibles dans la section Composants personnalisés de l'onglet Composants.

4. Vérifier les variables

Si vous n'avez pas utilisé de variables dans votre contenu web, vous pouvez ignorer cette section.

Les variables sont un élément qui permet de personnaliser vos contenus. Examinez les variables créées et le nombre de fois qu'elles apparaissent dans les éléments de texte depuis le panneau Outils (3), dans l'onglet Variables. Pour modifier leur format, cliquez sur .

Pour en savoir plus sur le format des variables, cliquez ici.

5. Aperçu du résultat final et enregistrement

Dans le panneau d'aperçu et d'enregistrement (1), vous pouvez voir le résultat final de votre contenu web.

Tous les contenus créés sont responsives. Vous pouvez cliquer sur Aperçu pour vérifier le rendu final. Cliquez sur (Vue sur ordinateur) pour voir le rendu sur desktop, ou cliquez sur (Vue sur mobile) pour voir le rendu sur les appareils mobiles.

Une fois que le résultat du design est satisfaisant, cliquez sur Enregistrer pour sauvegarder les modifications du contenu web.

Gardez à l'esprit que les styles appliqués dans votre e-commerce peuvent affecter l'apparence du contenu web. Vérifiez la configuration héritée des règles CSS globales si l'apparence des éléments de Connectif sur votre site diffère de celle obtenue dans l'éditeur de contenu.

Félicitations !
Vous êtes arrivé à la fin de la leçon.

Vous avez encore des questions non résolues ?
Rappelez-vous que vous avez à votre disposition nos spécialistes chez Connectif. Pour les contacter, il vous suffit d'ouvrir un ticket de support en cliquant sur le bouton bleu “Aide” de votre tableau de bord.

Continuez à apprendre !

Pour tirer le meilleur parti de votre compte Connectif, nous vous recommandons de continuer avec les articles suivants :

Créer un bloc de produits personnalisés dans un contenu web, pour afficher à vos clients des produits correspondant à leurs intérêts.
Afficher des produits personnalisés dans un contenu, pour montrer des produits personnalisés à chaque contact grâce à un contenu dynamique et un workflow.
Afficher le pourcentage de réduction uniquement lorsqu'il y a une remise dans un contenu web, pour mettre en avant les prix réduits et leur pourcentage de réduction dans un contenu.
Recommandation sur la page d'accueil, pour afficher sur la page d'accueil les produits récemment visités par vos contacts.