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

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:

     Add to your Calendar
     

          Outlook.com |
                       	 
          Office 365 |
                       	 
          Google
     

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

     Add to your Google Calendar
                       	 
     

          Outlook.com |
                       	 
          Office 365 |
                       	 
          Apple Mail/Outlook Desktop
     
                   	 

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!

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?

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

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