> For the complete documentation index, see [llms.txt](https://tailieu.smax.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tailieu.smax.ai/extend-modules/customize-image/cau-hinh-cac-lop.md).

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

{% hint style="warning" %}
Lớp là các phần tử hiển thị trong ảnh cá nhân hóa của khách hàng, ví dụ: hình ảnh, văn bản, mã QR, barcode,...
{% endhint %}

## Lớp Văn bản

{% hint style="info" %}
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
{% endhint %}

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)

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2Fp4exGWsz3qvK85xbXLDJ%2Fimage%20(1).png?alt=media&amp;token=902f61ae-d897-4b1a-8c72-ab26e15f242b" alt=""><figcaption></figcaption></figure>

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

{% hint style="info" %}
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
{% endhint %}

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2FlUM0aSSsdtdQPyuVJGJH%2Fimage%20(1).png?alt=media&amp;token=dc076cf9-f197-4334-850c-b3693bc79b44" alt=""><figcaption></figcaption></figure>

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

{% hint style="info" %}
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
{% endhint %}

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2FJDGfkDYRBag1g8mDyEY3%2Fimage%20(1).png?alt=media&amp;token=cd33fa87-52cf-425d-af23-d55fd6064f75" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2FaZOaUvvPdP2sR6SjOdNz%2Fimage%20(1).png?alt=media&amp;token=884d8515-32c6-4f07-9d9a-fc34758b01a2" alt=""><figcaption><p>Sử dụng nội dung cụ thể</p></figcaption></figure>

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2Flqg8gOX2v5Hqk0ov4o8c%2Fimage%20(1).png?alt=media&amp;token=85378996-ef34-4caa-a99e-f2d5603e17e9" alt=""><figcaption><p>Sử dụng nội dung là thuộc tính</p></figcaption></figure>

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

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2FUHyiztKg7WY2zbRjIKzS%2Fimage%20(1).png?alt=media&amp;token=85df2b3c-5b6f-4a6e-bf4f-0df3d2794406" alt=""><figcaption></figcaption></figure>

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

{% hint style="danger" %}
Textbox là khung màu xanh bao quanh hình ảnh

* Căn lề theo trang: Căn lề textbox nằm ở trên, dưới, trái, phải, giữa của hình ảnh
* Căn lề theo textbox: Căn lề chữ nằm trong textbox

Lưu ý 2 loại căn lề để không nhầm lẫn trong quá trình sử dụng
{% endhint %}

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2FCZYGka449lVHqhLpfYvq%2Fimage%20(1).png?alt=media&amp;token=e968c2ac-911f-4009-9c5b-9c135870fb12" alt=""><figcaption></figcaption></figure>

## Lớp Hình ảnh

{% hint style="info" %}
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ể
{% endhint %}

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

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2F4ll1eHHfiCjElOESxDX2%2Fimage%20(1).png?alt=media&amp;token=72a60fb1-8cba-4940-a0ae-ab1b8007dc12" alt=""><figcaption></figcaption></figure>

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ị

{% hint style="danger" %}

* Khi sử dụng hình ảnh tải lên, bạn cần lưu điều chỉnh kích thước chiều rộng, chiều cao của hình ảnh để hiển thị được hết hình ảnh
* Khi sử dụng attribute hệ thống sẽ hỗ trợ thêm trường Xem trước, bạn có thể tải lên 1 hình ảnh bất kỳ để xem thử attribute đó sẽ hiển thị như nào khi gửi tới khách hàng
  {% endhint %}

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2F5WAdn2Heg3tx5vPMpaex%2Fimage%20(1).png?alt=media&amp;token=c49076aa-6f1f-47ac-a6ae-671571018090" alt=""><figcaption><p>Sử dụng hình ảnh tải lên từ máy tính</p></figcaption></figure>

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2FxMQVzr9P29NPRhBI4Co3%2Fimage%20(1).png?alt=media&amp;token=012d93ac-9c95-48bc-9352-a36e93c73b35" alt=""><figcaption><p>Sử dụng thuộc tính</p></figcaption></figure>

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)

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2FX265knIFhVZ0YqkcT7fk%2Fimage%20(1).png?alt=media&amp;token=712a230f-d9cf-49c9-b5ff-b52c0517bbde" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2FdRXIU0KQuikfQmXI1zQr%2Fimage%20(1).png?alt=media&amp;token=d9c330b0-5030-4fce-a106-24732f2b10dd" alt=""><figcaption></figcaption></figure>

## Lớp QR Code

{% hint style="info" %}
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 đó
{% endhint %}

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

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2FgO12ESUdp6iY2UzVJUyc%2Fimage%20(1).png?alt=media&amp;token=84a41ddb-cfac-4520-84f7-1ff4abc0589e" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2FL6cNBOJzZDngFilaRz9f%2Fimage%20(1).png?alt=media&amp;token=332efac5-b7ea-4a66-9b20-37363dca19bc" alt=""><figcaption></figcaption></figure>

## Lớp Bar Code

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

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2FezWya4gySdHoZTJozv0u%2Fimage%20(1).png?alt=media&amp;token=ee70dd77-94ba-432a-bbd2-3cde6f1242a9" alt=""><figcaption></figcaption></figure>

## 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

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2FIYWHYW8iZBOi9bNdHTiJ%2Fimage%20(1).png?alt=media&amp;token=591e55d5-5d34-488f-9e37-734045227c1d" alt=""><figcaption></figcaption></figure>