Trong bài trước, "Cách Tạo Mẫu Email HTML Responsive", chúng ta đã khám phá nguyên tắc thiết kế và mã hóa mẫu email HTML đơn giản thích ứng đẹp mắt trên các thiết bị và email client khác nhau.
Tôi nhận được vài câu hỏi về việc thêm media vào mẫu email HTML.
Xây dựng trên nền tảng đó, tôi sẽ hướng dẫn bạn các cách khác nhau để thêm media vào mẫu email HTML. Việc thêm media như hình ảnh, video và âm thanh có thể tăng đáng kể tương tác và hiệu quả truyền thông của bạn.
Yêu Cầu
- Một mẫu email HTML đơn giản. Bạn có thể tạo theo hướng dẫn này.
Hình ảnh là loại media phổ biến nhất thêm vào email. Đây là cách đưa chúng vào mẫu email HTML:
- Trước khi thêm hình ảnh, đảm bảo nó được định kích thước và tối ưu cho web. Thông lệ phổ biến là giữ chiều rộng hình ảnh dưới 600 pixel để vừa với hầu hết email client mà không cần thu nhỏ. Ví dụ này dùng ảnh stock và resize thành 600 x 750 pixel như bên dưới.
Đây là ảnh chúng ta sẽ tải lên
- Tải ảnh lên máy chủ web tin cậy hoặc mạng phân phối nội dung (CDN). Bạn cần URL ổn định để tham chiếu trong email.
Ví dụ này dùng trang imgbb để tải ảnh. Nhấn "Start Uploading" và chọn ảnh.
imgbb là một trong các nền tảng lưu trữ ảnh miễn phí
Sau khi chọn ảnh, chọn "Don't Autodelete" và nhấn Upload.
Chọn Don't Autodelete từ dropdown
Sau khi tải lên, URL sẽ được tạo. Nhấn dropdown và chọn "HTML full linked"
Mã nhúng được tạo
- Sao chép mã HTML được tạo và chèn vào phần mong muốn trong mẫu email như hình dưới.
<a href="https://ibb.co/XpRp2N8"> <img src="https://i.ibb.co/q9Q9yX5/600x750.jpg" alt="600x750" border="0"></a>
Thoải mái thử các tùy chọn mã nhúng khác để kiểm tra hình ảnh hiển thị như thế nào trong mẫu email.
Dưới đây là kết quả sau khi chèn ảnh:
Ảnh đã chèn thành công vào mẫu email
Lưu ý: Luôn bao gồm thuộc tính alt để cung cấp văn bản thay thế khi hình ảnh không thể hiển thị.
Cách Nhúng Video Vào Mẫu Email
Phát video trực tiếp không được hỗ trợ trong hầu hết email client. Thay vào đó, bạn có thể nhúng thumbnail có thể nhấn liên kết đến video được lưu trữ trực tuyến:
- Tạo Thumbnail: Chụp một khung hình từ video hoặc tạo đồ họa tùy chỉnh đại diện nội dung video. Đây sẽ đóng vai trò placeholder. Ví dụ này dùng cùng ảnh làm thumbnail.
- Từ dropdown, chọn HTML thumbnail linked. Sao chép mã và dán vào mẫu email.
<a href="https://ibb.co/XpRp2N8"><img src="https://i.ibb.co/XpRp2N8/600x750.jpg" alt="600x750" border="0"></a>
- Liên Kết Đến Video: Sửa mã trên để dùng thumbnail như hình ảnh có thể nhấn liên kết đến URL video.
- Thay đổi URL trong
<a href="">thành link video như bên dưới.
<a href="https://youtu.be/UG8rjxYBfFg?si=xU2zqCtQW5-2z7nw"> <img src="https://i.ibb.co/XpRp2N8/600x750.jpg" alt="600x750" border="0"</a>
Đoạn HTML này tạo hình ảnh liên kết không viền. Và đây là cách nó xuất hiện trong mẫu Email:
Thumbnail liên kết sẽ xuất hiện như này
Cách Nhúng Video YouTube Vào Mẫu Email
Thay vào đó, bạn có thể nhúng trực tiếp video YouTube vào mẫu email. Cách làm:
- Vào YouTube chọn video muốn nhúng.
- Nhấn share → embed và một
iframesẽ được tạo. Ví dụ:
<iframe width="560" height="315" src="https://www.youtube.com/embed/UG8rjxYBfFg?si=nYBBM032nvBn5tNZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
- Sao chép
iframevà dán vào phần<td>của mã mẫu email HTML. Bạn sẽ có giao diện như sau:
Ví dụ video YouTube trong mẫu email
Cách Thêm Âm Thanh Vào Mẫu Email
Thêm file âm thanh trực tiếp vào email cũng không được hỗ trợ bởi hầu hết email client. Tương tự video, bạn có thể đưa link đến file âm thanh:
- Lưu Trữ File Âm Thanh: Tải file âm thanh lên nền tảng hoặc máy chủ phù hợp. Có nhiều nền tảng âm thanh như Google Drive, website riêng, YouTube, SoundCloud, v.v.
- Ví dụ này dùng nền tảng audio.com. Chỉ cần tạo tài khoản bằng cách nhấn "join now for free" hoặc đăng nhập nếu đã có tài khoản.
Nhấn upload và chọn file .mp3 sẽ được lưu trong tài khoản. Khi âm thanh hoàn tất, nhấn biểu tượng share.
- Điều này đưa bạn đến vài tùy chọn để sao chép link hoặc nhúng link:
Nhấn embed, bạn sẽ thấy preview âm thanh sẽ xuất hiện như thế nào. Sao chép mã và dán vào phần mẫu email.
Mã được tạo bởi audio.com có thể nhúng vào mẫu email
Bạn cũng có thể bỏ div chỉ dùng iframe. Thoải mái bỏ các phần không muốn xuất hiện trong email và tùy chỉnh theo ý thích.
Đây là mã:
<div style="height: 228px; width: 600px;"> <iframe src="https://audio.com/embed/audio/1797114509131910?theme=image" style="display:block; border-radius: 6px; border: none; height: 204px; width: 600px;"></iframe><a href='https://audio.com/nyayic-fanny' style="text-align: center; display: block; color: #A4ABB6; font-size: 12px; font-family: sans-serif; line-height: 16px; margin-top: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">@nyayic-fanny</a> </div>
Đây là kết quả cuối cùng:
Âm thanh sẽ xuất hiện như này trong mẫu email
Sử Dụng Thẻ audio
Ngoài nhúng, chúng ta có thể dùng thẻ audio và thêm URL nguồn âm thanh như dưới:
<p>Audio added via audio tag</p> <br><br> <audio controls="controls"> <source src="https://audio.com/nyayic-fanny/audio/past-life-jvna.mp3"> <p>? Listen: <a href="https://audio.com/nyayic-fanny/audio/past-life-jvna.mp3">Audio</a> (mp3)</p> </audio>
Chỉ cần thay URL thành audio url của bạn. Và đây là giao diện toàn bộ sửa đổi.
Mẫu email HTML đã sửa đổi
Lưu ý: Hotmail và các client không hỗ trợ HTML5 sẽ không hoạt động!
Khi tích hợp media vào email HTML, hãy cân nhắc các mẹo sau để tối ưu tương thích và trải nghiệm người dùng:
- Luôn dùng URL tuyệt đối đầy đủ cho hình ảnh, video, âm thanh để đảm bảo tải đúng trên mọi email client.
- Kiểm Tra Email: Các email client hiển thị nội dung HTML khác nhau. Dùng công cụ như Litmus hoặc Email on Acid để kiểm tra email hiển thị trên các nền tảng.
- Chú Ý Thời Gian Tải: Tối ưu kích thước file media để email tải nhanh, quan trọng để giữ chú ý người nhận và cải thiện tương tác.
- Cân Nhắc Khả Năng Truy Cập: Cung cấp alt text mô tả cho hình ảnh và caption hoặc transcript cho nội dung âm thanh và video.
Mặc dù có giới hạn về những gì email client hỗ trợ, dùng hình ảnh liên kết cho video và file âm thanh cung cấp giải pháp thân thiện người dùng hoạt động trên hầu hết nền tảng.
Luôn đảm bảo kiểm tra email kỹ lưỡng và tuân thủ best practice để đảm bảo trải nghiệm người dùng mượt mà và hấp dẫn.
Happy Coding!
Học lập trình miễn phí. Chương trình mở của freeCodeCamp đã giúp hơn 40.000 người tìm được việc làm lập trình viên. Bắt đầu ngay