Cấu hình các lớp

Lớp Văn bản

Lớp văn bản sử dụng để hiển thị 1 đoạn văn bản trong ảnh cá nhân hóa, có thể là họ tên, ngày tháng, số điện thoại, địa chỉ,... hoặc 1 thuộc tính của khách hàng trên chatbot

Vị trí: Điều chỉnh vị trí của lớp văn bản so với hình ảnh (lề trái và lề trên cách bao nhiêu px)

Kích thước: Điều chỉnh chiều rộng và chiều cao của lớp văn bản

Bạn có thể căn lớp văn bản ra giữa hình ảnh bằng cách cho lề trái bằng 0px và chiều rộng lớp văn bản bằng chiều rộng của hình ảnh

Căn lề theo trang: Tự động căn chỉnh vị trí của lớp văn bản (bỏ qua lề trái, phải)

  • Căn lề theo chiều dọc:

    • Căn lề lên trên cùng theo chiều dọc

    • Căn lề ra giữa theo chiều dọc

    • Căn lề xuống dưới cùng theo chiều dọc

  • Căn lề theo chiều ngang:

    • Căn lề sang bên trái theo chiều ngang

    • Căn lề ra giữa theo chiều ngang

    • Căn lề sang phải theo chiều ngang

Bạn có thể sử dụng kết hợp các kiểu căn lề với nhau, ví dụ:

Căn lề trên cùng theo chiều dọc + sang trái theo chiều ngang để tự căn góc trên bên trái

Căn lề dưới theo chiều dọc + sang phải theo chiều ngang để tự căn góc dưới bên phải

Giá trị: Là nội dung hiển thị của văn bản, bạn có thể nhập 1 nội dung cụ thể hoặc sử dụng thuộc tính của khách hàng, ví dụ {{facebook.name}} (tên Facebook của khách hàng), {{phone}} (số điện thoại), {{email}} (email),... để tạo ra trải nghiệm cá nhân hóa cho từng khách hàng

Sử dụng nội dung cụ thể
Sử dụng nội dung là thuộc tính

Phông chữ và Cỡ chữ: Điều chỉnh phông và kích thước của chữ phù hợp với hình ảnh

Căn lề theo textbox: Tương tự căn lề theo trang, bạn có thể để căn để văn bản hiển thị ở trên, dưới, trái, phải, giữa của textbox

Lớp Hình ảnh

Lớp hình ảnh sử dụng để hiển thị hình ảnh, bạn có thể sử dụng thuộc tính {{facebook.picture}} để hiển thị avatar của khách hàng hoặc upload để sử dụng hình ảnh cụ thể

Ví trí, kích thước (chiều cao, chiều rộng) và căn lề theo trang: Tương tự lớp văn bản

Giá trị:

  • Chọn file để tải hình ảnh từ máy tính lên SmaxAI và sử dụng

  • Chọn attribute để chọn thuộc tính trên SmaxAI để hiển thị

Sử dụng hình ảnh tải lên từ máy tính
Sử dụng thuộc tính

Hình dáng:

  • Normal: Hình ảnh sẽ hiển thị theo tỉ lệ chiều rộng và chiều cao mà bạn cài đặt

  • Circle: Hình ảnh sẽ hiển thị theo hình tròn theo chiều dài của 1 cạnh

  • Squece: Hình ảnh sẽ tự căn chiều rộng/chiều cao theo chiều còn lại để tạo thành hình vuông (ưu tiên cạnh nào có độ dài ngắn hơn)

Viền: Thêm viền cho hình ảnh, bạn có thể tùy chỉnh màu sắc hoặc độ dày của viền phù hợp

Lớp QR Code

Lớp QR Code dùng để chuyển một đoạn văn bản (có thể là URL) thành mã QR

Khi sử dụng QR Code để chuyển URL, khi quét trình duyệt sẽ tự động mở URL đó

Ví trí, kích thước (chiều cao, chiều rộng) và căn lề theo trang: Tương tự lớp văn bản

Giá trị: Giá trị của văn bản hoặc URL muốn chuyển sang thành mã QR, bạn có thể nhập nội dung cụ thể hoặc sử dụng thuộc tính

Màu sắc: Màu sắc hiển thị của QR Code được tạo ra

Lớp Bar Code

Sử dụng tương tự lớp QR Code

Sắp xếp lớp

Lưu ý khi tạo các lớp trong ảnh cá nhân hóa, bạn cần sắp xếp thứ tự các lớp hợp lý để không bị che mất hình ảnh. Các lớp sẽ được ưu tiên hiển thị theo thứ tự trừ trên xuống, ví dụ trong ảnh dưới:

  • Lớp Text được sắp xếp trên cùng nên sẽ hiển thị đè lên 2 lớp Image phía dưới

  • Lớp Image số 2 (hình con mèo bên phải) được sắp xếp ở trên lớp Image số 3 (hình con mèo bên trái) nên sẽ đè lên và che mất 1 phần hình ảnh của lớp phía dưới

Last updated