Votre premier modèle

Le builder visuel vous permet de créer des modèles PDF en glissant-déposant des blocs sur un canevas, sans avoir besoin de HTML ou CSS. Dans ce tutoriel, vous allez construire un modèle de document simple à partir de zéro, ajouter du texte et des images, connecter des données de test, et générer votre premier PDF.

Ouvrir le builder

Depuis votre tableau de bord PDFMonkey, cliquez sur New Template (Nouveau modèle). Donnez un nom à votre modèle, puis sélectionnez Builder comme mode de modèle. Cliquez sur Create (Créer) pour ouvrir l’éditeur visuel.

Découvrir l’interface

Le builder comporte trois zones principales :

• Panneau gauche : bascule entre l’arbre Éléments (qui montre la structure de votre modèle) et le panneau Blocks (où vous choisissez de nouveaux blocs à ajouter).
• Canevas central : un aperçu en direct de votre modèle. Ce que vous voyez ici correspond à l’apparence finale de votre PDF.
• Panneau droit : bascule entre Styles (propriétés visuelles comme les couleurs, les espacements et les polices) et Settings (configuration spécifique au bloc et logique).

La barre d’outils en haut du canevas vous donne accès aux données de test, aux éditeurs de CSS et JavaScript personnalisés, aux ressources externes, et aux raccourcis clavier.

Ajouter vos premiers blocs

Chaque nouveau modèle démarre avec un bloc Page déjà en place. Le bloc Page représente une page de votre PDF (il contrôle le format du papier, l’orientation et les marges).

Pour ajouter du contenu, basculez vers le panneau Blocks dans la barre latérale gauche. Les blocs sont organisés en trois catégories : Layout, Content et Extra.

Commencez par ajouter un bloc Container à l’intérieur de la Page. Un Container regroupe d’autres blocs et contrôle leur disposition (empilement vertical, rangée horizontale ou grille). Faites-le glisser depuis le panneau Blocks vers le canevas, ou cliquez dessus pour l’ajouter à l’intérieur de l’élément actuellement sélectionné.

Ensuite, ajoutez un bloc Heading à l’intérieur du Container. Sélectionnez le Heading dans le canevas, puis regardez le panneau droit sous Settings pour choisir le niveau de titre (h1 à h6). Cliquez sur Edit Heading Content pour saisir le texte de votre titre.

Ajoutez un bloc Text sous le Heading. Les blocs Text supportent la mise en forme enrichie (gras, italique, listes et liens).

Modifier le contenu textuel

Sélectionnez un bloc Text et ouvrez l’onglet Settings dans le panneau droit. Cliquez sur Edit Text Content pour ouvrir l’éditeur de texte enrichi.

L’éditeur vous propose une barre de mise en forme avec des options pour le gras, l’italique, le soulignement, le barré, les listes à puces, les listes numérotées et les liens. Saisissez votre contenu, appliquez la mise en forme souhaitée, puis fermez la fenêtre. Vos modifications apparaissent immédiatement sur le canevas.

Les blocs Heading fonctionnent de la même manière (cliquez sur Edit Heading Content dans Settings pour ouvrir l’éditeur).

Ajouter une image

Ajoutez un bloc Image depuis la catégorie Content du panneau Blocks. Sélectionnez-le, puis ouvrez l’onglet Settings pour configurer la source de l’image.

Vous avez trois options pour définir la source de l’image :

• URL statique : collez un lien direct vers une image hébergée en ligne.
• Upload : cliquez sur le bouton d’upload pour sélectionner un fichier depuis votre ordinateur. L’image est convertie en URI de données et intégrée directement dans le modèle.
• Liaison dynamique : cliquez sur le bouton du navigateur de variables pour lier la source à un champ de vos données de test (par exemple, company.logo). Cela permet à chaque document généré d’utiliser une image différente.

Utiliser les données de test

La plupart des modèles incluent du contenu dynamique (des données qui changent pour chaque document généré). Le builder vous permet de définir des données de test afin de prévisualiser l’apparence de votre modèle avec des valeurs réelles.

Cliquez sur le bouton Edit Test Data dans la barre d’outils au-dessus du canevas. Cela ouvre un éditeur JSON où vous définissez des données d’exemple.

Saisissez un objet JSON avec les champs dont votre modèle a besoin. Par exemple :

{
  "name": "Marie Dupont",
  "company": "Acme Corp",
  "items": [
    { "description": "Consulting", "amount": 1500 },
    { "description": "Développement", "amount": 3000 }
  ]
}

Une fois les données de test enregistrées, le navigateur de variables dans le builder affiche vos champs disponibles. Vous pouvez lier le contenu textuel, les sources d’images, les conditions de visibilité et les boucles à ces chemins de données. Les modifications des données de test mettent à jour l’aperçu du canevas immédiatement.

Enregistrer votre modèle

Appuyez sur Ctrl+S (ou Cmd+S sur Mac) pour enregistrer votre modèle. Le builder envoie la requête de sauvegarde au tableau de bord, où votre modèle est stocké.

N’oubliez pas de publier votre modèle depuis le tableau de bord avant de générer des documents. Les modèles non publiés ne peuvent pas être utilisés pour la génération de documents.

Générer un document

Une fois votre modèle publié, vous pouvez générer des documents de trois façons :

• Depuis le tableau de bord — créez des documents manuellement via un formulaire.
• Via l’API — générez des documents par programmation depuis votre application.
• Via une intégration — connectez Zapier, Make, n8n et d’autres plateformes no-code.

Dans tous les cas, vous envoyez un payload JSON correspondant à la structure de vos données de test, et PDFMonkey produit un PDF.

Prochaines étapes

Maintenant que vous avez construit votre premier modèle, explorez les autres fonctionnalités du builder :

• Blocs disponibles — découvrez tous les types de blocs et leurs options de configuration.
• Images — approfondissez les images statiques, uploadées et dynamiques.
• Conditions et boucles — rendez le contenu conditionnel ou répétez-le pour chaque élément d’une collection.
• Données de test — techniques avancées pour les données de test et le navigateur de variables.