Come creare un collegamento "Aggiungi al calendario" per le tue e-mail

Pubblicato: 2021-02-05

Gli eventi di persona o virtuali ruotano attorno alla conoscenza di altre persone e all'apprendimento reciproco. Poiché l'e-mail è un canale così personale, è il mezzo ideale per creare entusiasmo per gli eventi e inviare promemoria.

Per garantire che gli ospiti si presentino effettivamente, può essere utile includere un collegamento "Aggiungi al calendario" nelle e-mail dell'evento. Con ciò, gli abbonati possono aggiungere gli eventi ai propri calendari, rendendo più semplice evitare conflitti di calendario e consentendo loro di impostare i propri promemoria.

Tradizionalmente, questo viene fatto con un file ICS, noto anche come iCalendar. Questo è un formato di calendario comune che in genere utilizza l'estensione file .ics ed è ampiamente accettato dalla maggior parte dei calendari. Da non confondere con iCal di Apple, che condivide un nome simile, sebbene i file iCalendar funzionino anche lì. Per chiarezza, faremo riferimento a questo come file ICS o calendario in questo post del blog.

Alcuni calendari possono anche aggiungere eventi dai collegamenti Web, a ciò che chiameremo collegamenti del calendario. Prendersi del tempo extra per mostrare in modo dinamico il collegamento Aggiungi al calendario che corrisponde al client di posta specifico di ciascun abbonato può rendere il tuo evento più accessibile a loro. In altre parole, è più facile e veloce per i tuoi iscritti aggiungere il tuo evento al loro calendario.

Ti guideremo attraverso i calendari di cui dovresti occuparti, creando i file e i collegamenti del calendario effettivi e codificando questi file e collegamenti nell'e-mail dell'evento per la migliore esperienza di iscrizione all'e-mail.

Sommario

Passaggio 1: scegli quali calendari scegliere come target
Passaggio 2: crea i collegamenti e i file del calendario
1. File calendario ICS
2. Collegamenti del calendario
Passaggio 3: codifica i link Aggiungi al calendario nella tua email
1. Decidi come visualizzare il pulsante Aggiungi al calendario
2. Crea i tuoi pulsanti e link CTA
3. Scegli come target il pubblico giusto con il link del calendario giusto
Guarda questi link "Aggiungi al calendario" in azione

Passaggio 1: scegli quali calendari scegliere come target

Sono disponibili innumerevoli applicazioni di calendario diverse: quelle disponibili per impostazione predefinita tramite il sistema operativo del tuo computer, come parte della tua webmail o un'altra applicazione di calendario che hai scaricato. È praticamente impossibile supportare tutte le applicazioni di calendario disponibili.

Per aiutarti a capire su quali strumenti di calendario concentrarti, dai un'occhiata ai tuoi dati di Email Analytics.

Tornasole Email Analytics - dati del client di posta elettronica — Esempio di dati del client di posta elettronica di Litmus Email Analytics

Tutti i calendari sono in grado di utilizzare un file ICS per aggiungere nuovi eventi. Ma richiede alle persone di scaricare prima il file ICS e poi caricarlo sul proprio calendario.

Tuttavia, in Gmail, Office 365 e Outlook.com, puoi anche aggiungere eventi utilizzando un collegamento che include automaticamente i dettagli dell'evento. Ciò porta a una migliore esperienza per gli iscritti, poiché basta un clic per aggiungere il tuo evento al loro calendario.

Ecco un pratico grafico che riassume rapidamente quale calendario accetta quale metodo Aggiungi al calendario per aiutarti a prepararti per il passaggio successivo.

Metodo "Aggiungi al calendario" per calendario

Calendario	File calendario ICS	Collegamento al calendario
Google Calendar	✓	✓
Outlook.com	✓	✓
AOL	✓	?
Yahoo	✓	?
Ufficio 365	✓	✓
Veduta	✓	?
Calendario Apple	✓	?

Promemoria amichevole che mentre sarebbe più facile per te creare solo un file di calendario ICS perché è accettato dalla maggior parte dei client di posta elettronica, non è più facile per i tuoi abbonati .

La personalizzazione del collegamento del calendario per ogni client di posta elettronica aumenta la possibilità che i tuoi iscritti aggiungano effettivamente il tuo evento al loro calendario (e partecipino e si convertano!) Dal momento che è a portata di clic. Fare in modo che qualcuno aggiunga un file ICS al proprio calendario richiede invece più passaggi e potresti perdere alcune persone lungo la strada.

Passaggio 2: crea i collegamenti e i file del calendario

A seconda dei client di posta elettronica utilizzati dai tuoi abbonati per leggere le e-mail, puoi scegliere di creare un file di calendario ICS, un collegamento al calendario o entrambi.

File calendario ICS

Poiché i file ICS alimentano i collegamenti per molte applicazioni di calendario, questo è sempre un ottimo fallback da avere.

Per iniziare, ti consigliamo questo strumento iCalendar Event Maker per generare i file. Ti consente di aggiungere qualsiasi informazione che i tuoi iscritti potrebbero aver bisogno di sapere sull'evento come luogo, descrizione e un URL. Puoi anche essere più specifico con il tuo evento, facendolo ripetere o aggiungendo notifiche per il tuo ospite.

Una volta che il tuo pubblico aggiunge il tuo file al proprio calendario, ha i dettagli che chiariscono a cosa serve l'evento. E funge da promemoria sul motivo per cui l'evento è nel loro calendario.

Collegamenti del calendario

Per creare collegamenti Aggiungi al calendario per i calendari webmail, suggeriamo lo strumento Collegamenti calendario di Amit Agarwal. Genererà tutti gli URL che dovrai includere nella tua email per il calendario di ogni persona.

C'è uno svantaggio in questo strumento: non puoi creare eventi ricorrenti o includere una notifica come puoi fare con i file ICS. Puoi aggiungere questi dettagli agli URL del calendario, ma dovresti crearli in ogni calendario, a cui potresti non avere accesso.

Questo è il motivo per cui è buona norma creare un file di calendario ICS oltre ai collegamenti del calendario.

Non inviare mai più un'e-mail danneggiata

Previeni gli errori e-mail, come i link Aggiungi al calendario non funzionanti, con il test QA automatico con Litmus Checklist. Invia e-mail sul marchio e prive di errori in tutta sicurezza (e proteggi la reputazione del tuo marchio).

Inizia la tua prova gratuita →

Passaggio 3: codifica i link Aggiungi al calendario nella tua email

Prima di arrivare alla parte davvero divertente (codifica!), devi decidere come presentare il tuo link Aggiungi al calendario.

Decidi come visualizzare il pulsante Aggiungi al calendario

Come accennato in precedenza, tradizionalmente ci sono più collegamenti Aggiungi al calendario insieme al pulsante del file ICS. Quando utilizzi i pulsanti dinamici come pulsanti Aggiungi al calendario, hai due diverse opzioni:

Mostra uno : puoi scegliere come target il client di posta di ciascun abbonato e visualizzare dinamicamente il collegamento specifico che corrisponde al loro client di posta elettronica.
Mostra tutto : puoi utilizzare un modello ibrido in cui il pulsante di invito all'azione principale (CTA) è personalizzato per il client di posta elettronica di ciascun abbonato e fornisci comunque i collegamenti del calendario alternativi.

Se puoi personalizzare il collegamento Aggiungi al calendario per ogni iscritto, potresti chiederti perché dovresti considerare di mostrare gli altri collegamenti del calendario.

La visualizzazione di un solo collegamento non tiene conto di persone come, beh, me. Usavo spesso la mia e-mail di lavoro per iscrivermi alle e-mail in modo da poter vedere come apparivano in Outlook. Ma vorrei aggiungere l'evento al mio calendario Gmail personale. Questo può essere un punto di attrito per le persone se viene fornito un solo collegamento al calendario.

La seconda opzione di mostrare più collegamenti al calendario è un ottimo modo per risolvere questo problema.

Esempio di email Aggiungi al calendario — Esempio di un pulsante personalizzato con collegamenti al calendario

È un po 'più complicato del semplice nascondere e mostrare i pulsanti CTA in base alle preferenze del client di posta elettronica, ma secondo me fornisce la migliore esperienza utente, poiché incontri l'abbonato nella sua casella di posta, ma si adatta comunque a qualsiasi flusso di lavoro che potrebbe avere.

Crea i tuoi pulsanti e link CTA

Quindi, ora per la parte divertente: codificare il pulsante del file ICS come predefinito. Inizia con questo perché funziona ovunque, indipendentemente dal client di posta elettronica, dall'app o dal dispositivo da cui leggono i tuoi abbonati.

Innanzitutto, ottieni il file ICS che hai creato nel passaggio 2 utilizzando lo strumento iCalendar Event Maker. Quindi, caricalo sui server della tua azienda, sul sistema di gestione dei contenuti (CMS) o sulla libreria multimediale del provider di posta elettronica.

Ora è il momento della creazione dei pulsanti. Esistono molti modi diversi per creare un pulsante; puoi consultare la nostra guida definitiva ai pulsanti antiproiettile per alcuni di essi. In questi giorni, siamo un fan del pulsante accessibile di Mark Robbins, quindi ecco un esempio che puoi usare:

<a href="https://campaigns.litmus.com/_email/test/newnewyork.ics" class="cta btn-yellow" style="background-color: #F4D66C; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; text-decoration: none; padding: 14px 20px; color: #1D2025; border-radius: 5px; display:inline-block; mso-padding-alt:0; box-shadow:0 3px 6px rgba(0,0,0,.2);"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt"> </i><![endif]--><span style="mso-text-raise:15pt;">Add to your Calendar</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%"> </i><![endif]--></a>

Quindi, crea gli URL per i collegamenti del calendario dell'altro client di posta elettronica che intendi utilizzare e inseriscili sotto il pulsante appena creato:

<p style="font-family: Helvetica, Arial, sans-serif; color: #fdfdfd; font-size: 18px; line-height: 24px; margin: 20px 0 0 0;">
     <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Outlook.com</a> |
                       	 
     <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Office 365</a> |
                   	 
     <a href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20220112T180000Z%2F20220112T200000Z&details=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&location=New%20Earth&text=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Google</a>
</p>

Infine, avvolgi il tutto in un tag <div> in modo da poterlo scegliere come target per la personalizzazione:

<div class="default">
     <a href="https://campaigns.litmus.com/_email/test/newnewyork.ics" class="cta btn-yellow" style="background-color: #F4D66C; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; text-decoration: none; padding: 14px 20px; color: #1D2025; border-radius: 5px; display:inline-block; mso-padding-alt:0; box-shadow:0 3px 6px rgba(0,0,0,.2);"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt"> </i><![endif]--><span style="mso-text-raise:15pt;">Add to your Calendar</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%"> </i><![endif]--></a>
     <p style="font-family: Helvetica, Arial, sans-serif; color: #fdfdfd; font-size: 18px; line-height: 24px; margin: 20px 0 0 0;">
          <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Outlook.com</a> |
                       	 
          <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Office 365</a> |
                       	 
          <a href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20220112T180000Z%2F20220112T200000Z&details=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&location=New%20Earth&text=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Google</a>
     </p>
</div>

Scegli come target il pubblico giusto con il link del calendario giusto

Per ogni client di posta elettronica che desideri scegliere come target, dovrai creare una nuova versione del blocco di contenuto <div> che hai creato sopra, ma con il collegamento del calendario appropriato del client di posta elettronica di destinazione come pulsante Aggiungi al calendario CTA e quindi spostando il collegamenti extra al calendario sotto.

Infine, usa CSS per indirizzare client di posta elettronica specifici e mostra loro il contenuto specifico del client nascondendo il contenuto predefinito. Suggerimento per professionisti: inserisci ogni CSS di targeting nel proprio blocco di stile poiché è noto che aggiungerli al blocco di stile principale crea problemi con il targeting.

Quindi quali client di posta elettronica puoi scegliere come target?

Gmail
Ufficio 365
Outlook.com
Yahoo*
AOL*

Puoi anche scegliere come target il client desktop per Outlook, ma poiché ciò utilizzerebbe comunque il pulsante predefinito, non è necessario sceglierlo come target per una volta. (Wow!)

Ora al nocciolo di come indirizzare ogni client di posta elettronica (e vedere la nostra nota aggiornata per Yahoo e AOL).

Gmail

Il blocco di contenuti che mostrerai per Gmail ha l'URL di Google Calendar come pulsante principale. Scorri gli altri collegamenti sotto il pulsante per includere il file ICS. Inoltre, è necessario nascondere l'intero blocco a tutti gli altri, quindi aggiungere la proprietà di visualizzazione con un valore di nessuno al tag <div> e avvolgere l'intera cosa nel codice condizionale per nasconderla su Outlook.

Il risultato è simile a questo:

<!--Gmail Button-->
<!--[if (gte mso 9)|(IE)]><!-->
<div class="gmail" style="display: none;">
     <a href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20220112T180000Z%2F20220112T200000Z&details=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&location=New%20Earth&text=Welcome%20to%20the%20Motorway" class="cta btn-yellow" style="background-color: #F4D66C; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; text-decoration: none; padding: 14px 20px; color: #1D2025; border-radius: 5px; display:inline-block; mso-padding-alt:0; box-shadow:0 3px 6px rgba(0,0,0,.2);"><span style="mso-text-raise:15pt;">Add to your Google Calendar</span></a>
                       	 
     <p style="font-family: Helvetica, Arial, sans-serif; color: #fdfdfd; font-size: 18px; line-height: 24px; margin: 20px 0 0 0;">
          <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Outlook.com</a> |
                       	 
          <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Office 365</a> |
                       	 
          <a href="https://campaigns.litmus.com/_email/test/newnewyork.ics" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Apple Mail/Outlook Desktop</a>
     </p>
</div>                   	 
<!--<![endif]-->

Gmail cambia automaticamente il doctype in <u></u>. Viene posizionato accanto a un elemento <div> che eredita la classe e l'ID dal tag <body>. Quindi usa quanto segue per indirizzare i contenuti in Gmail:

u + .body .foo {}

Il blocco di stile per nascondere l'impostazione predefinita e mostrare il pulsante Gmail si presenta così:

<!--gmail styles-->
<style>
     u + .body .gmail { display: block !important; }
     u + .body .default { display: none !important; }
</style>

Outlook.com e Office 365

Il blocco per Outlook.com (Outlook Web App o OWA) e Office 365 ha lo stesso aspetto del blocco Gmail con piccole modifiche: la classe e il ciclo del pulsante e degli URL di collegamento per tenere conto del nuovo client di destinazione.

Potrebbe esserci un po' di confusione in quanto Office 365 ha sia un client desktop che un client webmail. Tuttavia, il targeting si applica solo al client webmail Outlook che garantisce che il pulsante principale per il client desktop si colleghi al file ICS mentre nel client webmail è l'URL al collegamento del calendario.

Sia Outlook.com che la webmail di Office 365 precedono i nomi delle classi con x_ ma non lo fanno nel selettore di attributi. Quindi il tuo blocco <div> può essere mirato con:

[class="x_foo"] {}

…e si applica solo al client webmail di Outlook. Pertanto, il blocco di stile per il client webmail di Outlook ha il seguente aspetto:

<!--owa styles-->
<style>
     [class~="x_outlook"] { display: block !important; }
     [class~="x_default"] { display: none !important; }
</style>

Yahoo e AOL

Yahoo aveva un collegamento al calendario, ma a partire dai nostri ultimi test, il collegamento ti porta a una pagina del calendario per aggiungere un evento, ma nessuno dei dettagli dell'evento viene più trasferito.

Ciò potrebbe essere dovuto a un cambiamento in Yahoo. Poiché sia AOL che Yahoo sono di proprietà di Verizon, potrebbero ottimizzare i client di posta elettronica per renderli più in linea tra loro.

Anche se puoi ancora scegliere come target Yahoo e AOL in modo specifico, ora supportano solo il file ICS. Quindi risparmia tempo e usa semplicemente il codice Aggiungi al calendario predefinito condiviso all'inizio del passaggio 3 in questo post del blog fino a nuovo avviso.

Guarda questi link "Aggiungi al calendario" in azione

Quindi, sebbene il codice sopra sia bello, probabilmente ti starai chiedendo come appare quando viene implementato in un'e-mail reale. Fortunatamente per te, l'abbiamo codificato in Litmus Builder in modo che tu possa vedere come appaiono dal vivo il pulsante Aggiungi al calendario e i collegamenti e come vengono visualizzati su diversi client e dispositivi di posta elettronica.

Ora vai a dare ai tuoi ospiti dell'evento questo trattamento speciale via email!

Assicurati che le email dei tuoi eventi siano corrette

Le email interrotte significano meno conversioni, come le persone che aggiungono il tuo evento al loro calendario. Accidenti. Previeni gli errori e-mail e proteggi la reputazione del tuo marchio con Litmus Email Previews e altro ancora.

Inizia la tua prova gratuita →

Questo post sul blog è stato originariamente pubblicato l'8 maggio 2019 da Jaina Mistry. È stato aggiornato il 5 febbraio 2021, per chiarezza e con nuove informazioni.