Automatisation Email avec n8n : envoi de captures d'écran
Ce workflow n8n a pour objectif d'automatiser l'envoi d'emails contenant des captures d'écran générées à partir de pages web. Dans un contexte où la visualisation rapide d'informations est cruciale, ce processus permet aux équipes marketing et aux développeurs de partager facilement des aperçus de sites web ou d'applications. Par exemple, il peut être utilisé pour envoyer des rapports de performance visuels ou des mises à jour de projet à des clients ou des collègues. Le workflow commence par un déclencheur manuel, où l'utilisateur clique sur 'exécuter'. Ensuite, un item est créé pour définir les détails de l'email à envoyer. Le workflow utilise le service AWS SES pour envoyer l'email, en spécifiant le corps du message et les adresses des destinataires. Pour générer les captures d'écran, deux appels à l'API Uproc sont effectués : un pour la capture d'une page complète et un autre pour la capture d'une section spécifique. Les fichiers générés sont ensuite récupérés via des requêtes HTTP. Les captures d'écran sont fusionnées et téléchargées sur Dropbox, permettant un accès facile et partagé. Ce workflow d'automatisation n8n offre une solution efficace pour réduire le temps consacré à la création et à l'envoi d'emails contenant des visuels, tout en garantissant une communication claire et rapide au sein des équipes. Tags clés : automatisation, email, captures d'écran.
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
Inscris-toi pour voir l'intégralité du workflow
Inscription gratuite
S'inscrire gratuitementBesoin d'aide ?{
"id": "105",
"name": "screenshot",
"nodes": [
{
"name": "On clicking 'execute'",
"type": "n8n-nodes-base.manualTrigger",
"position": [
440,
580
],
"parameters": {},
"typeVersion": 1
},
{
"name": "Create Web + Email Item",
"type": "n8n-nodes-base.functionItem",
"position": [
630,
580
],
"parameters": {
"functionCode": "item.website = \"https://uproc.io\";\nitem.email = \"miquel@uproc.io\";\n\nreturn item;"
},
"typeVersion": 1
},
{
"name": "Send Email",
"type": "n8n-nodes-base.awsSes",
"position": [
1660,
600
],
"parameters": {
"body": "=Hi,\n<br><br>\nThese are your screenshots:<br>\n<table border=\"0\">\n<tr>\n<th>Simple screenshot</th><th>Fullpage screenshot</th>\n<tr>\n<td style=\"vertical-align: top; text-align: center\"><img src=\"{{$node[\"Generate Screenshot\"].json[\"message\"][\"result\"]}}\" width=\"320\"></td>\n<td style=\"vertical-align: top; text-align: center\"><img src=\"{{$node[\"Generate FullPage\"].json[\"message\"][\"result\"]}}\" width=\"320\"></td>\n</tr>\n</table>\n<br><br>\nThank you!",
"subject": "Your screenshots!",
"fromEmail": "miquel@uproc.io",
"isBodyHtml": true,
"toAddresses": [
"={{$node[\"Create Web + Email Item\"].json[\"email\"]}}"
],
"additionalFields": {}
},
"credentials": {
"aws": "ses"
},
"typeVersion": 1
},
{
"name": "Generate FullPage",
"type": "n8n-nodes-base.uproc",
"position": [
850,
510
],
"parameters": {
"url": "={{$node[\"Create Web + Email Item\"].json[\"website\"]}}",
"tool": "getUrlScreenshot",
"group": "image",
"width": "640",
"fullpage": "yes",
"additionalOptions": {}
},
"credentials": {
"uprocApi": "miquel-uproc"
},
"typeVersion": 1
},
{
"name": "Generate Screenshot",
"type": "n8n-nodes-base.uproc",
"position": [
840,
680
],
"parameters": {
"url": "={{$node[\"Create Web + Email Item\"].json[\"website\"]}}",
"tool": "getUrlScreenshot",
"group": "image",
"width": "640",
"fullpage": "no",
"additionalOptions": {}
},
"credentials": {
"uprocApi": "miquel-uproc"
},
"typeVersion": 1
},
{
"name": "Get File",
"type": "n8n-nodes-base.httpRequest",
"position": [
1050,
510
],
"parameters": {
"url": "={{$node[\"Generate FullPage\"].json[\"message\"][\"result\"]}}",
"options": {},
"responseFormat": "file",
"allowUnauthorizedCerts": true
},
"typeVersion": 1
},
{
"name": "Get File1",
"type": "n8n-nodes-base.httpRequest",
"position": [
1050,
680
],
"parameters": {
"url": "={{$node[\"Generate Screenshot\"].json[\"message\"][\"result\"]}}",
"options": {},
"responseFormat": "file",
"allowUnauthorizedCerts": true
},
"typeVersion": 1
},
{
"name": "Merge",
"type": "n8n-nodes-base.merge",
"position": [
1460,
600
],
"parameters": {
"mode": "passThrough"
},
"typeVersion": 1
},
{
"name": "Upload Screenshot",
"type": "n8n-nodes-base.dropbox",
"position": [
1270,
680
],
"parameters": {
"path": "/screenshots/sample.png",
"binaryData": true
},
"credentials": {
"dropboxApi": "dropbox-miquel"
},
"typeVersion": 1
},
{
"name": "Upload fullpage",
"type": "n8n-nodes-base.dropbox",
"position": [
1270,
510
],
"parameters": {
"path": "/screenshots/sample_fullpage.png",
"binaryData": true
},
"credentials": {
"dropboxApi": "dropbox-miquel"
},
"typeVersion": 1
}
],
"active": false,
"settings": {},
"connections": {
"Merge": {
"main": [
[
{
"node": "Send Email",
"type": "main",
"index": 0
}
]
]
},
"Get File": {
"main": [
[
{
"node": "Upload fullpage",
"type": "main",
"index": 0
}
]
]
},
"Get File1": {
"main": [
[
{
"node": "Upload Screenshot",
"type": "main",
"index": 0
}
]
]
},
"Upload fullpage": {
"main": [
[
{
"node": "Merge",
"type": "main",
"index": 0
}
]
]
},
"Generate FullPage": {
"main": [
[
{
"node": "Get File",
"type": "main",
"index": 0
}
]
]
},
"Upload Screenshot": {
"main": [
[
{
"node": "Merge",
"type": "main",
"index": 1
}
]
]
},
"Generate Screenshot": {
"main": [
[
{
"node": "Get File1",
"type": "main",
"index": 0
}
]
]
},
"On clicking 'execute'": {
"main": [
[
{
"node": "Create Web + Email Item",
"type": "main",
"index": 0
}
]
]
},
"Create Web + Email Item": {
"main": [
[
{
"node": "Generate FullPage",
"type": "main",
"index": 0
},
{
"node": "Generate Screenshot",
"type": "main",
"index": 0
}
]
]
}
}
}Pour qui est ce workflow ?
Ce workflow s'adresse principalement aux équipes marketing, aux développeurs web et aux chefs de projet qui ont besoin de partager rapidement des visuels de pages web. Les utilisateurs devraient avoir une compréhension de base des outils d'automatisation et des services d'emailing.
Problème résolu
Ce workflow résout le problème de l'envoi manuel d'emails avec des captures d'écran, un processus souvent long et sujet à des erreurs. En automatisant cette tâche, il élimine les frustrations liées à la création manuelle de visuels et réduit le risque d'oublier d'inclure des informations importantes. Les utilisateurs bénéficient d'une communication plus rapide et efficace, ce qui améliore la collaboration et la productivité.
Étapes du workflow
Étape 1 : Le workflow est déclenché manuellement par l'utilisateur. Étape 2 : Un item est créé pour définir les paramètres de l'email. Étape 3 : Un email est envoyé via AWS SES avec les détails spécifiés. Étape 4 : Deux captures d'écran sont générées à l'aide de l'API Uproc, l'une pour la page complète et l'autre pour une section spécifique. Étape 5 : Les fichiers générés sont récupérés à l'aide de requêtes HTTP. Étape 6 : Les captures d'écran sont fusionnées. Étape 7 : Les fichiers sont téléchargés sur Dropbox pour un accès partagé.
Guide de personnalisation du workflow n8n
Pour personnaliser ce workflow, vous pouvez modifier l'URL de la page à capturer dans les nœuds 'Generate Screenshot' et 'Generate FullPage'. Adaptez également les paramètres de l'email dans le nœud 'Send Email', comme le sujet et le corps du message. Si vous souhaitez utiliser un autre service de stockage, remplacez le nœud 'Upload Screenshot' par un autre service compatible. Pensez à sécuriser le flux en vérifiant les autorisations d'accès à Dropbox et en configurant correctement les clés API pour AWS SES.