Plateforme d'édition de composants rich text : une solution sur-mesure pour Septeo

Notre mission auprès de Septeo

Leader français des solutions digitales pour les professions juridiques, le Groupe Septeo accompagne au quotidien plus de 120 000 professionnels. À travers ses solutions logicielles innovantes, l'entreprise transforme et simplifie le quotidien de milliers de professionnels : notaires, avocats et agents immobiliers.

Face à des besoins croissants en matière de gestion de contenu web, le Groupe Septeo nous a confié une mission stratégique : repenser l'expérience de ses 40 éditeurs sur Webflow. L'enjeu était de taille : permettre à ces équipes de créer librement des pages dynamiques et attractives en y intégrant les composants de leur design system, tout en garantissant une parfaite cohérence visuelle sur l'ensemble de leurs sites. Un défi qui allait nous pousser à dépasser les limites natives de Webflow pour créer une solution véritablement innovante.

Le défi : dépasser les limites de Webflow

Le problème initial

Webflow est un excellent outil pour créer des sites web et les faire grandir rapidement grâce à son CMS intuitif. Cependant, il y a une limitation majeure au CMS de Webflow, plus particulièrement dans ses champs de type Rich Text (contenu enrichi / éditeur visuel HTML) : impossible d'intégrer des composants personnalisés (de son projet ou d'une bibliothèque partagée) sans connaissance de code à l'intérieur.

Impact sur les équipes

Cette contrainte technique forçait les équipes Septeo à faire un choix frustrant : se limiter aux options par défaut de Webflow, bridant ainsi leur créativité et leur capacité d'innovation, ou dépendre systématiquement des développeurs pour chaque personnalisation. Une situation qui avait des répercussions concrètes :

• Perte d'autonomie des équipes marketing dans la création de contenus
• Limitation créative due aux fonctionnalités de base de Webflow
• Allongement des délais de publication
• Risque accru d'incohérences dans la charte graphique
• Complexification du processus de validation
• Mobilisation excessive des ressources techniques

Notre Solution : une plateforme interne de gestion des composants rich text

Pour répondre aux besoins de Septeo, nous avons développé une page web qui centralise l'ensemble des composants rich text utilisés sur leurs sites Webflow. L'accès à cette page peut être protégé par mot de passe, permettant de la partager uniquement avec les éditeurs concernés.

Les bénéfices pour les utilisateurs

La page a été pensée pour simplifier le travail des équipes éditoriales :

Une bibliothèque de composants visuelle

Les composants sont présentés sous forme de cartes faciles à parcourir. Chaque carte montre un aperçu du composant et ses options de personnalisation.

Une recherche facilitée

Les composants sont classés par catégories. Des filtres permettent de trouver rapidement le composant recherché. Un compteur indique le nombre de composants disponibles dans chaque catégorie.

Une édition directe et en temps réel

En passant la souris sur un composant, les zones modifiables apparaissent. L'éditeur peut alors changer les textes, les images ou les liens. Les modifications s'affichent en temps réel, ce qui évite les allers-retours.

Une intégration simple

Une fois le composant personnalisé, un simple clic sur un bouton dédié permet de copier le code nécessaire. Ce code est prêt à être utilisé dans l'éditeur rich text de Webflow via l'élément embed code.

‍

Les bénéfices côté technique

La page repose sur une architecture qui garantit performance et facilité de maintenance :

Gestion intelligente des ressources

• Un système de cache conserve les prévisualisations pendant 24h
• Les images sont automatiquement optimisées
• Les composants se chargent progressivement pour une navigation fluide

Structure modulaire

Les composants sont intégrés dans des cartes standardisées (via des composants webflow). Cette structure permet d'ajouter facilement de nouveaux composants selon les besoins de Septeo.

Technologies utilisées

• JavaScript vanilla pour l'ensemble des fonctionnalités
• HTML2Canvas pour générer les prévisualisations
• Quill.js pour l'édition de texte enrichi
• LocalStorage pour sauvegarder temporairement les modifications

‍

Comment ça marche ?

Le processus d'utilisation suit une logique simple :

1. Choix du composant
   L'éditeur arrive sur la page et utilise les filtres par catégorie pour trouver le composant dont il a besoin.
2. Personnalisation
   En survolant le composant, les zones modifiables sont mises en évidence. Un clic ouvre un éditeur contextuel qui permet de :
   • Modifier les textes avec un éditeur enrichi
   • Changer les images avec une prévisualisation
   • Ajuster les liens avec leurs options
   • Supprimer des éléments optionnels
   • Remettre le composant à son état d'origine si nécessaire
3. Prévisualition
   Les modifications apparaissent directement dans la carte. L'éditeur peut ainsi valider le rendu final avant l'intégration.
4. Copie du code HTML du composant
   Un bouton copie le code HTML du composant personnalisé. L'éditeur peut alors :
   • Ouvrir son site Webflow
   • Aller dans son rich text
   • Coller le code dans un bloc "Embed"‍
5. Réutilisation du composant
   ‍Les modifications sont conservées pendant 24h. L'éditeur peut donc :
   • Revenir sur ses composants modifiés
   • Faire de nouveaux ajustements
   • Réinitialiser le composant si besoin

Cette solution permet aux équipes de Septeo de :

• Créer du contenu de manière autonome
• Maintenir une cohérence visuelle sur tous leurs sites
• Gagner du temps dans leur production de contenus
• Éviter les allers-retours avec les équipes techniques

‍

Impact et résultats

Chiffres clés

• 85% de Gain de Temps dans la production de contenu
• 100% de Conformité avec la charte graphique
• Production x3 du volume de contenus publiés

Un gain d'efficacité multi-niveau

Pour les équipes marketing et communication

‍La solution libère le potentiel créatif des équipes : elles créent, modifient et publient leurs contenus en toute autonomie, sans contrainte technique. Les workflows sont fluidifiés, de la conception à la mise en ligne.

Pour les développeurs

‍L'approche modulaire de la solution permet aux équipes techniques de :

• Se concentrer sur l'évolution de la plateforme
• Enrichir la bibliothèque de composants selon les besoins
• Maintenir un code structuré et évolutif

Pour Septeo

‍Cette innovation apporte des avantages stratégiques :

• Réduction des coûts opérationnels
• Accélération des cycles de publication
• Cohérence renforcée de la communication digitale
• Adaptabilité aux évolutions du marché

Une solution sur-mesure signée Digidop

Face aux limitations du Rich Text Webflow, nous avons développé cette solution produit innovante. Cette plateforme web s'intègre naturellement dans l'écosystème Webflow et transforme la façon dont les équipes gèrent leurs composants Rich Text.

Notre approche d'intégration se distingue par sa simplicité :

1. Installation du système dans votre environnement Webflow existant
2. Configuration des accès selon vos besoins de sécurité
3. Formation rapide des équipes à l'utilisation de la plateforme
4. Accompagnement continu pour optimiser l'utilisation

La puissance de ce produit réside dans sa capacité à s'adapter à différents contextes d'utilisation. Qu'il s'agisse d'une équipe marketing cherchant à accélérer sa production de contenu ou d'une grande entreprise nécessitant une cohérence visuelle parfaite, il évolue avec vos besoins.

En résumé

Cette solution développée pour Septeo représente une innovation significative dans l'écosystème Webflow. Au-delà de la réponse technique aux besoins actuels, elle pose les bases d'une plateforme évolutive qui accompagnera la croissance du groupe. Son architecture modulaire permet d'intégrer facilement de nouveaux composants et de s'adapter aux futures évolutions de Webflow.

Cette réalisation démontre la capacité de Digidop à créer des solutions sur mesure qui conjuguent performance technique et simplicité d'utilisation.