Workflow n8n

Automatisation n8n : création d'images et gestion de données

Ce workflow n8n a pour objectif de faciliter la création et la gestion d'images à partir de données fournies via un webhook. Dans un contexte où les entreprises doivent souvent traiter des données visuelles pour des présentations ou des rapports, cette automatisation permet d'optimiser le processus. Par exemple, une équipe marketing peut utiliser ce workflow pour générer automatiquement des images à partir de données de campagne, réduisant ainsi le temps de création et améliorant l'efficacité. Étape 1 : le workflow commence par un déclencheur de type Webhook, qui reçoit les données nécessaires. Étape 2 : les données sont ensuite traitées par le nœud 'Create data pix', qui les prépare pour la création d'images. Étape 3 : le nœud 'Create img bin' convertit ces données en fichiers image, prêts à être utilisés. Étape 4 : une réponse est envoyée au webhook via le nœud 'Respond to Webhook', confirmant la création des images. Étape 5 : le nœud 'Do anything to log' permet de garder une trace des opérations effectuées. Enfin, le nœud 'Sticky Note' peut être utilisé pour ajouter des annotations ou des commentaires sur les images créées. Les bénéfices business incluent une réduction significative du temps de traitement et une amélioration de la qualité des livrables visuels, ce qui permet aux équipes de se concentrer sur des tâches à plus forte valeur ajoutée. Tags clés : automatisation, webhooks, images.

Catégorie: Webhook · Tags: automatisation, webhooks, images, n8n, création de contenu0

Vue d'ensemble du workflow n8n

Schéma des nœuds et connexions de ce workflow n8n, généré à partir du JSON n8n.

Détail des nœuds du workflow n8n

  • Create data pix

    Ce noeud crée des données en utilisant les options et les assignations spécifiées.

  • Create img bin

    Ce noeud convertit une source de données en un fichier image selon les paramètres définis.

  • Respond to Webhook

    Ce noeud répond à un webhook avec les données spécifiées.

  • Request img

    Ce noeud reçoit des requêtes via un webhook à l'URL définie.

  • Do anything to log

    Ce noeud effectue une action sans opération spécifique, servant de point de log.

  • Sticky Note

    Ce noeud crée une note autocollante avec le contenu et les dimensions spécifiées.

Inscris-toi pour voir l'intégralité du workflow

Inscription gratuite

S'inscrire gratuitementBesoin d'aide ?
{
  "meta": {
    "instanceId": "854c212d3baca2d6108faeb1187a4f6d9a3e60117068e7e872ad5e663327af93"
  },
  "nodes": [
    {
      "id": "c02e3038-96e8-4bfe-a4fa-925207fef0ee",
      "name": "Create data pix",
      "type": "n8n-nodes-base.set",
      "position": [
        220,
        0
      ],
      "parameters": {
        "options": {},
        "assignments": {
          "assignments": [
            {
              "id": "ab15b0f8-c40f-4874-8724-ddae8f99e646",
              "name": "data",
              "type": "string",
              "value": "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCA1LjEuMvu8A7YAAAC2ZVhJZklJKgAIAAAABQAaAQUAAQAAAEoAAAAbAQUAAQAAAFIAAAAoAQMAAQAAAAIAAAAxAQIAEAAAAFoAAABphwQAAQAAAGoAAAAAAAAAYAAAAAEAAABgAAAAAQAAAFBhaW50Lk5FVCA1LjEuMgADAACQBwAEAAAAMDIzMAGgAwABAAAAAQAAAAWgBAABAAAAlAAAAAAAAAACAAEAAgAEAAAAUjk4AAIABwAEAAAAMDEwMAAAAADp1fY4ytpsegAAAA1JREFUGFdjYGBgYAAAAAUAAYoz4wAAAAAASUVORK5CYII="
            }
          ]
        }
      },
      "typeVersion": 3.4
    },
    {
      "id": "09573a6a-88e8-48c5-a78e-d45fb37a8b87",
      "name": "Create img bin",
      "type": "n8n-nodes-base.convertToFile",
      "position": [
        440,
        0
      ],
      "parameters": {
        "options": {
          "mimeType": "image/png"
        },
        "operation": "toBinary",
        "sourceProperty": "data",
        "binaryPropertyName": "pixel"
      },
      "typeVersion": 1.1
    },
    {
      "id": "07c42dab-9b60-4f51-b8ab-78df26bc2cdd",
      "name": "Respond to Webhook",
      "type": "n8n-nodes-base.respondToWebhook",
      "position": [
        660,
        0
      ],
      "parameters": {
        "options": {},
        "respondWith": "binary"
      },
      "typeVersion": 1.1
    },
    {
      "id": "cb0df6bc-d733-4e07-9506-c413d390e482",
      "name": "Request img",
      "type": "n8n-nodes-base.webhook",
      "position": [
        0,
        0
      ],
      "webhookId": "db4880e7-2134-4994-94e5-a4a3aa120440",
      "parameters": {
        "path": "db4880e7-2134-4994-94e5-a4a3aa120440",
        "options": {},
        "responseMode": "responseNode"
      },
      "typeVersion": 2
    },
    {
      "id": "b7153f9a-f635-48c4-b8fe-d9e93deb33ed",
      "name": "Do anything to log",
      "type": "n8n-nodes-base.noOp",
      "position": [
        660,
        200
      ],
      "parameters": {},
      "typeVersion": 1
    },
    {
      "id": "d5e4143c-f321-4632-9adf-e95ca718210f",
      "name": "Sticky Note",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -80,
        360
      ],
      "parameters": {
        "width": 980,
        "height": 1280,
        "content": "## 📬 Workflow: Transparent Tracking Pixel for Email Open Detection\n\n### 📌 Description\nThis workflow serves a **1x1 transparent PNG image** via a webhook, which can be embedded in an email to **track when the email is opened**. When the image is loaded by the recipient's email client, the webhook is triggered, optionally capturing a `userId` to identify who opened the email.\n\n---\n\n### 📂 Workflow Steps\n\n1. **Webhook Trigger** (`Request img`)\n   - **Path:** `/webhook/change-with-your-id`\n   - Triggered by an HTTP request (e.g. when the image is loaded in an email).\n   - Accepts a query parameter `id` to identify the recipient.\n\n2. **Set Base64 Data** (`Create data pix`)\n   - Creates a variable `data` containing a Base64-encoded transparent PNG image (1x1 pixel).\n\n3. **Convert to Binary** (`Create img bin`)\n   - Converts the Base64 `data` string into a binary file.\n   - Sets MIME type to `image/png`.\n\n4. **Respond to Webhook** (`Respond to Webhook`)\n   - Sends the binary image file in the HTTP response.\n\n5. **Logging** (`Do anything to log`)\n   - Placeholder node to log or process the `id` or request metadata.\n   - You can access the `id` using `{{$json[\"query\"][\"id\"]}}`.\n   - You can also use any parameter you want\n\n---\n\n### ✉️ How to Use in Emails\n\nEmbed the image in an HTML email like this:\n\n```html\n<img src=\"https://<your-n8n-instance>/webhook/db4880e7-2134-4994-94e5-a4a3aa120440?id=1234\" width=\"1\" height=\"1\" style=\"display:none;\" alt=\"\" />\n```\n\nWhen the email is opened and the image is loaded, the workflow will be triggered.\n\n---\n\n### 🛠️ Notes\n- Some email clients block images by default; this may prevent tracking.\n- You can enhance the workflow to store open events in a database, log the timestamp, IP, or user agent.\n- Make sure to comply with data privacy and consent regulations (e.g. GDPR)."
      },
      "typeVersion": 1
    }
  ],
  "pinData": {},
  "connections": {
    "Request img": {
      "main": [
        [
          {
            "node": "Create data pix",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Create img bin": {
      "main": [
        [
          {
            "node": "Respond to Webhook",
            "type": "main",
            "index": 0
          },
          {
            "node": "Do anything to log",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Create data pix": {
      "main": [
        [
          {
            "node": "Create img bin",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}

Pour qui est ce workflow ?

Ce workflow s'adresse aux équipes marketing et créatives qui cherchent à automatiser la création d'images à partir de données. Il convient particulièrement aux PME et aux startups qui souhaitent optimiser leur processus de production visuelle sans nécessiter de compétences techniques avancées.

Problème résolu

Ce workflow résout le problème de la création manuelle d'images à partir de données, un processus souvent long et sujet à des erreurs. En automatisant cette tâche, les utilisateurs peuvent réduire le temps consacré à la création de contenu visuel, minimiser les risques d'erreurs humaines et garantir une production rapide et efficace. Après mise en place, les utilisateurs constatent une amélioration de leur productivité et une meilleure qualité des images produites.

Étapes du workflow

Étape 1 : le workflow est déclenché par un webhook qui reçoit les données nécessaires. Étape 2 : ces données sont traitées par le nœud 'Create data pix' pour les préparer à la création d'images. Étape 3 : le nœud 'Create img bin' convertit les données en fichiers image. Étape 4 : une réponse est envoyée via le nœud 'Respond to Webhook' pour confirmer la création des images. Étape 5 : le nœud 'Do anything to log' enregistre les opérations effectuées. Étape 6 : le nœud 'Sticky Note' permet d'ajouter des annotations sur les images créées.

Guide de personnalisation du workflow n8n

Pour personnaliser ce workflow, vous pouvez modifier le chemin du webhook dans le nœud 'Request img' pour l'adapter à votre API. Vous pouvez également ajuster les paramètres du nœud 'Create data pix' pour changer le format des données d'entrée. Si vous souhaitez intégrer d'autres outils, envisagez d'ajouter des nœuds supplémentaires pour envoyer les images créées vers des plateformes comme Google Drive ou Dropbox. Assurez-vous de sécuriser le webhook avec des authentifications appropriées pour protéger vos données.