Định dạng HTML và Tạo Email Đẹp Mắt trong Power Automate

Gửi email bằng Power Automate (Microsoft Power Platform) không chỉ dừng lại ở việc truyền tải thông điệp mà còn cần chú trọng đến yếu tố thẩm mỹ để tạo ấn tượng với người nhận. Dưới đây là hướng dẫn giúp bạn sử dụng HTML để định dạng và làm đẹp email.

Mục lục

1 Bước 1: Tạo nội dung HTML cơ bản
2 Bước 2: Sử dụng HTML trong Power Automate
3 Mẹo thiết kế email đẹp mắt
4 Kết luận

Bước 1: Tạo nội dung HTML cơ bản

HTML giúp bạn kiểm soát cấu trúc, phông chữ, màu sắc và kiểu dáng của email. Một ví dụ cơ bản:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            color: #333;
            padding: 20px;
        }
        .email-container {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #0078d4;
        }
        a {
            color: #0078d4;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        .footer {
            font-size: 12px;
            color: #999;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="email-container">
        <h1>Chào mừng bạn đến với Power Automate!</h1>
        <p>Chúng tôi rất vui mừng vì bạn đã sử dụng dịch vụ của chúng tôi.</p>
        <p>Hãy truy cập <a href="https://powerautomate.microsoft.com">Power Automate</a> để khám phá thêm các tính năng.</p>
        <p>Trân trọng,<br>Đội ngũ Power Automate</p>
    </div>
    <div class="footer">
        Bạn nhận được email này vì bạn đã đăng ký Power Automate.
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f9f9f9;

color: #333;

padding: 20px;

}

.email-container {

background-color: #ffffff;

padding: 20px;

border-radius: 8px;

box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);

}

h1 {

color: #0078d4;

}

a {

color: #0078d4;

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

.footer {

font-size: 12px;

color: #999;

text-align: center;

margin-top: 20px;

}

</style>

</head>

<body>

<h1>Chào mừng bạn đến với Power Automate!</h1>

<p>Chúng tôi rất vui mừng vì bạn đã sử dụng dịch vụ của chúng tôi.</p>

<p>Hãy truy cập <a href="https://powerautomate.microsoft.com">Power Automate</a> để khám phá thêm các tính năng.</p>

<p>Trân trọng,<br>Đội ngũ Power Automate</p>

</div>

Bạn nhận được email này vì bạn đã đăng ký Power Automate.

</div>

</body>

</html>

Bước 2: Sử dụng HTML trong Power Automate

Tạo một Flow trong Power Automate với hành động “Send an Email (V2)”.
Trong trường “Body”, chuyển chế độ soạn thảo sang HTML.
Dán mã HTML bạn đã tạo vào ô “Body”

Mẹo thiết kế email đẹp mắt

Đơn giản và dễ đọc: Tránh quá nhiều màu sắc hoặc phông chữ phức tạp.
Tương thích trên thiết bị di động: Sử dụng kiểu CSS để đảm bảo email hiển thị đẹp trên mọi thiết bị.
Kiểm tra trước khi gửi: Sử dụng các công cụ như Litmus hoặc Email on Acid để xem trước email.

Kết luận

Việc sử dụng HTML trong Power Automate không chỉ giúp email của bạn chuyên nghiệp hơn mà còn tạo ấn tượng với người nhận. Hãy tận dụng sức mạnh của HTML để nâng tầm giao tiếp qua email!