démo bulletin d'adhésion
Shared 10/13/2025
141 views
Visual Workflow
JSON Code
{
"meta": {
"instanceId": ""
},
"nodes": [
{
"id": "80aeacea-d5a9-4fa5-a248-5b5aebca21b3",
"name": "Respond to Webhook1",
"type": "n8n-nodes-base.respondToWebhook",
"position": [
704,
144
],
"parameters": {
"options": {},
"respondWith": "text",
"responseBody": "={{ $json.html }}"
},
"typeVersion": 1.4
},
{
"id": "252b7636-c4c8-4247-9bf7-cc1fe13045d0",
"name": "Sticky Note1",
"type": "n8n-nodes-base.stickyNote",
"position": [
-240,
48
],
"parameters": {
"width": 1264,
"height": 288,
"content": "## Affichage de la carte d'adhésion à télécharger"
},
"typeVersion": 1
},
{
"id": "d2d6730a-26f5-4e98-b3c1-8c3094adee0b",
"name": "Lit les infos adhesions",
"type": "n8n-nodes-base.grist",
"position": [
160,
144
],
"parameters": {
"docId": "",
"limit": 1,
"tableId": "Adhesions",
"additionalOptions": {
"filter": {
"filterProperties": [
{
"field": "UUID",
"values": "={{ $json.params.uuid }}"
}
]
}
}
},
"credentials": {
"gristApi": {
"id": "",
"name": "Grist account"
}
},
"typeVersion": 1
},
{
"id": "cc5e0c14-7886-4754-80d7-c084389fe67f",
"name": "Webhook",
"type": "n8n-nodes-base.webhook",
"position": [
-96,
144
],
"webhookId": "9c551e1c-7e43-4eed-b764-d165cf3d58af",
"parameters": {
"path": "/:uuid",
"options": {},
"responseMode": "responseNode"
},
"typeVersion": 2.1
},
{
"id": "614ec801-bf80-4704-b595-0221ae782c4b",
"name": "Génère la carte html",
"type": "n8n-nodes-base.html",
"position": [
448,
144
],
"parameters": {
"html": "<html>\n<head>\n <style>\n body {\n font-family: Arial, sans-serif;\n background: white;\n padding: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n color: black;\n }\n\n .card {\n width: 350px;\n border-radius: 16px;\n padding: 20px;\n background: white;\n box-shadow: 0 4px 10px rgba(0,0,0,0.15);\n position: relative;\n }\n\n .header {\n text-align: center;\n margin-bottom: 15px;\n }\n\n .header h2 {\n margin: 0;\n color: #2c7a7b;\n }\n\n .field {\n margin: 6px 0;\n }\n\n .label {\n font-weight: bold;\n color: #333;\n }\n\n .value {\n margin-left: 6px;\n }\n\n .status {\n text-align: center;\n margin-top: 10px;\n font-weight: bold;\n color: #2c5282;\n }\n\n .download-btn {\n margin-top: 20px;\n padding: 10px 16px;\n border: none;\n border-radius: 8px;\n background: #2c7a7b;\n color: white;\n font-size: 14px;\n cursor: pointer;\n transition: background 0.2s ease;\n }\n\n .download-btn:hover {\n background: #285e61;\n }\n </style>\n</head>\n<body>\n <div id=\"card\" class=\"card\">\n <div class=\"header\">\n <h2>Association La super asso</h2>\n <small>Carte d’adhésion</small>\n </div>\n <div class=\"field\"><span class=\"label\">Nom: </span><span id=\"nom\" class=\"value\">{{ $json.Nom }}</span></div>\n <div class=\"field\"><span class=\"label\">Prénom: </span><span id=\"prenom\" class=\"value\">{{ $json.Prenom }}</span></div>\n <div class=\"field\"><span class=\"label\">Mail: </span><span id=\"mail\" class=\"value\">{{ $json.email }}</span></div>\n <div class=\"field\"><span class=\"label\">Adhésion du: </span><span id=\"date_debut\" class=\"value\">{{ $json.debut.toDateTime('s').format('dd-MM-yyyy') }}</span></div>\n <div class=\"field\"><span class=\"label\">Au: </span><span id=\"date_fin\" class=\"value\">{{ $json.deadline.toDateTime('s').format('dd-MM-yyyy') }}</span></div>\n <div class=\"status\" id=\"statut\">Statut: {{ $json.Statut }}</div>\n </div>\n\n <button class=\"download-btn\" onclick=\"downloadCard()\">Télécharger la carte</button>\n\n <!-- Import de html2canvas pour la capture -->\n <script src=\"https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js\"></script>\n\n <script>\n function downloadCard() {\n const card = document.getElementById(\"card\");\n html2canvas(card).then(canvas => {\n const link = document.createElement(\"a\");\n link.download = \"carte_adhesion.png\";\n link.href = canvas.toDataURL(\"image/png\");\n link.click();\n });\n}\n </script>\n</body>\n</html>"
},
"typeVersion": 1.2
},
{
"id": "107d9676-96a6-49f2-a8af-cd4bc271962d",
"name": "Webhook1",
"type": "n8n-nodes-base.webhook",
"position": [
-96,
784
],
"webhookId": "3ad2b20c-a84a-45a3-9e5b-63651d98a161",
"parameters": {
"path": "3ad2b20c-a84a-45a3-9e5b-63651d98a161",
"options": {},
"httpMethod": "POST"
},
"typeVersion": 2.1
},
{
"id": "cbfca6be-e90a-4d0c-9de7-375f664889ed",
"name": "Sticky Note",
"type": "n8n-nodes-base.stickyNote",
"position": [
-240,
688
],
"parameters": {
"width": 816,
"height": 320,
"content": "## Envoi de l'email avec la carte d'adhésion\n"
},
"typeVersion": 1
},
{
"id": "3faabd7c-c431-470e-a753-bf89bc86fa2e",
"name": "Send Email1",
"type": "n8n-nodes-base.emailSend",
"position": [
320,
784
],
"webhookId": "7f21dbe7-d9b7-454b-9b15-6b952cd6504f",
"parameters": {
"html": "={{ $json.html }}",
"options": {
"appendAttribution": false
},
"subject": "🎉 Félicitations, voici votre carte d'adhésion",
"toEmail": "={{ $('Webhook1').item.json.body[0].email }}",
"fromEmail": "Le facteur <facteur@tierslieux.re>"
},
"credentials": {
"smtp": {
"id": "F1dXdmwXVG6YlHA9",
"name": "SMTP Mailgun RTLx"
}
},
"typeVersion": 2.1
},
{
"id": "6632cf41-b1d6-45a2-887d-8ebf8bcbf028",
"name": "Carte html",
"type": "n8n-nodes-base.html",
"position": [
128,
784
],
"parameters": {
"html": "<html>\n<head>\n <style>\n body {\n font-family: Arial, sans-serif;\n background: white;\n padding: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n color: black;\n }\n\n .card {\n width: 350px;\n border-radius: 16px;\n padding: 20px;\n background: white;\n box-shadow: 0 4px 10px rgba(0,0,0,0.15);\n position: relative;\n }\n\n .header {\n text-align: center;\n margin-bottom: 15px;\n }\n\n .header h2 {\n margin: 0;\n color: #2c7a7b;\n }\n\n .field {\n margin: 6px 0;\n }\n\n .label {\n font-weight: bold;\n color: #333;\n }\n\n .value {\n margin-left: 6px;\n }\n\n .status {\n text-align: center;\n margin-top: 10px;\n font-weight: bold;\n color: #2c5282;\n }\n\n\n\n\n </style>\n</head>\n<body>\n Bonjour, voici votre carte d'adhésion. \n Lien de téléchargement : <a class=\"click-me\" href={{ $json.body[0].Bulletin_d_adhesion }}>Télécharger la carte</a>\n\n <div id=\"card\" class=\"card\">\n <div class=\"header\">\n <h2>Association La super asso</h2>\n <small>Carte d’adhésion</small>\n </div>\n <div class=\"field\"><span class=\"label\">Nom: </span><span id=\"nom\" class=\"value\">{{ $json.body[0].Nom }}</span></div>\n <div class=\"field\"><span class=\"label\">Prénom: </span><span id=\"prenom\" class=\"value\">{{ $json.body[0].Prenom }}</span></div>\n <div class=\"field\"><span class=\"label\">Mail: </span><span id=\"mail\" class=\"value\">{{ $json.body[0].email }}</span></div>\n <div class=\"field\"><span class=\"label\">Adhésion du: </span><span id=\"date_debut\" class=\"value\">{{ $json.body[0].debut.toDateTime('s').format('dd-MM-yyyy') }}</span></div>\n <div class=\"field\"><span class=\"label\">Au: </span><span id=\"date_fin\" class=\"value\">{{ $json.body[0].deadline.toDateTime('s').format('dd-MM-yyyy') }}</span></div>\n <div class=\"status\" id=\"statut\">Statut: {{ $json.body[0].Statut }}</div>\n </div>\n\n\n</body>\n</html>"
},
"typeVersion": 1.2
},
{
"id": "1cb4c8d7-3d4e-43e9-b825-8431aec2638f",
"name": "Webhook2",
"type": "n8n-nodes-base.webhook",
"position": [
-112,
432
],
"webhookId": "465fbb0b-02da-4cd7-bcb5-9e70d42993e7",
"parameters": {
"path": "465fbb0b-02da-4cd7-bcb5-9e70d42993e7",
"options": {},
"responseMode": "responseNode"
},
"typeVersion": 2.1
},
{
"id": "fb9c6014-df5e-4cd2-a486-7fbb12ad8ccc",
"name": "Lit les infos adhesions1",
"type": "n8n-nodes-base.grist",
"position": [
160,
432
],
"parameters": {
"docId": "",
"limit": 1,
"tableId": "Adhesions",
"additionalOptions": {
"sort": {
"sortProperties": [
{
"field": "=id",
"direction": "desc"
}
]
}
}
},
"credentials": {
"gristApi": {
"id": "cCPQ76XV1Oh6Ninh",
"name": "Grist account"
}
},
"typeVersion": 1
},
{
"id": "1dfa1989-cf04-485d-95b1-2025645c6d5e",
"name": "Sticky Note2",
"type": "n8n-nodes-base.stickyNote",
"position": [
-208,
368
],
"parameters": {
"width": 592,
"height": 240,
"content": "### Affichage du dernier adhérent"
},
"typeVersion": 1
}
],
"pinData": {},
"connections": {
"Webhook": {
"main": [
[
{
"node": "Lit les infos adhesions",
"type": "main",
"index": 0
}
]
]
},
"Webhook1": {
"main": [
[
{
"node": "Carte html",
"type": "main",
"index": 0
}
]
]
},
"Webhook2": {
"main": [
[
{
"node": "Lit les infos adhesions1",
"type": "main",
"index": 0
}
]
]
},
"Carte html": {
"main": [
[
{
"node": "Send Email1",
"type": "main",
"index": 0
}
]
]
},
"Génère la carte html": {
"main": [
[
{
"node": "Respond to Webhook1",
"type": "main",
"index": 0
}
]
]
},
"Lit les infos adhesions": {
"main": [
[
{
"node": "Génère la carte html",
"type": "main",
"index": 0
}
]
]
},
"Lit les infos adhesions1": {
"main": [
[
{
"node": "Génère la carte html",
"type": "main",
"index": 0
}
]
]
}
}
}