> 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/cac-buoc-tao-anh.md).

# Các bước tạo ảnh

{% hint style="warning" %}
Hướng dẫn tạo mới hình ảnh cá nhân hóa cơ bản (sử dụng tên Facebook và avatar của khách hàng)
{% endhint %}

Bước 1: Bạn cần chuẩn bị trước 1 ảnh nền (kích thước dưới 1000x1000px), dung lượng dưới 2.5mb

Lưu ý khi thiết kế hình ảnh, bạn nên thiết kế trước cả khung ảnh và khung hiện tên của khách hàng

Nếu bạn chưa có hình ảnh, bạn có thể tải ảnh mẫu [<mark style="color:purple;">**tại đây**</mark>](https://s3.smax.in/bizs/66161b78c553e00306b2ed5a/VOUCHER.png)

{% hint style="info" %}
Để kiểm tra thông tin hình ảnh, mở ảnh bạn muốn dùng, nhấn chuột phải vào ảnh và chọn Properties
{% endhint %}

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2FIyLYcCA5oACFtJvMYzpc%2Fimage.png?alt=media&amp;token=0be9c812-6e3a-48ba-b6c6-d9c49f557883" alt=""><figcaption></figcaption></figure>

Tại cửa sổ thông tin hình ảnh, chọn tab General để xem dung lượng hình ảnh

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2FOoqJUZ366rwyylcKigMz%2Fimage.png?alt=media&amp;token=01861402-bc6c-4ad1-a561-c341dc03cf5f" alt=""><figcaption></figcaption></figure>

Chọn tab Details để xem kích thước hình ảnh

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2F0xxZetydUDKyll7rZcxi%2Fimage.png?alt=media&amp;token=28897b05-16fa-4300-a787-4037a50a76c4" alt=""><figcaption></figcaption></figure>

Nếu dung lượng quá 2.5mb và kích thước quá 1000x1000px, bạn cần xử lý lại hình ảnh

Bước 2: Truy cập module Customize Image và chọn Thêm mới, sau đó mở phần Cài đặt

Tại đây bạn cần điều Chiều rộng khung và Chiều cao khung khớp với kích thước ảnh nền đã chuẩn bị ở bước 1. Ví dụ hình ảnh của mình có kích thước 1000x500px, ở đây mình sẽ điều chỉnh chiều rộng là 1000px, chiều cao là 500px

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2FCGMfWSrBVvibv28km5qv%2Fimage%20(1).png?alt=media&amp;token=b9d293cf-0191-4499-b489-f035bc2332bf" alt=""><figcaption></figcaption></figure>

Bước 2: Thêm 1 lớp hình ảnh mới, đặt lề trên và lề trái là 0px, chiều rộng và chiều cao bằng với kích thước của ảnh, sau đó upload hình ảnh nền ở bước 1 lên đây

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2FjQYaDYKh3SOTz7ogmVeB%2Fimage%20(1).png?alt=media&amp;token=fd682fca-822f-4756-82c2-c2d1870cf46e" alt=""><figcaption></figcaption></figure>

Bước 3: Thêm 1 lớp hình ảnh nữa, lề trái, lề phải và kích thước bạn có thể tùy chỉnh để phù hợp với ảnh nền của mình

Phần giá trị chọn attribute và nhập attribute {{facebook.picture}} vào ô giá trị, attibute này sẽ giúp hiển thị ảnh đại diện Facebook của khách hàng

Phần hình dáng chọn Circle

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2FEhNg1pUPVgC0mGr6mCQS%2Fimage%20(1).png?alt=media&amp;token=423977b9-a2c9-403b-a199-5e38d9da1d40" alt=""><figcaption></figcaption></figure>

Bước 4: Thêm 1 lớp văn bản để hiển thị tên của khách hàng, điều chỉnh vị trí và kích thước phù hợp với ô nhập tên

Phần giá trị nhập {{facebook.name}}, attribute này sẽ hiển thị tên Facebook của khách hàng

Bạn có thể tùy chỉnh phông chữ, cỡ chữ và căn lề theo textbox

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2Fr1CqdXFlcUjoWAVUFBKu%2Fimage%20(1).png?alt=media&amp;token=dbd09a8d-4498-460c-9b8c-d47951a5b480" alt=""><figcaption></figcaption></figure>

Sau đó, chọn Xuất bản để lưu lại hình ảnh vừa tạo

Bước 5: Truy cập module Bot-Auto, tạo 1 block mới

Trong block vừa tạo sử dụng thẻ Custom Image và chọn ảnh cá nhân hóa vừa tạo để tự động tạo ảnh, sau đó chọn lưu URL hình ảnh vào 1 thuộc tính bất kỳ

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2FQJFrpahivTIWH9NT4p5a%2Fimage%20(1).png?alt=media&amp;token=95b9e37e-e0c2-4505-9a39-297f27ce5ae3" alt=""><figcaption></figcaption></figure>

Sau đó ở phía dưới thẻ Custom Image, bạn cần đặt thêm 1 thẻ Messenger Image và nhập lại attribute vừa lưu URL hình ảnh ở trên vào để gửi lại cho khách hàng

<figure><img src="https://1875681896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fsr3EiPwgSuzEXI3u1tC1%2Fuploads%2FqGWDAX76iP6b5OsoTFZC%2Fimage%20(1).png?alt=media&amp;token=53837c01-572c-494a-ab09-b54250db3f95" alt=""><figcaption></figcaption></figure>