Cara Membuat Tautan “Tambahkan ke Kalender” untuk Email Anda

Diterbitkan: 2021-02-05

Acara tatap muka atau virtual berkisar untuk mengenal orang lain dan belajar dari satu sama lain. Karena email adalah saluran pribadi, itu adalah media yang ideal untuk membangun kegembiraan untuk acara dan mengirim pengingat.

Untuk memastikan bahwa tamu benar-benar datang, sebaiknya sertakan tautan “Tambahkan ke Kalender” di email acara Anda. Dengan itu, pelanggan dapat menambahkan acara ke kalender mereka sendiri, sehingga lebih mudah untuk menghindari konflik kalender dan memungkinkan mereka untuk mengatur pengingat mereka sendiri.

Biasanya, ini dilakukan dengan file ICS—juga dikenal sebagai iCalendar. Ini adalah format kalender umum yang biasanya menggunakan ekstensi file .ics dan diterima secara luas oleh sebagian besar kalender. Jangan bingung dengan iCal Apple, yang memiliki nama yang mirip, meskipun file iCalendar juga berfungsi di sana. Untuk kejelasan, kami akan merujuk ini sebagai ICS atau file kalender di seluruh posting blog ini.

Beberapa kalender juga dapat menambahkan acara dari tautan web—yang akan kami sebut sebagai tautan kalender. Meluangkan waktu ekstra untuk secara dinamis menampilkan tautan Tambahkan ke Kalender yang cocok dengan klien email khusus setiap pelanggan dapat membuat acara Anda lebih mudah diakses oleh mereka. Dengan kata lain, lebih mudah dan lebih cepat bagi pelanggan Anda untuk menambahkan acara Anda ke kalender mereka.

Kami akan memandu Anda melalui kalender mana yang harus Anda perhatikan, membuat file dan tautan kalender yang sebenarnya, dan mengkodekan file dan tautan ini ke email acara Anda untuk pengalaman pelanggan email terbaik.

Daftar isi

Langkah 1: Pilih kalender mana yang akan ditargetkan
Langkah 2: Buat tautan dan file kalender
1. File kalender ICS
2. Tautan kalender
Langkah 3: Kodekan tautan Tambahkan ke Kalender ke email Anda
1. Putuskan bagaimana menampilkan tombol Tambahkan ke Kalender
2. Buat tombol dan tautan CTA Anda
3. Targetkan audiens yang tepat dengan tautan kalender yang tepat
Lihat tautan "Tambahkan ke Kalender" ini dalam tindakan

Langkah 1: Pilih kalender mana yang akan ditargetkan

Ada banyak aplikasi kalender berbeda yang tersedia: yang tersedia secara default melalui sistem operasi komputer Anda, sebagai bagian dari webmail Anda, atau aplikasi kalender lain yang telah Anda unduh. Hampir tidak mungkin untuk mendukung semua aplikasi kalender di luar sana.

Untuk membantu Anda memahami alat kalender mana yang menjadi fokus, lihat data Analisis Email Anda.

Analisis Email Lakmus - data klien email — Contoh data klien email dari Litmus Email Analytics

Semua kalender dapat menggunakan file ICS untuk menambahkan acara baru ke dalamnya. Tapi itu mengharuskan orang untuk terlebih dahulu mengunduh file ICS dan kemudian mengunggahnya ke kalender mereka.

Namun, di Gmail, Office 365, dan Outlook.com, Anda juga dapat menambahkan acara menggunakan tautan yang secara otomatis menyertakan detail acara Anda. Ini mengarah pada pengalaman pelanggan yang lebih baik, karena hanya perlu satu klik untuk menambahkan acara Anda ke kalender mereka.

Berikut adalah bagan praktis yang dengan cepat merangkum kalender mana yang menerima metode Tambahkan ke Kalender untuk membantu mempersiapkan Anda ke langkah berikutnya.

Metode “Tambahkan ke Kalender” dengan Kalender

Kalender	File Kalender ICS	Tautan Kalender
Google Kalender	✓	✓
Outlook.com	✓	✓
AOL	✓	✘
Yahoo	✓	✘
Kantor 365	✓	✓
Pandangan	✓	✘
Kalender Apple	✓	✘

Pengingat ramah bahwa meskipun akan lebih mudah bagi Anda untuk hanya membuat file kalender ICS karena diterima oleh sebagian besar klien email, tidak mudah bagi pelanggan Anda .

Personalisasi tautan kalender untuk setiap klien email meningkatkan kemungkinan pelanggan Anda benar-benar akan menambahkan acara Anda ke kalender mereka (dan menghadiri dan mengonversi!) karena hanya dengan sekali klik. Membuat seseorang menambahkan file ICS ke kalender mereka membutuhkan lebih banyak langkah, dan Anda mungkin kehilangan beberapa orang di sepanjang jalan.

Langkah 2: Buat tautan dan file kalender

Bergantung pada klien email mana yang digunakan pelanggan Anda untuk membaca email, Anda dapat memilih untuk membuat file kalender ICS, tautan kalender, atau keduanya.

File kalender ICS

Karena file ICS memberi daya pada tautan untuk banyak aplikasi kalender, ini selalu merupakan cadangan yang bagus untuk dimiliki.

Untuk memulai, kami merekomendasikan alat Pembuat Acara iCalendar ini untuk menghasilkan file. Ini memungkinkan Anda untuk menambahkan informasi apa pun yang mungkin perlu diketahui pelanggan Anda tentang acara tersebut seperti lokasi, deskripsi, dan URL. Anda bahkan bisa lebih spesifik dengan acara Anda, mengulanginya atau menambahkan pemberitahuan untuk tamu Anda.

Setelah audiens Anda menambahkan file Anda ke kalender mereka, mereka memiliki detail yang memperjelas untuk apa acara tersebut. Dan itu berfungsi sebagai pengingat mengapa acara tersebut ada di kalender mereka.

Tautan kalender

Untuk membuat tautan Tambahkan ke Kalender untuk kalender email web, kami menyarankan alat Tautan Kalender Amit Agarwal. Ini akan menghasilkan seluruh URL yang harus Anda sertakan dalam email Anda untuk kalender setiap orang.

Ada kelemahan dari alat ini: Anda tidak dapat membuat acara berulang atau menyertakan pemberitahuan seperti yang dapat Anda lakukan dengan file ICS. Anda dapat menambahkan detail ini ke URL kalender, tetapi Anda harus membuatnya di setiap kalender, yang mungkin tidak dapat Anda akses.

Inilah mengapa praktik yang baik untuk membuat file kalender ICS selain tautan kalender.

Jangan pernah mengirim email rusak lagi

Cegah kesalahan email—seperti tautan Tambahkan ke Kalender yang rusak—dengan pengujian QA otomatis dengan Daftar Periksa Litmus. Kirim email sesuai merek dan bebas kesalahan dengan percaya diri (dan lindungi reputasi merek Anda).

Mulai uji coba gratis Anda →

Langkah 3: Kodekan tautan Tambahkan ke Kalender ke email Anda

Sebelum kita sampai ke bagian yang benar-benar menyenangkan (pengkodean!), Anda perlu memutuskan bagaimana Anda akan menyajikan tautan Tambahkan ke Kalender Anda.

Putuskan bagaimana menampilkan tombol Tambahkan ke Kalender

Seperti yang kami sebutkan sebelumnya, secara tradisional, ada beberapa tautan Tambahkan ke Kalender bersama dengan tombol file ICS. Saat menggunakan tombol dinamis sebagai tombol Tambahkan ke Kalender, Anda memiliki dua opsi berbeda:

Tunjukkan satu : Anda dapat menargetkan klien email setiap pelanggan dan secara dinamis menampilkan tautan spesifik yang cocok dengan klien email mereka.
Tampilkan semua : Anda dapat menggunakan model hibrid di mana tombol ajakan bertindak (CTA) utama dipersonalisasi untuk setiap klien email pelanggan, dan Anda masih memberikan tautan kalender alternatif.

Jika Anda dapat mempersonalisasi tautan Tambahkan ke Kalender untuk setiap pelanggan, Anda mungkin bertanya-tanya mengapa Anda ingin mempertimbangkan untuk menampilkan tautan kalender lainnya sama sekali.

Menampilkan hanya satu tautan tidak memperhitungkan orang-orang seperti, yah, saya. Saya sering menggunakan email kantor saya untuk mendaftar email sehingga saya bisa melihat seperti apa tampilannya di Outlook. Tapi saya ingin menambahkan acara ke kalender Gmail pribadi saya. Ini bisa menjadi titik gesekan bagi orang-orang jika hanya satu tautan kalender yang disediakan.

Opsi kedua untuk menampilkan beberapa tautan kalender adalah cara yang bagus untuk menyelesaikan masalah ini.

Tambahkan ke contoh email Kalender — Contoh tombol yang dipersonalisasi dengan tautan kalender

Ini sedikit lebih rumit daripada hanya menyembunyikan dan menampilkan tombol CTA berdasarkan preferensi klien email, tetapi ini memberikan pengalaman pengguna terbaik menurut saya, saat Anda bertemu pelanggan di kotak masuk mereka, tetapi tetap mengakomodasi alur kerja apa pun yang mungkin mereka miliki.

Buat tombol dan tautan CTA Anda

Jadi, sekarang untuk bagian yang menyenangkan: mengkodekan tombol file ICS sebagai default. Mulailah dengan ini karena ini berfungsi di mana saja, terlepas dari klien email, aplikasi, atau perangkat mana yang dibaca pelanggan Anda.

Pertama, dapatkan file ICS yang Anda buat di langkah 2 menggunakan alat iCalendar Event Maker. Kemudian, unggah ke server perusahaan Anda, sistem manajemen konten (CMS), atau perpustakaan media penyedia email.

Sekarang saatnya membangun tombol. Ada banyak cara berbeda untuk membuat tombol; Anda dapat melihat Panduan Utama kami untuk Tombol Anti Peluru untuk beberapa di antaranya. Saat ini, kami adalah penggemar tombol Mark Robbins yang dapat diakses, jadi inilah contoh yang dapat Anda gunakan:

<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>

Kemudian, buat URL untuk tautan kalender klien email lain yang Anda rencanakan untuk digunakan dan letakkan di bawah tombol yang baru saja Anda buat:

<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>

Terakhir, bungkus semuanya dalam tag <div> sehingga Anda dapat menargetkannya untuk personalisasi:

<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>

Targetkan audiens yang tepat dengan tautan kalender yang tepat

Untuk setiap klien email yang ingin Anda targetkan, Anda harus membuat versi baru dari blok konten <div> yang Anda buat di atas—tetapi dengan tautan kalender klien email yang sesuai sebagai tombol Tambahkan ke Kalender CTA dan kemudian menggeser tautan kalender tambahan di bawahnya.

Terakhir, gunakan CSS untuk menargetkan klien email tertentu, dan tunjukkan kepada mereka konten khusus klien mereka sambil menyembunyikan konten default. Kiat pro: Tempatkan setiap CSS penargetan di blok gayanya sendiri karena menambahkannya ke blok gaya utama diketahui mengacaukan penargetan.

Jadi klien email mana yang dapat Anda targetkan?

Gmail
Kantor 365
Outlook.com
Yahoo*
AOL*

Anda juga dapat menargetkan klien desktop untuk Outlook, tetapi karena itu akan tetap menggunakan tombol default, Anda tidak perlu menargetkannya sekali pun. (Wahoo!)

Sekarang ke seluk-beluk cara menargetkan setiap klien email (dan lihat catatan terbaru kami untuk Yahoo dan AOL).

Gmail

Blok konten yang akan Anda tampilkan untuk Gmail memiliki URL Google Kalender sebagai tombol utama. Siklus tautan lain di bawah tombol untuk memasukkan file ICS. Selain itu, Anda perlu menyembunyikan seluruh blok dari orang lain, jadi tambahkan properti display dengan nilai none ke tag <div> dan bungkus semuanya dalam kode bersyarat untuk menyembunyikannya di Outlook.

Hasilnya terlihat seperti ini:

<!--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 secara otomatis mengubah doctype menjadi <u></u>. Ini ditempatkan berdekatan dengan elemen <div> yang mewarisi kelas dan ID dari tag <body>. Jadi gunakan yang berikut ini untuk menargetkan konten di Gmail:

u + .body .foo {}

Blok gaya untuk menyembunyikan default dan menampilkan tombol Gmail terlihat seperti ini:

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

Outlook.com dan Office 365

Blok untuk Outlook.com (Outlook Web App atau OWA) dan Office 365 terlihat sama dengan blok Gmail dengan sedikit modifikasi: kelas dan siklus tombol dan URL tautan ke akun klien baru yang ditargetkan.

Mungkin ada beberapa kebingungan karena Office 365 memiliki desktop dan klien webmail. Namun, penargetan hanya berlaku untuk klien email web Outlook yang memastikan tombol utama untuk klien desktop tertaut ke file ICS sementara di klien email web, itu adalah URL ke tautan kalender.

Email web Outlook.com dan Office 365 mengawali nama kelas dengan x_ tetapi tidak melakukan ini pada pemilih atribut. Jadi blok <div> Anda dapat ditargetkan dengan:

[class="x_foo"] {}

…dan itu hanya akan berlaku untuk klien email web Outlook. Oleh karena itu, blok gaya untuk klien email web Outlook terlihat seperti ini:

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

Yahoo dan AOL

Yahoo dulu memiliki tautan kalender, tetapi pada pengujian terakhir kami, tautan tersebut membawa Anda ke halaman kalender untuk menambahkan acara—tetapi tidak ada detail acara yang terbawa lagi.

Ini mungkin karena perubahan di Yahoo. Karena AOL dan Yahoo dimiliki oleh Verizon, mereka mungkin merampingkan klien email untuk membuatnya lebih sejajar satu sama lain.

Meskipun Anda masih dapat menargetkan Yahoo dan AOL secara khusus, mereka sekarang hanya mendukung file ICS. Jadi hemat waktu Anda dan gunakan saja kode Tambahkan ke Kalender default yang dibagikan di awal Langkah 3 di posting blog ini hingga pemberitahuan lebih lanjut.

Lihat tautan "Tambahkan ke Kalender" ini dalam tindakan

Jadi meskipun kode di atas bagus, Anda mungkin bertanya-tanya seperti apa tampilannya saat diimplementasikan dalam email yang sebenarnya. Beruntung bagi Anda, kami mengkodekannya di Litmus Builder sehingga Anda dapat melihat seperti apa tombol dan tautan Tambahkan ke Kalender secara langsung dan bagaimana tampilannya di berbagai klien email dan perangkat.

Sekarang, berikan tamu acara Anda perlakuan email khusus ini!

Pastikan email acara Anda terlihat benar

Email yang rusak berarti lebih sedikit konversi—seperti orang yang menambahkan acara Anda ke kalender mereka. Astaga. Cegah kesalahan email dan lindungi reputasi merek Anda dengan Pratinjau Email Litmus dan banyak lagi.

Mulai uji coba gratis Anda →

Posting blog ini awalnya diterbitkan pada 8 Mei 2019, oleh Jaina Mistry. Telah diperbarui pada 5 Februari 2021, untuk kejelasan dan dengan informasi baru.