Bygg en nyhetsbrevsmall med AI utifrån din webbplats

Vad AI gör och inte gör

ChatGPT, Claude och Gemini kan hjälpa dig med två saker när du gör en mall. De kan beskriva din grafiska profil: vilka färger och typsnitt du använder, hur rubriker och knappar ser ut och vilken ton du har i texterna. Och de kan föreslå ett upplägg för nyhetsbrevet som passar det du vill berätta och dem du skickar till.

Men AI:n kan inte avgöra vad som passar dina läsare. Den märker inte om färgen blir för svag i mobilen, om du har fel version av logotypen eller om texten inte låter som ni. Den läser inte heller alltid webbplatsen så noga som du kanske tror. Mer om det i steg 1. Därför gör vi likadant varje gång: AI:n gör grovjobbet, och du eller en kollega kontrollerar resultatet innan ni skickar.

Räkna med ungefär en timme första gången, inklusive att bygga mallen i Paloma. Nästa mall går på en kvart.

Två sätt att arbeta

Hur du gör beror på vilken sorts AI du har.

Med en AI-chatt. Du skriver till ChatGPT, Claude eller Gemini och får svar i chatten. Chatten tar fram profilen, upplägget, texterna och bilderna, och sedan bygger du mallen själv i Paloma genom att dra och släppa block. Chatten läser oftast inte färgerna i webbplatsens kod, så du laddar upp en skärmbild. Det är det här sättet som stegen nedan beskriver, och det fungerar för alla.

Med en AI-assistent i webbläsaren. Vissa AI-verktyg kan arbeta direkt i din webbläsare. Assistenten öppnar din webbplats och läser färgerna och typsnitten i koden, så du får de exakta koderna. Den kan också bygga mallen i Paloma åt dig. Du beskriver vad du vill ha, tittar på resultatet och ber om ändringar. Det går fortare, men du behöver granska lika noga. Så har vi byggt exemplen i den här guiden. Hur du gör steg för steg står i avsnittet Med en AI-assistent.

Det du behöver

• Adressen till din webbplats och en skärmbild av startsidan.
• Din logotyp som PNG-fil, helst med genomskinlig bakgrund.
• Ett konto i Paloma. Gratiskontot räcker gott för att bygga mallen.
• Ett AI-verktyg. Prompterna här fungerar i ChatGPT, Claude och Gemini.

Har du en grafisk manual kan du ladda upp den också. Då slipper AI:n gissa, och färgkoderna blir rätt från början.

Steg 1: låt AI hämta din profil från webbplatsen

Börja med att be AI:n beskriva din profil. Klistra in den här prompten och byt ut adressen:

Titta på webbplatsen https://www.dinwebbplats.se och beskriv den grafiska profilen för ett nyhetsbrev. Ge mig: huvudfärg, en eller två accentfärger och en bakgrundsfärg som hexkoder; typsnitt för rubriker och brödtext, med ett vanligt e-postsäkert alternativ om typsnittet inte finns i e-post; hur knappar ser ut (färg, form, text); och tre ord som beskriver tonen i texterna. Svara kort, som en lista.

Så gick det när vi testade på vår egen webbplats. Vi använder paloma.se i steg 1 och 2. ChatGPT läste texterna på paloma.se och beskrev tonen bra. Men i vanligt chattläge sa den ärligt att den inte kunde se färgkoderna och typsnitten, eftersom den läser innehållet men inte webbplatsens stilmallar. Vi laddade därför upp en skärmbild av startsidan och bad om listan utifrån bilden. Då kom svaret direkt. Så här löd det, med ChatGPT:s egna ord:

Palomas grafiska profil för nyhetsbrev

1. Huvudfärg: Klarblå #159FE3, logotyp och knappar.
2. Accentfärger: Mörk marinblå #102D48, rubriker och mörka ytor. Ljusrosa #F3A1B6, dekorativa inslag och bakgrunder.
3. Bakgrundsfärg: Vit #FFFFFF, rena, luftiga ytor.
4. Typsnitt: Modernt sans-serif, liknar Arial eller Inter. Rekommenderat för e-post: Arial Bold i rubriker och Arial i brödtext.
5. Knappar: Klarblå bakgrund #159FE3, vit text, helt rundade hörn (pillform). Kort och tydlig text, exempelvis "Skapa gratis konto".
6. Ton: Trygg, enkel, personlig.

Färgkoderna är uppskattade från skärmbilden, inte hämtade från webbplatsens CSS.

Lägg märke till sista raden: ChatGPT säger själv att färgkoderna är uppskattade. De ligger nära, men inte exakt rätt. I vår stilmall är huvudfärgen #1C9AE6, inte #159FE3. En AI-assistent som kan arbeta i din webbläsare kan läsa stilmallen och hämta de exakta koderna. Använder du en vanlig AI-chatt får du räkna med att ge den en skärmbild. Har du en grafisk manual, jämför färgkoderna med den: en uppskattad färg kan ligga några nyanser fel. AI:n utgår också från hur webbplatsen ser ut just nu. Har du en kampanjfärg kvar på startsidan kan den därför hamna i listan.

Titta lite extra på typsnitten. Många webbtypsnitt visas inte i e-postprogram, och då byts de automatiskt mot ett standardtypsnitt. Be AI:n föreslå ett liknande typsnitt som fungerar överallt. I vårt exempel blev Inter till Arial, så att mallen ser lika ut hos alla mottagare.

Steg 2: bestäm strukturen tillsammans med AI

Nästa prompt handlar om vad mallen ska innehålla. Berätta vad du skickar och till vem:

Vi är [en förening / ett företag / en kommun] och skickar ett nyhetsbrev [en gång i månaden] till [medlemmar / kunder / invånare]. Föreslå en struktur för en återanvändbar mall med högst sex block: vad varje block är till för, ungefär hur mycket text det rymmer och var knappen ska sitta. Håll det enkelt och mobilvänligt.

Som test bad vi ChatGPT föreslå ett upplägg för ett månadsbrev från Paloma till våra kunder. Det är ChatGPT:s förslag, inte så våra egna utskick ser ut, men det visar vad du kan få tillbaka. Den föreslog fem block, och för varje block skrev den hur många ord det rymmer och var knappen ska sitta:

Förslag till mall för ett månadsbrev från Paloma

1. Logotyp och kort inledning. Hälsa välkommen och lyft månadens viktigaste tema. 20 till 35 ord, ingen knapp.
2. Månadens höjdpunkt. En ny funktion, förbättring eller ett konkret sätt att få mer nytta av Paloma. Gärna en bild. 60 till 90 ord, blå knapp direkt under texten.
3. Ett tips du kan använda direkt. Ett enkelt tips om nyhetsbrev, SMS, event eller automation. Visa gärna ett exempel. 50 till 75 ord, textlänk eller blå knapp under tipset.
4. Kort och gott. Två korta nyheter, exempelvis en guide, en kommande utbildning eller en mindre produktförbättring. 20 till 35 ord per nyhet, en textlänk per nyhet.
5. Avslutning och kontakt. En personlig hälsning från Paloma, kontaktuppgifter och avregistreringslänk. 15 till 30 ord, ingen knapp.

Ett bra upplägg kan se ut så här: logotyp och en kort inledning överst, en huvudnyhet med bild och knapp, ett eller två kortare block och en avslutning med kontaktuppgifter och avregistreringslänk. Stryk det du inte behöver. En mall med färre block är lättare att fylla varje gång. Då är chansen större att nyhetsbrevet faktiskt blir skickat.

Spara svaret. Antalet ord per block är guld värt nästa gång du ska skriva, och det är det du anger när du ber AI:n om hjälp med texterna.

Steg 3: bygg mallen i Paloma

Nu har du en profil och ett upplägg. Sedan bygger du mallen i Paloma, utan att skriva kod.

1. Välj en utgångspunkt. Välj en layoutmall om du vill bestämma utseendet själv, eller en designmall som redan liknar upplägget AI:n föreslog. Mer om skillnaden finns i vår guide om mallar för nyhetsbrev.
2. Lägg in profilen. Använd hexkoderna från steg 1, välj typsnitten och ladda upp logotypen. Ändra färgerna på bakgrunder, knappar och rubriker. Det gör du när du bygger mallen, inte inför varje utskick.
3. Bygg strukturen. Dra in blocken du valde i steg 2 och ta bort dem du inte behöver. Skriv korta hjälptexter i blocken, till exempel "Huvudnyhet, 60 till 90 ord". Då vet du vad du ska fylla i nästa gång.
4. Lägg in det fasta. Kontaktuppgifter, länkar till webbplatsen och sociala medier, och sidfoten. Avregistreringslänken och länken för att visa brevet i webbläsaren lägger Paloma in automatiskt.
5. Spara som mall. Nu har du en mall att utgå från varje gång du skickar.

Be inte AI:n skriva en färdig HTML-mall. Palomas editor bygger brev av block som du drar och släpper, och den tar inte emot en hel HTML-sida. Det är inget du förlorar: det är blocken som gör att du kan byta en bild eller flytta ett stycke utan att röra någon kod. Låt AI:n hjälpa dig med profilen, upplägget, texterna och bilderna, och gör själva bygget i Paloma.

Vill du ha hjälp med texterna i blocken, be AI:n skriva dem utifrån tonen i steg 1 och antalet ord i steg 2. I guiden om att skriva nyhetsbrev med AI visar vi hur du gör.

Steg 4: testa och låt någon titta

Skicka ett snabbtest till dig själv. Snabbtest finns i Paloma när du arbetar med brevet och skickar det bara till de adresser du anger, inte till någon lista. Öppna det i mobilen och på datorn. Kontrollera alltid det här, även om AI:n har gjort ett bra jobb:

• Färgerna. Syns texten mot bakgrunden? Ser knappen ut som en knapp? När vi byggde sminkbutikens brev nedan försvann en tunn linje mellan två avsnitt när brevet ritades upp, och i hotellets brev låg en prisruta inbakad i bilden rakt ovanför den riktiga prisrutan. Sådant upptäcker du först när du tittar.
• Logotypen. Rätt version, rätt storlek, inte suddig. Lägger du in logotypen i full bredd kan den fylla hela brevet. Minska den tills den är ungefär lika stor som på webbplatsen.
• Länkarna. Går de dit de ska? Ligger avregistreringslänken kvar?
• Tonen. Låter det som ni? AI:n utgår från texterna på webbplatsen, men de låter kanske inte som när ni skriver till era läsare.
• Avsändaren. Rätt namn och rätt adress, så att mottagaren känner igen er.

Låt gärna en kollega titta innan mallen används skarpt. En kollega upptäcker sådant du själv har missat.

Med en AI-assistent i webbläsaren

Stegen ovan gör du själv, med en AI-chatt som hjälp. Har du en AI-assistent som kan arbeta i din webbläsare gör den samma steg åt dig. Du bygger inte själv, utan beskriver vad du vill ha och granskar. Så här gör du:

1. Logga in i Paloma själv. Assistenten arbetar i din webbläsare, där du redan är inloggad. Ge den aldrig ditt lösenord.
2. Ge assistenten uppdraget. Säg vilken webbplats profilen ska hämtas från, vad du skickar och till vem, och vad den inte får göra. Utgå gärna från prompten under listan.
3. Be om profilen och upplägget först. Låt assistenten visa färgkoderna, typsnitten och blocken innan den bygger. Rätta det som är fel. Det är lättare att ändra en lista än en färdig mall.
4. Följ med medan den bygger. Assistenten arbetar i en flik i din webbläsare, och du kan se vad den gör. Säg till direkt om något går åt fel håll.
5. Granska med snabbtest. Be assistenten skicka ett snabbtest till dig. Öppna det i mobilen och på datorn och gå igenom samma punkter som i steg 4. Be om ändringar och ett nytt snabbtest tills allt stämmer.
6. Spara som mall. När du är nöjd sparar du brevet som mall, eller ber assistenten göra det.

Öppna www.dinwebbplats.se och läs färgerna, typsnitten och logotypen i webbplatsens kod. Vi är [en förening / ett företag / en kommun] och skickar ett nyhetsbrev [en gång i månaden] till [medlemmar / kunder / invånare]. Föreslå ett upplägg med högst sex block och visa mig profilen och upplägget innan du bygger. Bygg sedan ett nytt brev i Paloma från en tom layoutmall, med e-postsäkra typsnitt. Skicka inget till någon lista, och ändra eller ta inte bort något annat i kontot. Skicka ett snabbtest till mig när brevet är klart.

Sista meningarna i prompten är viktiga. Assistenten kan göra allt som du kan göra i kontot, så säg tydligt vad den får och inte får göra. Det är alltid du som skickar till dina mottagare, efter att du själv har sett snabbtestet.

Bilder och logotyper med AI

Det som lyfter ett nyhetsbrev mest är en bra bild överst. Har du egna foton, använd dem. Har du inte det kan AI göra dem, och det är så alla bilder i exemplen nedan har kommit till. Fotona, klubbmärket, kommunvapnet och de små företagslogotyperna är gjorda med ChatGPT:s bildverktyg. Inget är hämtat från en bildbank. Vi visar det öppet, för det är en av de saker AI gör bäst just nu, och den som vet hur det går till kan göra likadant.

Ett foto. Beskriv motivet, ljuset och formatet, och säg till att bilden inte ska innehålla text. Så här bad vi om bilden till föreningens brev:

Skapa en fotorealistisk bild i liggande format 3:2: medaljutdelning efter en ungdomsfotbollscup i Sverige, ett lag med tio- till tolvåringar i gröna matchtröjor jublar med medaljer runt halsen på en gräsplan, föräldrar som applåderar i bakgrunden, varmt majljus, ingen text.

Och så här bad vi om motorcykelbilden:

Skapa en fotorealistisk produktbild i liggande format 16:10: en svart naken motorcykel utan märkesnamn, fotograferad snett framifrån i en mörk verkstad med varmt sidoljus, blank betong, inga personer, ingen text.

En logotyp. Saknar du logotyp kan AI göra en enkel logotyp som håller ihop brevet. Klubbmärket, kommunvapnet och de små företagslogotyperna i exemplen är gjorda så. Beskriv formen, färgerna och stilen, och be om en ren bakgrund:

Rita ett klassiskt klubbmärke för en svensk fotbollsförening som heter Stenhagens IF, grundad 1932: en sköld i mörkgrönt och vitt med en fotboll, eklöv och årtalet, i stilen hos svenska idrottsföreningar, platt och tydligt, på vit bakgrund.

Kontrollera alltid att logotypen inte liknar en riktig förenings eller ett riktigt företags. Vi sökte på varje påhittat namn innan vi använde det, och bytte ett som visade sig finnas.

Tre saker att tänka på. Skriv "ingen text" i prompten till foton, för text i AI-bilder blir lätt fel; lägg rubriken i brevet i stället, där den går att ändra. Undantaget i exemplen är Kallström Ski, där rubriken ligger i bilden: då bad vi om exakt den texten och kontrollerade varje bokstav. Be om "utan märkesnamn" på produkter, så att det inte dyker upp ett riktigt varumärke. Och visa bilderna för en kollega innan du skickar: en hand med sex fingrar eller en skylt med påhittade bokstäver syns inte alltid första gången.

Spara prompterna som fungerar. Nästa gång byter du bara motivet, så får brevet samma manér.

Åtta exempel, byggda på samma sätt

Vi byggde åtta brev i ett vanligt Paloma-konto för att visa hur det fungerar för olika avsändare. Profilen, upplägget och bilderna togs fram med prompter som dem ovan. Själva bygget skiljer sig från när du gör det själv: vi lät en AI-assistent bygga breven i Paloma med kod, i stället för att dra och släppa block. Mer om det längre ned. Avsändarna är påhittade, så att vi kan visa hur en profil blir ett brev utan att visa någon kunds utskick. Sex av dem är återkommande nyhetsbrev, två är kampanjbrev med ett enda budskap. Titta på hur olika de är i färg, både inne i brevet och runt det. Det är profilen som styr, inte verktyget.

Alla åtta byggdes på två kvällar, inklusive bilderna, prompterna och kontrollerna. Det var inte AI:n som tog tid, utan att gå igenom resultatet och rätta det som blev fel. Läs mer i steg 4.

Vanliga misstag

• Att lita på färgkoderna utan att titta. En AI som utgår från en skärmbild uppskattar färgerna. Jämför med manualen eller webbplatsen innan du bygger.
• För många block. Sex block som ska fyllas varje månad blir snart två. Bygg mallen för det du faktiskt orkar skriva.
• Webbtypsnitt i e-post. Typsnittet från webbplatsen finns sällan i mottagarens e-postprogram. Välj det e-postsäkra alternativet från början, så slipper du överraskningar.
• Logotypen i fel storlek. En logotyp som fyller hela bredden ser ut som en banderoll. Jämför med hur stor den är på webbplatsen.
• Att hoppa över snabbtestet. Mallen kan se bra ut i redigeraren. Men det är i mobilen och i Outlook det syns om den håller.

Så gör vi själva

Det här är inte bara teori. AI och Paloma fungerar redan bra tillsammans, utan att vi har behövt bygga in någon egen AI i verktyget. När en ny kund vill ha en mall i sin egen profil låter vi i dag en AI-assistent göra första versionen. Den läser kundens webbplats, hämtar färger, bilder och form, bygger mallen i kundens konto och skickar ett snabbtest. Första gången tog det en eftermiddag. Nu tar det några minuter. Sedan kontrollerar någon av oss resultatet innan kunden får mallen. Det gör vi varje gång.

De åtta exemplen i den här guiden byggdes på just det sättet. AI-assistenten drog inte in block som du gör. Den skrev kod i webbläsaren som lade in blocken direkt i Palomas vanliga editor: text, bild, knapp och kolumner, samma sorts block som du har. Bilderna och logotyperna gjordes i ChatGPT med prompter som dem ovan. Vi tittade på varje brev i Palomas förhandsgranskning, bad om ändringar och tittade igen. Vill du hellre att vi gör mallen åt dig går det förstås också bra. Hör av dig via kontaktsidan, så berättar vi hur det går till.

Vanliga frågor om mallar med AI

Relaterade guider

• Skriva nyhetsbrev med AI: guide, prompts och fallgropar
• Så bygger du en eventsida med AI i Paloma Event
• Mallar för nyhetsbrev
• Guide till bättre nyhetsbrev
• Skapa nyhetsbrev med Paloma