Syventävät ohjeet
Asiakaskirjeen kirjoittaminen tekoälyllä
Valmis asiakaskirje voi näyttää esimerkiksi tällaiselta.
Asiakaskirjeet lähetetään lähes poikkeuksetta HTML-muodossa – riippumatta siitä, mikä verkkokauppa-alusta on käytössä. HTML on verkkosivujen sisällön kuvauskieli, mutta sähköpostiohjelmat eivät ole varsinaisia verkkoselaimia. Ne eivät osaa näyttää nykyaikaista HTML-koodia yhtä hyvin kuin nykyaikaiset selaimet, mikä aiheuttaa ongelmia kirjeiden ulkoasussa.
Siksi asiakaskirjeissä kannattaa käyttää yksinkertaista, 90-luvulta tuttua HTML-koodia. Ongelmaksi on muodostunut, ettei juuri kukaan enää osaa sitä. Onneksi tekoäly osaa. Tässä ohjeessa käytämme Edge-selaimen Copilot-tekoälyä, joka osaa tuottaa sähköpostiohjelmien kanssa yhteensopivan HTML-muotoisen asiakaskirjeen puolestasi.
Toimi seuraavasti
- Avaa Edge-selaimessa Copilot (tekoälyavustaja), joka auttaa sinua kirjoittamaan asiakaskirjeen.
- Copilot löytyy Edge-selaimen oikeasta reunasta. Jos et näe sitä, varmista että se on aktivoitu asetuksista.
- varmista, että Copilotin Asetukset / Tietosuoja / Kontekstivihjeet on päällä. - Siirry verkkokauppasi etusivulle.
- Pyydä tekoälyä kirjoittamaan HTML-muotoinen asiakaskirje.
Olen lähettämässä verkkokauppani asiakkaille sähköistä asiakaskirjettä. Olen ymmärtänyt, että asiakaskirjeet kannattaa kirjoittaa 90-luvulta tutulla HTML-koodilla, joka toimii niin Outlookissa, Gmailissa, Apple Mailissa, Thuderbirdissä ja Yahoo Mailissa. Olenko oikeassa?
- Tekoäly vastaa esimerkiksi seuraavalla tavalla.
Olet aivan oikeassa. Tässä on malliesimerkki yhteensopivasta HTML-muotoisesta asiakaskirjeestä. Haluatko, että muokkaan tätä mallia juuri sinun asiakkaitasi varten? Voit kertoa esimerkiksi kirjeen aiheen, kohderyhmän tai kampanjan sisällön.
- Kun olet keskustellut tarpeeksi, kopioi tekoälyn antama HTML-koodi verkkokaupan hallintaliittymän Markkinointi / Asiakaskirje -kohtaan ja lähetä itsellesi testikirje.
- Tallenna HTML-koodi omalle tietokoneellesi, jotta voit antaa sen tekoälylle seuraavaa asiakaskirjettä kirjoittaessasi. Näin voit säilyttää asiakaskirjeessäsi samanlaisen tyylin.
Esimerkki asiakaskirjeen HTML-koodista
Tässä esimerkissä on tekoälyn kanssa valmiiksi keskusteltu asiakaskirjeen HTML-koodi.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
<title>Hillomessut ja t-paitatarjous</title>
<!-- Outlookin Office-dokumenttien tuki -->
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!-- Outlookin VML-tuki esim. taustakuville -->
<!--[if gte mso 9]>
<style type="text/css">
v\:* { behavior: url(#default#VML); display: inline-block; }
</style>
<![endif]-->
<!-- Inline-tyylejä varten -->
<style type="text/css">
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table {
border-collapse: collapse;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
</style>
<!-- Peruuttamislinkkiä varten -->
<style type="text/css">
.footer a {
color: #cccccc !important;
text-decoration: none;
}
</style>
</head>
<body bgcolor="#eeeeee" style="margin:0; padding:0; font-family: 'Raleway', Arial, sans-serif;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#eeeeee">
<tr>
<td align="center">
<table width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" style="border: 1px solid #cccccc;">
<tr>
<td align="center" style="padding: 20px;">
<img src="https://www.clovershop.com/assets/images/asiakaskirje_malli_hillo_logo.png" alt="Hillo-logo" width="172" height="60" style="display:block;">
</td>
</tr>
<tr>
<td align="center" style="padding: 20px;">
<h1 style="font-size: 24px; margin-bottom: 10px;">Tervetuloa hillomessuille!</h1>
<p style="font-size: 16px;">
Hillo osallistuu hillomessuille ensi viikonloppuna <strong>26.–27.7.2025</strong>.
Messuilla pääset tutustumaan herkullisiin uutuuksiin, maistelemaan tuotteita ja hyödyntämään erikoistarjouksia.
</p>
<p style="font-size: 16px; margin-top: 20px;">
Olet lämpimästi tervetullut mukaan – nähdään hillon merkeissä!
</p>
</td>
</tr>
<tr>
<td align="center" style="padding: 30px 20px 20px;">
<h2 style="font-size: 20px; margin-bottom: 10px;">Messutarjous: Naisten t-paita</h2>
<img src="https://www.clovershop.com/assets/images/asiakaskirje_malli_naisten_t_paita.jpg" alt="Naisten t-paita NTP491" width="200" style="display:block; margin-bottom: 10px;">
<p style="font-size: 16px;">
Tyylikäs ja mukava naisten t-paita nyt<br>erikoishintaan <strong>19 €</strong> (norm. 35 €).
</p>
<table cellpadding="0" cellspacing="0" border="0" style="margin-top: 15px;">
<tr>
<td bgcolor="#0055cc">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="padding: 10px 20px;">
<a href="https://www.clovershop.app/demo15/p491-naisten-t-paita-fi.html" style="color: #ffffff; text-decoration: none; font-size: 16px; display: inline-block;">
Katso lisätiedot
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 30px 20px 10px;"> </td>
</tr>
<tr>
<td bgcolor="#333333" style="padding: 30px 20px 10px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-size: 14px; color: #ffffff;">
<strong>Hillo</strong><br>
Pultti & Ruoste Oy<br>
Testikatu 1<br>
FI-12345, Testikaupunki, FINLAND<br>
puh. (03) 123 4567 / 040 123 4567<br>
Y-tunnus: 0123456-7
</td>
</tr>
<tr>
<td class="footer" style="font-size: 12px; color: #ffffff; padding-top: 20px;">
[UNSUBS]
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Koodissa näkyvä [UNSUBS] on yhdistämistagi (merge tag). Kun ohjelmisto huomaa, että HTML-koodi sisältää [UNSUBS]-tagin, se korvaa kyseisen tagin asiakaskohtaisella peruuttamistekstillä ja/tai linkillä.