Skärmdumpar av webbplatser låter enkelt. Sedan letar du efter rätt URL, råkar ta fel viewport, sparar filer som ”final-final-2.png” och inser att du glömde skicka uppdateringen igen.
Det är här automatisering för website screenshot email räddar din mentala bandbredd. En marknadschef som gör konkurrentkontroller märker det först. Men en grundare som håller koll på landningssidor och en frilansare som skickar korrektur till kunder hamnar i samma röra.
Det här n8n-flödet använder uProc för att ta konsekventa skärmdumpar, sparar dem i Dropbox och mejlar ut dem via Amazon SES. Du får se vad som automatiseras, vad det ersätter och hur du anpassar det för din egen uppföljningsrutin.
Så fungerar automatiseringen
Hela n8n-flödet, från trigger till slutresultat:
n8n Workflow Template: uProc till Dropbox: webbskärmdumpar arkiveras
flowchart LR
subgraph sg0["On clicking 'execute' Flow"]
direction LR
n0@{ icon: "mdi:play-circle", form: "rounded", label: "On clicking 'execute'", pos: "b", h: 48 }
n1@{ icon: "mdi:code-braces", form: "rounded", label: "Create Web + Email Item", pos: "b", h: 48 }
n2@{ icon: "mdi:cog", form: "rounded", label: "Send Email", pos: "b", h: 48 }
n3["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/uproc.png' width='40' height='40' /></div><br/>Generate FullPage"]
n4["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/uproc.png' width='40' height='40' /></div><br/>Generate Screenshot"]
n5["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Get File"]
n6["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Get File1"]
n7["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/merge.svg' width='40' height='40' /></div><br/>Merge"]
n8["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/dropbox.svg' width='40' height='40' /></div><br/>Upload Screenshot"]
n9["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/dropbox.svg' width='40' height='40' /></div><br/>Upload fullpage"]
n7 --> n2
n5 --> n9
n6 --> n8
n9 --> n7
n3 --> n5
n8 --> n7
n4 --> n6
n0 --> n1
n1 --> n3
n1 --> n4
end
%% Styling
classDef trigger fill:#e8f5e9,stroke:#388e3c,stroke-width:2px
classDef ai fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
classDef aiModel fill:#e8eaf6,stroke:#3f51b5,stroke-width:2px
classDef decision fill:#fff8e1,stroke:#f9a825,stroke-width:2px
classDef database fill:#fce4ec,stroke:#c2185b,stroke-width:2px
classDef api fill:#fff3e0,stroke:#e65100,stroke-width:2px
classDef code fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
classDef disabled stroke-dasharray: 5 5,opacity: 0.5
class n0 trigger
class n5,n6 api
class n1 code
classDef customIcon fill:none,stroke:none
class n3,n4,n5,n6,n7,n8,n9 customIcon
Problemet: webbplatsskärmdumpar är aldrig ”bara en skärmdump”
Om du någon gång försökt spara veckovisa skärmdumpar av konkurrenters sidor, prissidor eller dina egna funnels vet du hur det blir. Skärmdumpen du tog förra veckan matchar inte den här veckan, eftersom viewporten ändrades eller för att du råkade fånga sidan halvvägs ned. Sedan kommer filkaoset: bilder utspridda i Hämtade filer, slumpmässiga Slack-uppladdningar eller Google Drive-mappar som ingen hittar senare. Och när det är dags att dela glömmer du antingen en sida, skickar fel version eller slösar ytterligare 20 minuter på att göra om allt ”snyggt”. Ärligt talat är det här pilljobbet det som gör att team slutar göra det.
Friktionen växer över tid. Här är var det faller sönder i verkligheten.
- Du tappar cirka 10 minuter per URL bara på att få konsekventa bilder och namnge filer.
- Folk tar olika skärmstorlekar, vilket gör att förändringar ser större (eller mindre) ut än de är.
- Skärmdumparna ligger på för många ställen, så ”Hur såg startsidan ut för två veckor sedan?” blir en skattjakt.
- Delning är manuell, och manuell delning blir bortprioriterad när dagen blir stressig.
Lösningen: ta skärmdumpar automatiskt, arkivera och mejla dem
Det här flödet gör webbövervakning till ett repeterbart system. Du startar det (manuellt, eller senare via en schemalagd trigger om du vill), och det samlar ihop två nyckelindata: webbplatsens URL som ska fångas och e-postadressen som ska ta emot skärmdumparna. Därefter genererar uProc två versioner av samma sida: en standardbild med 640 px bredd och en helsidesfångst som scrollar uppifrån och ned. n8n laddar sedan ned båda bildfilerna från uProc medan de fortfarande är tillgängliga (de genererade URL:erna gäller bara i 24 timmar). Till sist sparas bilderna i en dedikerad mapp ”screenshots” i Dropbox, och Amazon SES skickar ett HTML-mejl som innehåller båda bilderna så att du kan granska eller vidarebefordra dem direkt.
Flödet startar med en enkel inmatning (en URL + mottagarmejl). uProc sköter konsekvent rendering både för snabb överblick och för ett helsidesarkiv. Dropbox blir ditt strukturerade arkivskåp och SES blir leveranslagret som ”bara skickar” utan att du behöver tänka.
Det du får: automatisering vs. resultat
| Det här flödet automatiserar | Resultat du får |
|---|---|
|
|
Exempel: så här kan det se ut
Säg att du följer 5 konkurrenters landningssidor varje måndag. Manuellt kan du lägga cirka 10 minuter per sida på att ta en ”normal” vy och en helsidesvy, ladda ned dem, döpa dem, ladda upp dem och sedan skicka ett mejl. Det är ungefär 50 minuter, och det är lätt att hamna över en timme när något ser ”konstigt” ut. Med det här flödet startar du det en gång, låter det generera både 640 px- och helsidesskärmdumpar, och filerna hamnar i Dropbox samtidigt som ett mejl landar i din inkorg. Aktiv tid sjunker till cirka 10 minuter, mest för att välja URL:er och granska resultaten.
Det här behöver du
- n8n-instans (prova n8n Cloud gratis)
- Alternativ för egen drift om du föredrar det (Hostinger fungerar bra)
- uProc för att generera webbplatsskärmdumpar via URL
- Dropbox för att lagra skärmdumpsarkivet
- Amazon SES-uppgifter (hämta dem i AWS SES-konsolen)
Kunskapsnivå: Nybörjare. Du klistrar in API-nycklar, kopplar Dropbox och ändrar ett par fält som URL och mottagarmejl.
Vill du inte sätta upp det själv? Prata med en automationsexpert (gratis 15-minuters konsultation).
Så fungerar det
Manuell start (eller valfri trigger). Flödet startar just nu med en manuell trigger, vilket passar perfekt för ”kör detta när jag behöver det”. Vill du köra det varje vecka kan du byta trigger senare.
URL + mottagare sätts ihop. Ett litet funktionssteg bygger webbplatsens URL och e-postadressen som skärmdumparna ska skickas till. I det här flödet skapas det i n8n, men det kan lika gärna komma från ett formulär eller ett kalkylark.
uProc skapar två fångster. En uProc-åtgärd genererar en standardskärmdump med 640 px bredd. En annan genererar en helsidesversion med samma bredd, vilket ger dig en snabb förhandsvisning plus ett djupare arkiv.
Filer laddas ned, arkiveras och mejlas. n8n hämtar bildfilerna via HTTP, laddar upp dem till Dropbox, slår ihop uppladdningsresultaten och skickar ett HTML-mejl via Amazon SES med båda skärmdumparna inkluderade.
Du kan enkelt ändra var URL-listan kommer ifrån för att stödja flera webbplatser per körning. Se den fullständiga implementationsguiden nedan för anpassningsalternativ.
Steg-för-steg-guide för implementering
Steg 1: konfigurera den manuella triggern
Det här arbetsflödet startar vid behov så att ni kan köra det manuellt under uppsättning eller testning.
- Lägg till noden Manual Launch Trigger som arbetsflödets trigger.
- Koppla Manual Launch Trigger till Compose Web and Email enligt flödet.
Steg 2: anslut webbinmatning och e-postdetaljer
Definiera webbplatsen som ska fångas och mottagarens e-postadress.
- Öppna Compose Web and Email och ställ in Function Code till:
item.website = "https://uproc.io";
item.email = "[YOUR_EMAIL]";
return item; - Ersätt
[YOUR_EMAIL]med mottagaradressen.
Steg 3: konfigurera skapande av skärmbilder (parallell körning)
Det här steget skapar två skärmbilder parallellt: standard och fullpage.
- Compose Web and Email skickar utdata till både Create Fullpage Capture och Create Standard Capture parallellt.
- I Create Fullpage Capture ställer ni in URL till
={{$node["Compose Web and Email"].json["website"]}}, Tool tillgetUrlScreenshot, Group tillimage, Width till640och Fullpage tillyes. - Uppgifter krävs: anslut era uprocApi-inloggningsuppgifter i Create Fullpage Capture.
- I Create Standard Capture ställer ni in URL till
={{$node["Compose Web and Email"].json["website"]}}, Tool tillgetUrlScreenshot, Group tillimage, Width till640och Fullpage tillno. - Uppgifter krävs: anslut era uprocApi-inloggningsuppgifter i Create Standard Capture.
Steg 4: ladda ned, lagra och slå ihop utdata
Ladda ned båda skärmbilderna, lagra dem i Dropbox och slå sedan ihop utdata för e-postleverans.
- I Download Fullpage File ställer ni in URL till
={{$node["Create Fullpage Capture"].json["message"]["result"]}}, Response Format tillfileoch aktiverar Allow Unauthorized Certs. - Koppla Download Fullpage File till Store Fullpage in Dropbox och ställ in Path till
/screenshots/sample_fullpage.pngmed Binary Data aktiverat. - Uppgifter krävs: anslut era dropboxApi-inloggningsuppgifter i Store Fullpage in Dropbox.
- I Download Standard File ställer ni in URL till
={{$node["Create Standard Capture"].json["message"]["result"]}}, Response Format tillfileoch aktiverar Allow Unauthorized Certs. - Koppla Download Standard File till Store Snapshot in Dropbox och ställ in Path till
/screenshots/sample.pngmed Binary Data aktiverat. - Uppgifter krävs: anslut era dropboxApi-inloggningsuppgifter i Store Snapshot in Dropbox.
- Koppla både Store Fullpage in Dropbox och Store Snapshot in Dropbox till Combine Upload Outputs med Mode inställt på
passThrough.
Steg 5: konfigurera e-postleveransen
Skicka e-postmeddelandet med båda skärmbilds-URL:erna inbäddade i HTML-brödtexten.
- Koppla Combine Upload Outputs till Dispatch Screenshot Email.
- I Dispatch Screenshot Email ställer ni in Subject till
Your screenshots!och From Email till[YOUR_EMAIL]. - Ställ in To Addresses till
={{$node["Compose Web and Email"].json["email"]}}. - Aktivera Is Body HTML och ställ in Body till den angivna HTML:en med bildkällor:
Hi,
These are your screenshots:Simple screenshot Fullpage screenshot
Thank you! - Uppgifter krävs: anslut era aws-inloggningsuppgifter i Dispatch Screenshot Email.
Steg 6: testa och aktivera ert arbetsflöde
Kör ett manuellt test för att bekräfta att skärmbilder genereras, lagras och skickas via e-post korrekt.
- Klicka på Execute Workflow för att trigga Manual Launch Trigger.
- Bekräfta att båda skärmbilderna skapas och lagras i Dropbox på
/screenshots/sample.pngoch/screenshots/sample_fullpage.png. - Verifiera att e-postmeddelandet från Dispatch Screenshot Email innehåller båda bilderna i HTML-brödtexten.
- När ni är nöjda, växla arbetsflödet till Active för användning i produktion.
Vanliga fallgropar
- Dropbox-uppgifter kan gå ut eller kräva specifika behörigheter. Om något slutar fungera, kontrollera n8n-skärmen Credentials och återautentisera Dropbox-kopplingen först.
- Om du använder Wait-noder eller extern rendering varierar processningstiderna. Öka väntetiden om efterföljande noder fallerar på tomma svar.
- uProc-URL:er för skärmdumpar finns bara i 24 timmar. Om du testar idag och försöker ”ladda ned senare” får du trasiga filer, så lägg nedladdningsnoderna direkt efter fångstnoderna.
Vanliga frågor
Cirka 30 minuter om du redan har dina uppgifter redo.
Nej. Du kopplar dina konton och ändrar några fält som URL, mapp och mottagare.
Ja. n8n har ett gratis alternativ för egen drift och en gratis provperiod på n8n Cloud. Cloud-planer börjar på 20 USD/månad för högre volym. Du behöver också räkna in uProc-användning och kostnader för att skicka mejl via Amazon SES (oftast låga vid normala volymer).
Två alternativ: n8n Cloud (hanterat, enklast att komma igång) eller egen drift på en VPS. För egen drift är Hostinger VPS prisvärd och hanterar n8n bra. Egen drift ger dig obegränsade körningar men kräver grundläggande serverhantering.
Ja, och det är en vanlig uppgradering. Ersätt funktionen ”Compose Web and Email” så att den läser en lista med URL:er (från Google Sheets, ett formulär eller en databas), och loopa sedan igenom varje URL för att köra de två uProc-noderna för skärmdumpar. De flesta lägger också till en mappsökväg med tidsstämpel i Dropbox-uppladdningen så att varje körning hålls prydligt samlad.
Oftast beror det på en utgången auktorisering eller en behörighetsändring. Koppla om Dropbox i n8n Credentials och bekräfta sedan att målmappen finns och att kontot har åtkomst till den. Om uppladdningar fungerar ibland och misslyckas andra gånger, kontrollera rate limits eller filnamnskrockar i samma mapp.
I en egenhostad n8n beror det främst på din server och hur snabbt uProc levererar bilder. I n8n Cloud är din praktiska gräns din månatliga tilldelning av körningar, och varje URL triggar vanligtvis flera körningar eftersom det är två skärmdumpar plus nedladdnings- och uppladdningssteg.
Ofta, ja, eftersom du hanterar binära filer (bilder), ett par parallella fångstspår (standard + helsida) och en tydlig sammanslagning innan mejl skickas. n8n klarar den typen av logik utan att kännas begränsande. Zapier eller Make kan fungera, men du kan behöva lägga mer tid på att hantera begränsningar i filhantering och kostnader per steg när du skalar till flera URL:er. Vill du ha hjälp att välja, prata med en automationsexpert.
När det här väl rullar slutar skärmdumpar vara ett måste och blir i stället en pålitlig veckovana. Flödet tar bort det repetitiva arbetet från din lista, så att du kan fokusera på vad som ändrats och vad du ska göra härnäst.
Kontakta oss
Hör av dig, så diskuterar vi hur just din verksamhet kan dra nytta av alla fantastiska möjligheter som AI skapar.