Cách Tạo Mẫu Mail Chuyên Nghiệp Với Bootstrap và Gửi Email Với Apps Script

Bởi

Trong thời đại số hiện nay, việc giao tiếp qua email trở nên vô cùng quan trọng. Một mẫu email chuyên nghiệp không chỉ giúp bạn truyền tải thông điệp một cách rõ ràng mà còn tạo ấn tượng tốt với người nhận. Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu cách tạo mẫu email đẹp mắt sử dụng Bootstrap và cách gửi email đó bằng Google Apps Script.

1. Tại Sao Nên Sử Dụng Bootstrap Cho Mẫu Email?

Bootstrap là một framework CSS phổ biến giúp bạn xây dựng giao diện web nhanh chóng và dễ dàng. Việc sử dụng Bootstrap để tạo mẫu email mang lại nhiều lợi ích:

  • Thiết kế Responsive: Mẫu email sẽ tự động điều chỉnh kích thước trên các thiết bị khác nhau.
  • Tiết kiệm thời gian: Bootstrap cung cấp nhiều thành phần giao diện có sẵn, giúp bạn không phải viết mã từ đầu.
  • Dễ dàng tùy chỉnh: Bạn có thể dễ dàng thay đổi màu sắc, phông chữ và bố cục theo ý muốn.
Cách Tạo Mẫu Mail Chuyên Nghiệp Với Bootstrap và Gửi Email Với Apps Script

2. Cách Tạo Mẫu Email Với Bootstrap

Bước 1: Cài Đặt Bootstrap

Để bắt đầu, bạn cần thêm Bootstrap vào mẫu email của mình. Bạn có thể sử dụng CDN để dễ dàng tích hợp:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <title>Mẫu Email Chuyên Nghiệp</title>
</head>
<body>

Bước 2: Tạo Nội Dung Email

Tiếp theo, bạn sẽ tạo nội dung cho email. Dưới đây là một ví dụ về mẫu email đơn giản:

<div class="container mt-5">
    <div class="card">
        <div class="card-header text-center">
            <h2>Chào Mừng Đến Với Dịch Vụ Của Chúng Tôi!</h2>
        </div>
        <div class="card-body">
            <p>Chúng tôi rất vui khi được phục vụ bạn. Dưới đây là thông tin chi tiết về dịch vụ mà bạn đã đăng ký:</p>
            <ul>
                <li>Dịch vụ 1: Mô tả ngắn gọn</li>
                <li>Dịch vụ 2: Mô tả ngắn gọn</li>
                <li>Dịch vụ 3: Mô tả ngắn gọn</li>
            </ul>
            <p>Cảm ơn bạn đã chọn chúng tôi!</p>
        </div>
        <div class="card-footer text-center">
            <p>Liên hệ với chúng tôi qua email: <a href="mailto:[email protected]">[email protected]</a></p>
        </div>
    </div>
</div>

Bước 3: Đóng Thẻ HTML

Cuối cùng, bạn cần đóng thẻ HTML để hoàn tất mẫu email:

</body>
</html>

Mẫu Email Hoàn Chỉnh

Dưới đây là mẫu email hoàn chỉnh:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <title>Mẫu Email Chuyên Nghiệp</title>
</head>
<body>
    <div class="container mt-5">
        <div class="card">
            <div class="card-header text-center">
                <h2>Chào Mừng Đến Với Dịch Vụ Của Chúng Tôi!</h2>
            </div>
            <div class="card-body">
                <p>Chúng tôi rất vui khi được phục vụ bạn. Dưới đây là thông tin chi tiết về dịch vụ mà bạn đã đăng ký:</p>
                <ul>
                    <li>Dịch vụ 1: Mô tả ngắn gọn</li>
                    <li>Dịch vụ 2: Mô tả ngắn gọn</li>
                    <li>Dịch vụ 3: Mô tả ngắn gọn</li>
                </ul>
                <p>Cảm ơn bạn đã chọn chúng tôi!</p>
            </div>
            <div class="card-footer text-center">
                <p>Liên hệ với chúng tôi qua email: <a href="mailto:[email protected]">[email protected]</a></p>
            </div>
        </div>
    </div>
</body>
</html>

3. Gửi Email Với Google Apps Script

Sau khi đã tạo xong mẫu email, bước tiếp theo là gửi email này bằng Google Apps Script.

Bước 1: Mở Google Apps Script

  1. Truy cập vào Google Drive và tạo một tài liệu mới.
  2. Chọn “Mở bằng” > “Google Apps Script”.

Bước 2: Viết Script Gửi Email

Sử dụng đoạn mã sau để gửi email:

function sendEmail() {
    var emailTo = "[email protected]";
    var subject = "Thông tin dịch vụ của bạn";
    var htmlBody = HtmlService.createHtmlOutputFromFile("emailTemplate").getContent();

    MailApp.sendEmail({
        to: emailTo,
        subject: subject,
        htmlBody: htmlBody
    });
}

Bước 3: Tạo File HTML

  1. Trong Google Apps Script, tạo một file mới với tên emailTemplate.html.
  2. Dán nội dung mẫu email mà bạn đã tạo ở trên vào file này.

Bước 4: Chạy Script

  1. Lưu lại và chạy hàm sendEmail.
  2. Kiểm tra hộp thư đến của người nhận để xác nhận email đã được gửi thành công.

4. Kết Luận

Việc tạo mẫu email chuyên nghiệp với Bootstrap và gửi email bằng Google Apps Script không chỉ giúp bạn tiết kiệm thời gian mà còn nâng cao hiệu quả giao tiếp. Với những bước đơn giản trên, bạn có thể tạo ra những mẫu email ấn tượng và gửi đến khách hàng hoặc đối tác của mình một cách dễ dàng. Hãy thử ngay hôm nay và trải nghiệm sự khác biệt!

Hy vọng bài viết này sẽ hữu ích cho bạn trong việc tạo dựng các mẫu email chuyên nghiệp. Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại để lại câu hỏi dưới bài viết nhé!

Dịch vụ lập trình ứng dụng

🎯 Lập trình API, Python, Node JS, Telegram Bot, Automate Workflow, Power Apps and Apps Script. Ứng dụng Web App, API với Apps Script vào bài toán thực tế trong doanh nghiệp.

📞 +84 78 600 5534 (Zalo, WhatsApp, Telegram)

💻 Github

🌏 appscript.online

Viết một bình luận