Hướng dẫn html add to calendar button - html thêm vào nút lịch

Các sự kiện trực tiếp hoặc ảo xoay quanh việc tìm hiểu người khác và học hỏi lẫn nhau. Bởi vì email là một kênh cá nhân như vậy, nó là phương tiện lý tưởng để xây dựng sự phấn khích cho các sự kiện và gửi lời nhắc.

Để đảm bảo rằng khách thực sự xuất hiện, có thể hữu ích khi bao gồm một liên kết thêm vào lịch vào lịch trong các email sự kiện của bạn. Cùng với đó, người đăng ký có thể thêm các sự kiện vào lịch riêng của họ, giúp việc tránh xung đột lịch dễ dàng hơn và cho phép họ thiết lập lời nhắc riêng của họ.

Theo truyền thống, điều này được thực hiện với một tập tin ICS, còn được gọi là Icalendar. Đây là một định dạng lịch phổ biến thường sử dụng tiện ích mở rộng tệp .ICS và được hầu hết các lịch chấp nhận rộng rãi. Không bị nhầm lẫn với Apple Apple Ical, nơi chia sẻ một cái tên tương tự, mặc dù các tệp icalendar cũng hoạt động ở đó. Để rõ ràng, chúng tôi sẽ gọi đây là một tệp ICS hoặc lịch trong suốt bài đăng trên blog này.

Một số lịch cũng có thể thêm các sự kiện từ các liên kết web mà chúng tôi sẽ gọi là liên kết lịch. Dành thêm thời gian để hiển thị động cho liên kết bổ sung vào lịch phù hợp với mỗi ứng dụng email cụ thể của người đăng ký có thể giúp sự kiện của bạn trở nên dễ dàng hơn với họ. Nói cách khác, dễ dàng hơn và nhanh hơn cho người đăng ký của bạn để thêm sự kiện của bạn vào lịch của họ.

Chúng tôi sẽ hướng dẫn bạn qua lịch mà bạn nên quan tâm, tạo các tệp và liên kết lịch thực tế, và mã hóa các tệp và liên kết này vào email sự kiện của bạn để có trải nghiệm thuê bao email tốt nhất.

Mục lục

  1. Bước 1: Chọn lịch nào để nhắm mục tiêu
  2. Bước 2: Tạo các liên kết và tệp lịch
    1. Tệp lịch ICS
    2. Liên kết lịch
  3. Bước 3: Mã thêm các liên kết lịch vào lịch của bạn vào email của bạn
    1. Quyết định cách hiển thị nút Thêm vào lịch của bạn
    2. Tạo các nút và liên kết CTA của bạn
    3. Nhắm mục tiêu đúng đối tượng với liên kết lịch phù hợp
  4. Xem các liên kết bổ sung vào lịch

Bước 1: Chọn lịch nào để nhắm mục tiêu

Bước 2: Tạo các liên kết và tệp lịch

Tệp lịch ICS

Hướng dẫn html add to calendar button - html thêm vào nút lịch
Liên kết lịch

Bước 3: Mã thêm các liên kết lịch vào lịch của bạn vào email của bạn

Quyết định cách hiển thị nút Thêm vào lịch của bạn

Tạo các nút và liên kết CTA của bạn

Nhắm mục tiêu đúng đối tượng với liên kết lịch phù hợp

Xem các liên kết bổ sung vào lịch

Có vô số ứng dụng lịch khác nhau có sẵn: các ứng dụng có sẵn theo mặc định thông qua hệ điều hành máy tính của bạn, như một phần của webmail hoặc ứng dụng lịch khác mà bạn đã tải xuống. Nó hầu như không thể hỗ trợ tất cả các ứng dụng lịch ngoài kia.

Để giúp bạn hiểu những công cụ lịch nào cần tập trung vào, hãy xem dữ liệu phân tích email của bạn.

Ví dụ về dữ liệu ứng dụng email từ phân tích email Litmus

Tất cả các lịch đều có khả năng sử dụng tệp ICS để thêm các sự kiện mới vào đó. Nhưng nó yêu cầu mọi người trước tiên tải xuống tệp ICS và sau đó tải nó lên lịch của họ.

Tất cả các lịch đều có khả năng sử dụng tệp ICS để thêm các sự kiện mới vào đó. Nhưng nó yêu cầu mọi người trước tiên tải xuống tệp ICS và sau đó tải nó lên lịch của họ.

Outlook.com

Tất cả các lịch đều có khả năng sử dụng tệp ICS để thêm các sự kiện mới vào đó. Nhưng nó yêu cầu mọi người trước tiên tải xuống tệp ICS và sau đó tải nó lên lịch của họ.

Tất cả các lịch đều có khả năng sử dụng tệp ICS để thêm các sự kiện mới vào đó. Nhưng nó yêu cầu mọi người trước tiên tải xuống tệp ICS và sau đó tải nó lên lịch của họ.

Tuy nhiên, trong Gmail, Office 365 và Outlook.com, bạn cũng có thể thêm các sự kiện bằng liên kết tự động bao gồm các chi tiết sự kiện của bạn. Điều này dẫn đến trải nghiệm thuê bao tốt hơn, vì chỉ cần một cú nhấp chuột để thêm sự kiện của bạn vào lịch của họ.

Tất cả các lịch đều có khả năng sử dụng tệp ICS để thêm các sự kiện mới vào đó. Nhưng nó yêu cầu mọi người trước tiên tải xuống tệp ICS và sau đó tải nó lên lịch của họ.

Tuy nhiên, trong Gmail, Office 365 và Outlook.com, bạn cũng có thể thêm các sự kiện bằng liên kết tự động bao gồm các chi tiết sự kiện của bạn. Điều này dẫn đến trải nghiệm thuê bao tốt hơn, vì chỉ cần một cú nhấp chuột để thêm sự kiện của bạn vào lịch của họ.

Ở đây, một biểu đồ tiện dụng nhanh chóng tóm tắt lịch nào chấp nhận thêm phương thức lịch để giúp bạn chuẩn bị cho bước tiếp theo.

Tất cả các lịch đều có khả năng sử dụng tệp ICS để thêm các sự kiện mới vào đó. Nhưng nó yêu cầu mọi người trước tiên tải xuống tệp ICS và sau đó tải nó lên lịch của họ.

Tuy nhiên, trong Gmail, Office 365 và Outlook.com, bạn cũng có thể thêm các sự kiện bằng liên kết tự động bao gồm các chi tiết sự kiện của bạn. Điều này dẫn đến trải nghiệm thuê bao tốt hơn, vì chỉ cần một cú nhấp chuột để thêm sự kiện của bạn vào lịch của họ.

Ở đây, một biểu đồ tiện dụng nhanh chóng tóm tắt lịch nào chấp nhận thêm phương thức lịch để giúp bạn chuẩn bị cho bước tiếp theo.

Tất cả các lịch đều có khả năng sử dụng tệp ICS để thêm các sự kiện mới vào đó. Nhưng nó yêu cầu mọi người trước tiên tải xuống tệp ICS và sau đó tải nó lên lịch của họ.

Tất cả các lịch đều có khả năng sử dụng tệp ICS để thêm các sự kiện mới vào đó. Nhưng nó yêu cầu mọi người trước tiên tải xuống tệp ICS và sau đó tải nó lên lịch của họ.

Tuy nhiên, trong Gmail, Office 365 và Outlook.com, bạn cũng có thể thêm các sự kiện bằng liên kết tự động bao gồm các chi tiết sự kiện của bạn. Điều này dẫn đến trải nghiệm thuê bao tốt hơn, vì chỉ cần một cú nhấp chuột để thêm sự kiện của bạn vào lịch của họ.

Tất cả các lịch đều có khả năng sử dụng tệp ICS để thêm các sự kiện mới vào đó. Nhưng nó yêu cầu mọi người trước tiên tải xuống tệp ICS và sau đó tải nó lên lịch của họ.

Tuy nhiên, trong Gmail, Office 365 và Outlook.com, bạn cũng có thể thêm các sự kiện bằng liên kết tự động bao gồm các chi tiết sự kiện của bạn. Điều này dẫn đến trải nghiệm thuê bao tốt hơn, vì chỉ cần một cú nhấp chuột để thêm sự kiện của bạn vào lịch của họ.

Ở đây, một biểu đồ tiện dụng nhanh chóng tóm tắt lịch nào chấp nhận thêm phương thức lịch để giúp bạn chuẩn bị cho bước tiếp theo.

Tất cả các lịch đều có khả năng sử dụng tệp ICS để thêm các sự kiện mới vào đó. Nhưng nó yêu cầu mọi người trước tiên tải xuống tệp ICS và sau đó tải nó lên lịch của họ.

Tuy nhiên, trong Gmail, Office 365 và Outlook.com, bạn cũng có thể thêm các sự kiện bằng liên kết tự động bao gồm các chi tiết sự kiện của bạn. Điều này dẫn đến trải nghiệm thuê bao tốt hơn, vì chỉ cần một cú nhấp chuột để thêm sự kiện của bạn vào lịch của họ.

Ở đây, một biểu đồ tiện dụng nhanh chóng tóm tắt lịch nào chấp nhận thêm phương thức lịch để giúp bạn chuẩn bị cho bước tiếp theo.

"Thêm vào lịch trình của Lịch theo lịch

Bước 2: Tạo các liên kết và tệp lịch

Tệp lịch ICS

Tệp lịch ICS

Liên kết lịch

Bước 3: Mã thêm các liên kết lịch vào lịch của bạn vào email của bạn

Quyết định cách hiển thị nút Thêm vào lịch của bạn

Liên kết lịch

Bước 3: Mã thêm các liên kết lịch vào lịch của bạn vào email của bạn

Quyết định cách hiển thị nút Thêm vào lịch của bạn

Đây là lý do tại sao nó thực hành tốt để tạo tệp lịch ICS ngoài các liên kết lịch.

Hướng dẫn html add to calendar button - html thêm vào nút lịch

Không bao giờ gửi email bị hỏng nữa

Ngăn ngừa lỗi email, giống như bị hỏng, thêm vào các liên kết lịch, với kiểm tra QA tự động với Danh sách kiểm tra Litmus. Gửi các email thương hiệu, không có lỗi với sự tự tin (và bảo vệ danh tiếng thương hiệu của bạn).

Bắt đầu thử nghiệm miễn phí của bạn →

Bước 3: Mã thêm các liên kết lịch vào lịch của bạn vào email của bạn

Trước khi chúng tôi nhận được phần thực sự thú vị (mã hóa!), Bạn cần quyết định cách bạn sẽ trình bày thêm liên kết lịch của mình.

Quyết định cách hiển thị nút Thêm vào lịch của bạn

Như chúng tôi đã đề cập trước đó, theo truyền thống, có nhiều liên kết lịch cùng với nút Tệp ICS. Khi sử dụng các nút động làm nút Thêm vào lịch, bạn có hai tùy chọn khác nhau:

  • Hiển thị một: Bạn có thể nhắm mục tiêu từng ứng dụng email của người đăng ký và hiển thị tự động liên kết cụ thể phù hợp với ứng dụng email của họ.: You can target each subscriber’s email client and dynamically display the specific link that matches their email client.
  • Hiển thị tất cả: Bạn có thể sử dụng mô hình lai trong đó nút Call-action (CTA) chính được cá nhân hóa cho mỗi ứng dụng email của người đăng ký và bạn vẫn cung cấp các liên kết lịch thay thế.: You can use a hybrid model where the main call-to-action (CTA) button is personalized for each subscriber’s email client, and you still provide the alternative calendar links.

Nếu bạn có thể cá nhân hóa liên kết bổ sung vào lịch cho mọi thuê bao, bạn có thể tự hỏi tại sao bạn lại muốn xem xét hiển thị các liên kết lịch khác.

Chỉ hiển thị một liên kết không có tính đến những người như, tôi cũng vậy. Tôi thường sử dụng email công việc của mình để đăng ký email để tôi có thể thấy chúng trông như thế nào trong Outlook. Nhưng tôi đã muốn thêm sự kiện vào lịch gmail cá nhân của tôi. Đây có thể là một điểm ma sát cho mọi người nếu chỉ cung cấp một liên kết lịch.

Tùy chọn thứ hai để hiển thị nhiều liên kết lịch là một cách tuyệt vời để giải quyết vấn đề này.

Hướng dẫn html add to calendar button - html thêm vào nút lịch
Ví dụ về nút được cá nhân hóa với các liên kết lịch

Nó phức tạp hơn một chút so với việc chỉ ẩn và hiển thị các nút CTA dựa trên sở thích của khách hàng email, nhưng nó cung cấp trải nghiệm người dùng tốt nhất theo ý kiến ​​của tôi, khi bạn gặp người đăng ký trong hộp thư đến của họ, nhưng vẫn phù hợp với bất kỳ quy trình làm việc nào họ có thể có.

Tạo các nút và liên kết CTA của bạn

Vì vậy, bây giờ cho phần thú vị: Mã hóa nút Tệp ICS làm mặc định. Bắt đầu với điều này bởi vì nó hoạt động ở mọi nơi bất kể ứng dụng email, ứng dụng hoặc thiết bị nào mà người đăng ký của bạn đọc từ đó.

Đầu tiên, hãy lấy tệp ICS bạn đã tạo trong bước 2 bằng công cụ tạo sự kiện Icalendar. Sau đó, tải nó lên các máy chủ của công ty bạn, Hệ thống quản lý nội dung (CMS) hoặc thư viện truyền thông của nhà cung cấp email.

Bây giờ nó có thời gian xây dựng nút. Có rất nhiều cách khác nhau để xây dựng một nút; Bạn có thể kiểm tra hướng dẫn cuối cùng của chúng tôi về các nút chống đạn cho một vài trong số chúng. Ngày nay, chúng tôi là một fan hâm mộ của nút có thể truy cập của Mark Robbins, vì vậy, đây là một ví dụ về việc bạn có thể sử dụng:

Add to your Calendar

Sau đó, tạo các URL cho các liên kết lịch ứng dụng của ứng dụng email khác mà bạn dự định sử dụng và đặt chúng dưới nút bạn vừa tạo:

Cuối cùng, bọc toàn bộ mọi thứ trong một thẻ để bạn có thể nhắm mục tiêu nó để cá nhân hóa:


Nhắm mục tiêu đúng đối tượng với liên kết lịch phù hợp

Đối với mỗi ứng dụng email mà bạn muốn nhắm mục tiêu, bạn sẽ phải tạo một phiên bản mới của khối nội dung bạn đã tạo ở trên nhưng với liên kết lịch phù hợp của ứng dụng email được nhắm mục tiêu làm nút thêm vào lịch CTA và sau đó chuyển các liên kết lịch bổ sung bên dưới.

Cuối cùng, sử dụng CSS để nhắm mục tiêu ứng dụng email cụ thể và hiển thị cho họ nội dung dành riêng cho khách hàng của họ trong khi ẩn nội dung mặc định. Mẹo chuyên nghiệp: Đặt mỗi CSS nhắm mục tiêu vào khối kiểu riêng của nó khi thêm chúng vào khối kiểu chính đã được biết là gây rối với việc nhắm mục tiêu.

Vậy bạn có thể nhắm mục tiêu ứng dụng email nào?

  • Gmail
  • Văn phòng 365
  • Outlook.com
  • Yahoo*
  • AOL*

Bạn cũng có thể nhắm mục tiêu ứng dụng khách trên máy tính để bàn cho Outlook, nhưng dù sao đi nữa sẽ sử dụng nút mặc định, bạn không cần phải nhắm mục tiêu đến một lần. (Wahoo!)

Bây giờ đến Nitty Gritty về cách nhắm mục tiêu vào từng ứng dụng email (và xem ghi chú cập nhật của chúng tôi cho Yahoo và AOL).

Gmail

Văn phòng 365

Bạn cũng có thể nhắm mục tiêu ứng dụng khách trên máy tính để bàn cho Outlook, nhưng dù sao đi nữa sẽ sử dụng nút mặc định, bạn không cần phải nhắm mục tiêu đến một lần. (Wahoo!)


                   	 


Gmail tự động thay đổi docType thành. Điều này được đặt liền kề với một phần tử kế thừa lớp và ID từ thẻ. Vì vậy, sử dụng các mục sau để nhắm mục tiêu trong Gmail:

Khối kiểu để ẩn mặc định và hiển thị nút Gmail trông giống như vậy:

Outlook.com và Office 365

Khối cho Outlook.com (Ứng dụng Web Outlook hoặc OWA) và Office 365 trông giống như khối Gmail với các sửa đổi nhỏ: lớp và chu kỳ của nút và URL liên kết để tính đến máy khách được nhắm mục tiêu mới.

Có thể có một số nhầm lẫn vì Office 365 có cả máy tính để bàn và máy khách webmail. Tuy nhiên, việc nhắm mục tiêu chỉ áp dụng cho máy khách WebMail Outlook để đảm bảo nút chính cho các liên kết máy khách trên máy tính để bàn đến tệp ICS trong khi ở máy khách webmail, đó là URL đến liên kết lịch.

Cả Outlook.com và Office 365 WebMail đều có tiền tố tên lớp với X_ nhưng không làm điều này trên bộ chọn thuộc tính. Vì vậy, khối của bạn có thể được nhắm mục tiêu với:

Càng và nó chỉ áp dụng cho khách hàng WebMail Outlook. Do đó, khối kiểu cho máy khách WebMail Outlook trông như thế này:

Yahoo và AOL

Yahoo từng có liên kết lịch, nhưng khi thử nghiệm cuối cùng của chúng tôi, liên kết sẽ đưa bạn đến một trang lịch để thêm một sự kiện nhưng không có chi tiết sự kiện nào được thực hiện nữa.

Điều này có thể là do một sự thay đổi tại Yahoo. Vì cả AOL và Yahoo đều thuộc sở hữu của Verizon, họ có thể đang hợp lý hóa các ứng dụng email để mang họ nhiều hơn với nhau.

Mặc dù bạn vẫn có thể nhắm mục tiêu cụ thể Yahoo và AOL, nhưng giờ đây họ chỉ hỗ trợ tệp ICS. Vì vậy, hãy tiết kiệm thời gian của mình và chỉ cần sử dụng mã bổ sung mặc định vào lịch lịch được chia sẻ ở đầu bước 3 trong bài đăng trên blog này cho đến khi thông báo thêm.

Xem các liên kết bổ sung vào lịch

Vì vậy, trong khi mã trên là đẹp, bạn có thể tự hỏi nó trông như thế nào khi được thực hiện trong một email thực tế. May mắn cho bạn, chúng tôi đã mã hóa nó trong Litmus Builder để bạn có thể thấy nút thêm vào lịch và các liên kết trông giống như trực tiếp và cách chúng hiển thị trên các ứng dụng và thiết bị email khác nhau.

Bây giờ hãy cung cấp cho khách sự kiện của bạn điều trị email đặc biệt này!

Hướng dẫn html add to calendar button - html thêm vào nút lịch

Đảm bảo rằng các email sự kiện của bạn trông đúng

Email bị hỏng có nghĩa là ít chuyển đổi hơn, giống như những người thêm sự kiện của bạn vào lịch của họ. Yike. Ngăn chặn lỗi email và bảo vệ danh tiếng thương hiệu của bạn với các bản xem trước email Litmus và hơn thế nữa.

Bắt đầu thử nghiệm miễn phí của bạn →

Bài đăng trên blog này ban đầu được xuất bản vào ngày 8 tháng 5 năm 2019, bởi Jaina Mistry. Nó đã được cập nhật vào ngày 5 tháng 2 năm 2021, để rõ ràng và với thông tin mới.

Làm thế nào để bạn thêm một nút lịch?

Để tạo một liên kết Thêm vào Lịch vào mẫu của bạn cho Lịch Google:..
Tạo và lưu sự kiện trong Lịch Google của riêng bạn ..
Bấm để chỉnh sửa sự kiện của bạn và chọn thêm các hành động bên cạnh nút Lưu ..
Nhấp vào xuất bản sự kiện trong bản thả xuống ..
Sao chép liên kết sự kiện ..
Thực hiện theo các bước bên dưới để thêm liên kết vào mẫu của bạn ..

Làm cách nào để tạo một liên kết để thêm một mục vào lịch?

Nếu bạn muốn đưa một liên kết "Thêm vào lịch" vào email của bạn để người nhận tương tác, hãy làm theo các bước sau:..
Tạo sự kiện trong ứng dụng Lịch Google.....
Thay đổi cài đặt chia sẻ lịch Google của bạn.....
Sao chép liên kết của sự kiện trong lịch của bạn.....
Viết email của bạn.....
Chèn liên kết dưới dạng siêu liên kết ..

Làm cách nào để thêm nút Lịch trong MailChimp?

Cách thêm các liên kết bổ sung vào calendar vào email MailChimp của bạn bằng cách sử dụng trình xây dựng cổ điển..
Tạo một tài khoản bổ sung.Đăng ký một tài khoản bổ sung nếu bạn chưa có.....
Tạo một sự kiện trong bổ sung.....
Sao chép các liên kết bổ sung đến calendar.....
Dán các liên kết bổ sung vào calendar trong email của bạn ..