Thiết kế email trong trình soạn thảo

Hướng dẫn thao tác

Dành cho:: Nhà xuất bản và marketer
Cần quyền:: campaigns:edit
Trong ứng dụng:: Chiến dịch, rồi Sửa

Trình soạn thảo là trình soạn email kéo thả dựa trên MJML của ReputeCast: bạn dựng email từ các khối trên khung thiết kế, và mỗi thay đổi đồng thời là mã MJML mà bạn đọc và sửa được, được biên dịch thành HTML hiển thị đúng trong Outlook, Gmail và Apple Mail.

Trước khi bắt đầu

Chỉnh sửa cần campaigns:edit. Nếu không có quyền này, trình soạn thảo mở ở chế độ chỉ đọc: bạn xem, xem trước và gửi thử cho chính mình được, nhưng không thay đổi được gì.
Chiến dịch sửa được khi đang là bản nháp, chờ phê duyệt, đã phê duyệt hoặc đã lên lịch. Khi chiến dịch đang gửi hoặc đã gửi, nội dung bị khóa; hãy nhân bản chiến dịch để dùng lại nội dung.
Mở trình soạn thảo từ Chiến dịch: chọn tên một bản nháp hoặc Sửa trên hàng của nó. Chiến dịch mới mở ở thư viện mẫu.

Làm quen với giao diện

Trình soạn thảo đang sửa Weekly Digest #142: bảng khối ở bên trái, email trên khung thiết kế ở giữa, bảng thuộc tính Kiểu ở bên phải, và các nút Xem trước, Gửi thử, Kiểm tra và gửi ở phía trên. — Bảng bên trái: **Khối** để thêm nội dung, **Lớp** cho cây gồm các phần, cột và thành phần, và **Mẫu**.

Khung thiết kế, với nút chuyển thiết bị, nút chuyển chế độ xem và nút chuyển biến thể A/B phía trên email.

Bảng thuộc tính của thành phần đang chọn: **Kiểu** và **Cài đặt**, cùng các tab chỉ xuất hiện khi phù hợp.

Các thao tác: trợ lý AI, **Xem trước**, **Gửi thử** và **Kiểm tra và gửi**.

Hàng phía trên khung thiết kế chứa tiêu đề, dòng xem trước và bản xem trước hộp thư, cho thấy hai dòng này hiển thị thế nào trong Gmail (khi khung thiết kế ở chế độ máy tính) hoặc iPhone Mail (khi ở chế độ di động). Phần đầu trang hiện tên chiến dịch, trạng thái và phiên bản (ví dụ “Bản nháp · tự lưu lúc 09:41 · v12”), cùng các ô chọn người nhận, người gửi và tuyến.

Dựng email

Viết Tiêu đề và Dòng xem trước. Kiểm tra nội dung đánh dấu tiêu đề có dấu hiệu spam ngay khi bạn gõ; xem sửa cảnh báo nội dung.
Thêm khối từ Khối: kéo một ô lên khung thiết kế, hoặc chọn ô đó để chèn. Khối bố cục được chèn sau phần đang chọn; khối nội dung (Văn bản, Hình ảnh, Nút và các khối tương tự) được chèn vào cột đang chọn, nên hãy chọn một cột trước. Dùng Tìm khối để lọc các ô.
Chọn bất kỳ thành phần nào trên khung thiết kế và thay đổi nó trong bảng thuộc tính. Kiểu chứa màu sắc, kiểu chữ, khoảng đệm, viền và căn lề; Cài đặt chứa liên kết, chữ trên nút, văn bản thay thế của hình ảnh, vai trò văn bản (đoạn văn hoặc cấp đề mục), quy tắc hiển thị và tên hiện trong Lớp. Nhấp đúp vào văn bản để sửa trực tiếp trên khung thiết kế.
Chuyển khung thiết kế giữa Máy tính · 600 và Di động · 375. Các cột xếp chồng lên nhau khi chiều rộng dưới 480 px, đúng như cách MJML hiển thị, và bảng thuộc tính hiện các mục kiểm tra cho di động (nút cao ít nhất 44 px, chữ cỡ ít nhất 14 px).
Cá nhân hóa văn bản bằng các thẻ như {{ first_name | default: "there" }}: chọn Chèn thẻ cá nhân hóa trên thanh công cụ văn bản. Tham chiếu cá nhân hóa bằng Liquid liệt kê mọi biến và bộ lọc.
Chọn Xem trước để xem email trong từng ứng dụng thư, rồi gửi thử cho chính mình.
Chọn Kiểm tra và gửi để lưu và mở Độ sẵn sàng gửi.

Khối

Nhóm	Khối	Ghi chú
Bố cục · MJML	1 cột, 2 cột, 3 cột, Khung bao, Hero, Nhóm	Các phần chứa cột.
Nội dung · MJML	Văn bản, Hình ảnh, Nút, Đường kẻ, Khoảng trống, Mạng xã hội, Thanh điều hướng, HTML thô, Bảng	Nằm bên trong một cột.
Khối ReputeCast	Đầu thư + logo, Thẻ bài viết, Thẻ sản phẩm, Chân thư + hủy đăng ký, Bình chọn, phần đã lưu	Chân thư chứa địa chỉ bưu chính của bạn và các liên kết hủy đăng ký, tùy chọn và xem trên trình duyệt. Xem bình chọn.
Tăng trưởng	Giới thiệu, Đề xuất	Xem chương trình giới thiệu và đề xuất bản tin khác.
Kiếm tiền	Nhà tài trợ, Nâng cấp	Xem tài trợ và gói trả phí.

Khối Lưới sản phẩm xuất hiện khi có cửa hàng được kết nối (Shopify hoặc WooCommerce), và khối Mục nguồn cấp xuất hiện trong mẫu bản tin định kỳ. Nếu email chưa có chân thư, nhóm Khối ReputeCast được đưa lên đầu và ô chân thư được viền đỏ.

Hình ảnh lấy từ thư viện hình ảnh: tệp PNG, JPEG hoặc GIF tối đa 5 MB, được phục vụ từ địa chỉ ReputeCast của bạn nên hiển thị được trong mọi hộp thư. URL hình ảnh bạn dán vào phải bắt đầu bằng https://.

Các tab của bảng thuộc tính

Tab Kiểu và Cài đặt luôn có mặt. Khi chưa chọn gì, hai tab này nhắc bạn chọn một thành phần; bên dưới là phần tóm tắt hình ảnh, liên kết và cảnh báo của phần đang chọn.
Tab Khả năng vào hộp thư xuất hiện, kèm số lượng, khi kiểm tra nội dung báo một mục Chặn hoặc một cảnh báo. Mỗi hàng có các nút sửa nhanh bằng một lần nhấp; xem sửa cảnh báo nội dung trước khi gửi.
Tab Khả năng tiếp cận xuất hiện khi khung thiết kế đã có nội dung; xem kiểm tra khả năng tiếp cận của email.
Tab Web xuất hiện khi trang web bản tin của bạn đang bật, để đăng chiến dịch thành một bài viết.

Trong Cài đặt, mục Hiển thị có hai điều khiển riêng: ẩn một thành phần trên di động hoặc trên máy tính (Outlook cho Windows bỏ qua thiết lập này), và ai được thấy một khối.

Sửa MJML hoặc HTML

Nút chuyển chế độ xem phía trên khung thiết kế có ba chế độ:

Trực quan là khung thiết kế.
MJML hiện mã nguồn MJML, tức nguồn gốc của email, bên cạnh HTML đã biên dịch. Sửa mã, rồi chọn Áp dụng lên khung thiết kế; rời khỏi chế độ này cũng áp dụng thay đổi. Định dạng sắp xếp lại mã cho gọn và Nhập MJML thay mã bằng nội dung của một tệp.
HTML chỉ hiện HTML đã biên dịch, ở chế độ chỉ đọc: đây là những gì nhà cung cấp gửi thư nhận được, trước khi thêm liên kết theo dõi và pixel theo dõi lượt mở. Dùng Sao chép HTML đã biên dịch để mang HTML đi nơi khác.

Chế độ MJML: mã nguồn MJML ở bên trái, HTML đã biên dịch ở bên phải, và bảng Biên dịch báo thời gian biên dịch, lỗi và cảnh báo.

Bảng bên phải có hai tab. Biên dịch báo thời gian biên dịch và mọi lỗi hoặc cảnh báo kèm số dòng, bao gồm các cột cộng lại vượt quá 100% và hình ảnh rộng hơn cột chứa nó. Thẻ liệt kê các thẻ cá nhân hóa; chọn một thẻ để sao chép.

Khi bạn áp dụng MJML không phân tích được (một thẻ chưa đóng, hoặc thiếu <mj-body>), trình soạn thảo báo lỗi kèm số dòng. Khung thiết kế giữ phiên bản tốt gần nhất cho đến khi bạn sửa mã hoặc hoàn tác thay đổi, và bạn không chuyển được chế độ xem cho đến khi mã biên dịch được. Tiêu đề và dòng xem trước luôn đồng bộ với <mj-title> và <mj-preview> trong phần head của MJML.

Để đưa HTML có sẵn vào, hãy dùng Nhập MJML hoặc HTML trong thư viện mẫu. HTML được đặt vào một phần HTML thô duy nhất: email được gửi nguyên trạng, nhưng bạn không sửa được theo từng khối.

Xem trước email

Chọn Xem trước ở phần đầu trang. Bản xem trước hiện email như cách Gmail trên web, Outlook cho Windows, Apple Mail trên iOS và Yahoo sẽ hiển thị, mỗi ứng dụng ở cả chế độ sáng và tối, với chiều rộng máy tính hoặc di động.

Bản xem trước: các thẻ Gmail trên web ở chế độ sáng và tối, nút chuyển ứng dụng thư và thiết bị, và bảng bên với bản xem trước hộp thư, giá trị cá nhân hóa và các biến thể A/B.

Bên dưới các thẻ, mục Kiểm tra chế độ tối đánh dấu logo không có nền trong suốt và văn bản bị giảm độ tương phản khi ứng dụng thư đảo màu, và một thẻ hiện phiên bản văn bản thuần. Bảng bên chứa bản xem trước hộp thư kèm độ dài tiêu đề và dòng xem trước, các giá trị Cá nhân hóa của liên hệ bạn đang xem trước, và các biến thể A/B.

Xem trước dưới dạng điền vào email dữ liệu của một liên hệ thật trong danh sách người nhận, một liên hệ không có tên (để kiểm tra giá trị dự phòng) hoặc một liên hệ Đang hoạt động ngẫu nhiên. Chọn liên hệ thật cần subscribers:view; nếu không có quyền này, bạn thấy một liên hệ mẫu.

Gửi thử

Chọn Gửi thử. Trình soạn thảo lưu trước, nên thư gửi thử luôn là phiên bản đã lưu.
Trong Gửi thư thử, đánh dấu các thành viên của không gian làm việc (địa chỉ của bạn đã được đánh dấu sẵn) hoặc nhập địa chỉ khác. Nếu email có nhiều ngôn ngữ nội dung, hãy chọn ngôn ngữ của thư gửi thử, hoặc mỗi ngôn ngữ một thư.
Chọn Gửi.

Mỗi lần gửi thử đến tối đa 10 địa chỉ qua tuyến của luồng Hệ thống, với “[Test]” trước tiêu đề và một ghi chú dưới email cho biết đây là thư thử. Các thẻ được điền bằng dữ liệu của liên hệ xem trước mặc định, không phải của từng người nhận, và các liên kết hủy đăng ký và tùy chọn là liên kết thử. Nếu không có campaigns:send, bạn chỉ gửi thử được cho chính mình: nút hiện Gửi thử cho tôi.

Mũi tên cạnh nút còn có lựa chọn kiểm tra vị trí thư, cần quyền placement:run.

Tự lưu và lịch sử phiên bản

Trình soạn thảo tự lưu: cứ 30 giây một lần khi có thay đổi, và 2 giây sau khi bạn thêm hoặc xóa một phần hay một thành phần. Trình soạn thảo không lưu khi bạn đang gõ trong một khối văn bản. Nhấn ⌘ S (Ctrl S trên Windows và Linux) để lưu một phiên bản có tên bất kỳ lúc nào; không có nút Lưu.

Mỗi lần lưu là một phiên bản mới. Nút Lịch sử phiên bản trên thanh trạng thái dưới khung thiết kế liệt kê 50 phiên bản gần nhất, kèm người lưu và những gì đã thay đổi. Đánh dấu hai phiên bản và chọn So sánh hai phiên bản để xem khác biệt từng dòng của MJML, tiêu đề và dòng xem trước, hoặc chọn Khôi phục trên một phiên bản cũ. Khôi phục sẽ lưu phiên bản đó thành một phiên bản mới, nên không có gì bị xóa.

Khi người khác lưu trước

Nếu một đồng đội lưu trong lúc bạn đang sửa, một thẻ xung đột xuất hiện phía trên khung thiết kế, cho biết ai đã lưu phiên bản nào và mỗi người đã thay đổi những phần nào. Bạn chọn một trong các cách:

giữ bản của bạn, được lưu thành phiên bản tiếp theo đè lên bản của họ,
tải phiên bản của họ, thay thế những chỉnh sửa chưa lưu của bạn, hoặc
so sánh hai bản trước.

Dù chọn cách nào cũng không mất gì: cả hai phiên bản đều nằm trong lịch sử.

Khi bạn mất kết nối

Nếu lần lưu thất bại vì mất kết nối, trình soạn thảo giữ các chỉnh sửa của bạn trong tab trình duyệt và thử lại mỗi 10 giây. Hãy để tab mở cho đến khi lưu xong, hoặc chọn Thử lại ngay. Tải MJML xuống để dự phòng lưu MJML thành một tệp mà bạn có thể nhập lại sau.

Trên điện thoại

Trên điện thoại, các bảng xếp chồng bên dưới khung thiết kế và các thao tác ở phần đầu trang xuống dòng thứ hai. Email rộng 600 px được thu nhỏ cho vừa màn hình; hãy chuyển sang Di động · 375 để xem đúng kích thước.

Phím tắt

Nhấn ⌘ / trong trình soạn thảo để xem danh sách phím tắt: lưu một phiên bản, hoàn tác và làm lại, sao chép, dán và xóa thành phần đang chọn, in đậm và in nghiêng khi sửa văn bản, và Esc để dừng sửa. ⌘ Enter lưu và mở Độ sẵn sàng gửi. Danh sách đầy đủ có trong tham chiếu phím tắt.

Mặc định và giới hạn

Thiết lập	Mặc định	Cách thay đổi
Tự lưu	Every 30 s while there are unsaved changes, and 2 s after a section or element is added or removed	Cố định
Số phiên bản tự lưu được giữ	300	Cố định; phiên bản đầu tiên và các phiên bản lưu bằng ⌘S, khôi phục và nhập luôn được giữ
Cảnh báo Gmail cắt bớt thư	Warns from 85 KB of HTML; Gmail clips at 102 KB	Cố định
Chiều rộng khung thiết kế và bản xem trước	Desktop 600 px, mobile 375 px	Nút chuyển thiết bị trong trình soạn thảo
Độ dài tiêu đề và dòng xem trước	Subject 998 characters, preheader 500	Cố định

Kiểm tra kết quả

Phần đầu trang hiện “tự lưu” kèm thời gian, và số phiên bản tăng lên sau các thay đổi của bạn.
Thư gửi thử đến với “[Test]” trong tiêu đề, được gửi qua tuyến Hệ thống của bạn.
Kiểm tra và gửi mở Độ sẵn sàng gửi mà không có mục Chặn nào từ kiểm tra nội dung.

Khắc phục sự cố

Khung thiết kế không nhận khối Văn bản hoặc Hình ảnh. Khối nội dung phải nằm trong một cột. Hãy chọn một cột trên khung thiết kế, hoặc kéo khối vào một cột.
Không sửa được gì. Chiến dịch đang gửi hoặc đã gửi, hoặc vai trò của bạn thiếu campaigns:edit. Hãy nhân bản chiến dịch đã gửi để dùng lại.
Nút Kiểm tra và gửi hiện Yêu cầu phê duyệt. Vai trò của bạn thiếu campaigns:send; xem yêu cầu phê duyệt cho lượt gửi rủi ro.
Gửi thử thất bại với thông báo “chưa có nhà cung cấp gửi thư nào gửi được thư này”. Thư gửi thử đi qua luồng Hệ thống. Hãy kết nối một nhà cung cấp gửi thư và gán tuyến cho luồng Hệ thống.
Không thấy nút hoàn tác và làm lại. Khi có cảnh báo nội dung, thanh công cụ hiện số cảnh báo thay cho hai nút này. ⌘ Z và ⇧ ⌘ Z vẫn hoạt động.
“Hãy sửa MJML trước”. Chế độ MJML đang có lỗi. Hãy đến dòng được nêu trong thông báo, hoặc hoàn tác thay đổi.