Format JSON des sections

Le contenu d'une page est un tableau ordonné de sections. C'est ce tableau que vous lisez et écrivez dans le champ sections des pages. Le même format est utilisé par l'éditeur, par le générateur IA et par le rendu des sites.

Bon à savoir Le catalogue ci-dessous est généré automatiquement à partir du fichier de définition utilisé par le serveur : il est toujours à jour. La même source est disponible en JSON via GET /v1/catalog.

Structure d'une section#

{
  "id": "1b7c3f2e-5a4d-4e8b-9c0f-2d6e8a1b3c5d",
  "type": "hours",
  "variant": "table",
  "data": {
    "title": "Horaires",
    "days": [
      { "day": "Mo", "hours": "Fermé" },
      { "day": "Tu", "hours": "11:30-14:00, 17:30-22:00" },
      { "day": "Sa", "hours": "11:30-22:30" }
    ],
    "note": "Ouvert les jours fériés."
  },
  "style": {
    "background": "surface",
    "spacing": "md",
    "image": null,
    "hidden_mobile": false,
    "anchor": "horaires"
  }
}

Style#

Règles de nettoyage#

Chaque fois que vous envoyez des sections (création ou modification de page, aperçu), le serveur les nettoie sans renvoyer d'erreur : vérifiez donc la réponse pour constater ce qui a été conservé.

• Les éléments qui ne sont pas des objets, ou dont le type est inconnu, sont ignorés.
• Au-delà de 60 sections, les suivantes sont ignorées (et PATCH /pages/{page} refuse plus de 60 éléments avec un 422).
• Dans data, seuls les champs définis pour le type sont conservés ; les autres sont retirés. Un champ absent reste absent (le rendu utilise alors une valeur vide).
• Selon le type de champ :
  • text : HTML retiré, 300 caractères max. ;
  • textarea : HTML retiré, 4 000 caractères max. (les retours à la ligne sont conservés) ;
  • richtext : HTML filtré, seules les balises p, br, strong, b, em, i, u, a, ul, ol, li, h3, h4 et blockquote sont gardées, sans aucun attribut sauf href sur les liens (et seulement si le lien est accepté), 20 000 caractères max. ;
  • image et url : seuls les liens commençant par http://, https://, /, #, mailto: ou tel: sont acceptés, sinon null (2 000 caractères max.) ;
  • toggle : converti en booléen ;
  • color : #RRGGBB ou null ;
  • select : la valeur est conservée comme un texte court (choisissez une valeur de la liste du champ pour un affichage correct) ;
  • list : chaque élément est nettoyé avec les sous-champs de la liste, les éléments qui ne sont pas des objets sont retirés, et la liste est tronquée à son maximum (50 si aucun maximum n'est indiqué).
• style : toute valeur non autorisée est remplacée par la valeur par défaut.

Attention Les valeurs d'un champ select ne sont pas contrôlées par le serveur. Par exemple rating des avis attend "5", "4" ou "3" (des chaînes), et day des horaires attend Mo, Tu, We, Th, Fr, Sa ou Su.

Exemple de nettoyage#

Envoyé :

[
  { "type": "text", "data": { "title": "<b>Notre histoire</b>", "body": "<p onclick=\"x()\">Depuis 1987 <a href=\"javascript:alert(1)\">ici</a></p><script>x()</script>", "couleur": "rouge" } },
  { "type": "inconnu", "data": {} }
]

Conservé :

[
  {
    "id": "c0a8012e-7f3b-4b1e-9d2a-6e5f4c3b2a10",
    "type": "text",
    "variant": "default",
    "data": { "title": "Notre histoire", "body": "<p>Depuis 1987 <a>ici</a></p>x()" },
    "style": { "background": "default", "spacing": "md", "image": null, "hidden_mobile": false, "anchor": null }
  }
]

Icônes#

Valeurs possibles des champs icon (noms d'icônes Lucide) :

sparkles, heart, check, star, scissors, flower, utensils, coffee, truck, phone, map-pin, clock, hammer, wrench, paintbrush, home, leaf, gift, shield-check, smile, award, calendar, camera, users, shopping-bag, euro, zap, sun, baby, dog, car, dumbbell, graduation-cap, stethoscope, music, pizza

Catalogue complet#

Pour chaque type : sa catégorie dans l'éditeur, ses variantes, ses champs (les sous-champs d'une liste sont notés liste[].champ) et un exemple de section créée avec les valeurs par défaut.

hero : Bannière d'accueil#

Catégorie : Accueil. Icône : star. Variantes (variant) : centered (Centré), split (Texte et image), image (Image plein fond). La première est la valeur par défaut.

Exemple avec les valeurs par défaut :

{
    "id": "6f1c2a9e-0b7d-4c55-9d8e-f04af61b3f33",
    "type": "hero",
    "variant": "centered",
    "data": {
        "title": "Bienvenue chez nous",
        "subtitle": "Présentez votre activité en une phrase claire.",
        "button_label": "Nous contacter",
        "button_link": "#contact"
    },
    "style": {
        "background": "default",
        "spacing": "md",
        "image": null,
        "hidden_mobile": false,
        "anchor": null
    }
}

text : Texte#

Catégorie : Contenu. Icône : notes. Variantes (variant) : default (Standard), narrow (Colonne étroite), two_columns (Deux colonnes). La première est la valeur par défaut.

Exemple avec les valeurs par défaut :

{
    "id": "6f1c2a9e-0b7d-4c55-9d8e-1cb251ec0d56",
    "type": "text",
    "variant": "default",
    "data": {
        "title": "Notre histoire",
        "body": "<p>Racontez votre parcours, vos valeurs et ce qui vous rend unique.</p>"
    },
    "style": {
        "background": "default",
        "spacing": "md",
        "image": null,
        "hidden_mobile": false,
        "anchor": null
    }
}

image_text : Image et texte#

Catégorie : Contenu. Icône : image. Variantes (variant) : image_left (Image à gauche), image_right (Image à droite). La première est la valeur par défaut.

Exemple avec les valeurs par défaut :

{
    "id": "6f1c2a9e-0b7d-4c55-9d8e-fe6d9b1272ef",
    "type": "image_text",
    "variant": "image_left",
    "data": {
        "title": "Un savoir-faire local",
        "body": "<p>Expliquez ce que vous faites et pourquoi vos clients vous choisissent.</p>"
    },
    "style": {
        "background": "default",
        "spacing": "md",
        "image": null,
        "hidden_mobile": false,
        "anchor": null
    }
}

services : Services#

Catégorie : Contenu. Icône : grid. Variantes (variant) : cards (Cartes), list (Liste), icons (Icônes). La première est la valeur par défaut.

Exemple avec les valeurs par défaut :

{
    "id": "6f1c2a9e-0b7d-4c55-9d8e-10cd395cf71c",
    "type": "services",
    "variant": "cards",
    "data": {
        "title": "Nos services",
        "items": [
            {
                "icon": "sparkles",
                "title": "Service 1",
                "text": "Une phrase qui explique le bénéfice."
            },
            {
                "icon": "heart",
                "title": "Service 2",
                "text": "Une phrase qui explique le bénéfice."
            },
            {
                "icon": "check",
                "title": "Service 3",
                "text": "Une phrase qui explique le bénéfice."
            }
        ]
    },
    "style": {
        "background": "default",
        "spacing": "md",
        "image": null,
        "hidden_mobile": false,
        "anchor": null
    }
}

menu : Carte / menu#

Catégorie : Commerce. Icône : restaurant. Variantes (variant) : columns (Colonnes), compact (Compact). La première est la valeur par défaut.

Exemple avec les valeurs par défaut :

{
    "id": "6f1c2a9e-0b7d-4c55-9d8e-8d6ab84ca2af",
    "type": "menu",
    "variant": "columns",
    "data": {
        "title": "Notre carte",
        "categories": [
            {
                "name": "Entrées",
                "items": [
                    {
                        "name": "Plat",
                        "description": "Description",
                        "price": "9,50"
                    }
                ]
            }
        ]
    },
    "style": {
        "background": "default",
        "spacing": "md",
        "image": null,
        "hidden_mobile": false,
        "anchor": null
    }
}

gallery : Galerie photos#

Catégorie : Médias. Icône : photo_library. Variantes (variant) : grid (Grille), masonry (Mosaïque), carousel (Carrousel). La première est la valeur par défaut.

Exemple avec les valeurs par défaut :

{
    "id": "6f1c2a9e-0b7d-4c55-9d8e-2767cc3ede75",
    "type": "gallery",
    "variant": "grid",
    "data": {
        "title": "En images",
        "images": []
    },
    "style": {
        "background": "default",
        "spacing": "md",
        "image": null,
        "hidden_mobile": false,
        "anchor": null
    }
}

testimonials : Avis clients#

Catégorie : Confiance. Icône : format_quote. Variantes (variant) : cards (Cartes), single (Un grand avis). La première est la valeur par défaut.

Exemple avec les valeurs par défaut :

{
    "id": "6f1c2a9e-0b7d-4c55-9d8e-9c514e654794",
    "type": "testimonials",
    "variant": "cards",
    "data": {
        "title": "Ils nous font confiance",
        "items": [
            {
                "quote": "Un service impeccable, je recommande.",
                "author": "Marie",
                "role": "Cliente",
                "rating": "5"
            }
        ]
    },
    "style": {
        "background": "default",
        "spacing": "md",
        "image": null,
        "hidden_mobile": false,
        "anchor": null
    }
}

stats : Chiffres clés#

Catégorie : Confiance. Icône : insights. Variantes (variant) : default (Standard). La première est la valeur par défaut.

Exemple avec les valeurs par défaut :

{
    "id": "6f1c2a9e-0b7d-4c55-9d8e-446501053769",
    "type": "stats",
    "variant": "default",
    "data": {
        "items": [
            {
                "value": "15 ans",
                "label": "d'expérience"
            },
            {
                "value": "2 000",
                "label": "clients satisfaits"
            }
        ]
    },
    "style": {
        "background": "default",
        "spacing": "md",
        "image": null,
        "hidden_mobile": false,
        "anchor": null
    }
}

team : Équipe#

Catégorie : Contenu. Icône : groups. Variantes (variant) : grid (Grille). La première est la valeur par défaut.

Exemple avec les valeurs par défaut :

{
    "id": "6f1c2a9e-0b7d-4c55-9d8e-f894427cc1c5",
    "type": "team",
    "variant": "grid",
    "data": {
        "title": "L'équipe",
        "members": []
    },
    "style": {
        "background": "default",
        "spacing": "md",
        "image": null,
        "hidden_mobile": false,
        "anchor": null
    }
}

pricing : Tarifs#

Catégorie : Commerce. Icône : sell. Variantes (variant) : cards (Cartes), table (Tableau). La première est la valeur par défaut.

Exemple avec les valeurs par défaut :

{
    "id": "6f1c2a9e-0b7d-4c55-9d8e-59aab28b5459",
    "type": "pricing",
    "variant": "cards",
    "data": {
        "title": "Nos formules",
        "plans": []
    },
    "style": {
        "background": "default",
        "spacing": "md",
        "image": null,
        "hidden_mobile": false,
        "anchor": null
    }
}

faq : Questions fréquentes#

Catégorie : Confiance. Icône : help. Variantes (variant) : accordion (Accordéon), two_columns (Deux colonnes). La première est la valeur par défaut.

Exemple avec les valeurs par défaut :

{
    "id": "6f1c2a9e-0b7d-4c55-9d8e-da75cd652254",
    "type": "faq",
    "variant": "accordion",
    "data": {
        "title": "Questions fréquentes",
        "items": [
            {
                "question": "Quels sont vos horaires ?",
                "answer": "Nous sommes ouverts du mardi au samedi."
            }
        ]
    },
    "style": {
        "background": "default",
        "spacing": "md",
        "image": null,
        "hidden_mobile": false,
        "anchor": null
    }
}

hours : Horaires#

Catégorie : Infos pratiques. Icône : schedule. Variantes (variant) : table (Tableau), card (Carte). La première est la valeur par défaut.

Exemple avec les valeurs par défaut :

{
    "id": "6f1c2a9e-0b7d-4c55-9d8e-73cdddd7730a",
    "type": "hours",
    "variant": "table",
    "data": {
        "title": "Horaires",
        "days": [
            {
                "day": "Mo",
                "hours": "Fermé"
            },
            {
                "day": "Tu",
                "hours": "09:00-18:00"
            },
            {
                "day": "We",
                "hours": "09:00-18:00"
            },
            {
                "day": "Th",
                "hours": "09:00-18:00"
            },
            {
                "day": "Fr",
                "hours": "09:00-18:00"
            },
            {
                "day": "Sa",
                "hours": "09:00-17:00"
            },
            {
                "day": "Su",
                "hours": "Fermé"
            }
        ]
    },
    "style": {
        "background": "default",
        "spacing": "md",
        "image": null,
        "hidden_mobile": false,
        "anchor": null
    }
}

contact : Contact#

Catégorie : Infos pratiques. Icône : mail. Variantes (variant) : split (Formulaire et coordonnées), simple (Coordonnées seules). La première est la valeur par défaut.

Exemple avec les valeurs par défaut :

{
    "id": "6f1c2a9e-0b7d-4c55-9d8e-2f8a6bf31f3b",
    "type": "contact",
    "variant": "split",
    "data": {
        "title": "Contactez-nous",
        "text": "Une question ? Écrivez-nous, nous répondons rapidement.",
        "show_form": true,
        "show_map": true
    },
    "style": {
        "background": "default",
        "spacing": "md",
        "image": null,
        "hidden_mobile": false,
        "anchor": null
    }
}

cta : Appel à l'action#

Catégorie : Accueil. Icône : campaign. Variantes (variant) : banner (Bandeau), card (Carte). La première est la valeur par défaut.

Exemple avec les valeurs par défaut :

{
    "id": "6f1c2a9e-0b7d-4c55-9d8e-06ce7d44db01",
    "type": "cta",
    "variant": "banner",
    "data": {
        "title": "Envie de passer nous voir ?",
        "button_label": "Itinéraire",
        "button_link": "#contact"
    },
    "style": {
        "background": "default",
        "spacing": "md",
        "image": null,
        "hidden_mobile": false,
        "anchor": null
    }
}

video : Vidéo#

Catégorie : Médias. Icône : play_circle. Variantes (variant) : default (Standard). La première est la valeur par défaut.

Exemple avec les valeurs par défaut :

{
    "id": "6f1c2a9e-0b7d-4c55-9d8e-421b47ffd946",
    "type": "video",
    "variant": "default",
    "data": {
        "title": "En vidéo",
        "url": ""
    },
    "style": {
        "background": "default",
        "spacing": "md",
        "image": null,
        "hidden_mobile": false,
        "anchor": null
    }
}