> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.teeinblue.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Chức năng Add Text và các tùy chỉnh


### MỤC LỤC
* [Personalization Settings - Các cài đặt cá nhân hoá cho text](https://support.teeinblue.com/vi/article/chuc-nang-add-text-va-cac-tuy-chinh-13thgw6/#1-personalization-settings-cac-cai-dat-ca-nhan-hoa-cho-text)
* [Tính năng Paragraph](https://support.teeinblue.com/vi/article/chuc-nang-add-text-va-cac-tuy-chinh-13thgw6/#1-tinh-nang-paragraph)

# Thêm Text vào artwork

Để thêm text vào artwork, hãy bấm vào **nút "Text"**.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/add-text-1_osny2r.png)

Hoặc tải lên file PSD. Nếu bạn chọn nhập layer text từ file PSD, hãy nhớ ấn "Convert" layer đó từ file PSD thành layer text của Teeinblue. Sau khi covert, bạn nên kiểm tra lại font family và chỉnh sửa lại nếu cần

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/convert-psd_y3fu97.png)

# Các cài đặt chung

### Default text

Viết 1 đoạn text mặc định để hiển thị trên thiết kế. *(Ví dụ: "Lily", "17/09/2020" etc.)*

|| Nếu bạn muốn thay đổi tên của layer được hiển thị trên personalization form, hãy nháy đúp vào tên của layer đó ở bảng bên trái.

### Text color
Thay đổi màu mặc định của đoạn text.

### Fonts
Tìm hiểu thêm ở bài viết: [Về Fonts](/vi/article/ve-fonts-1t2ezq3/).

### Auto scale when text is too long
Chọn 1 giới hạn cho độ dài của khung text. Sau khi bật tính năng này, khi text quá dài (hoặc quá nhiều kí tự), app sẽ tự động giảm kích thước của text xuống để text không bị trượt khỏi vị trí ban đầu trong artwork.
| Với các text ngắn như tên, gợi ý cài max width = 500 - 600px.

##### Text Background
Bạn có thể add thêm hiệu ứng Background cho field Custom Text
![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_15m57m8.png)
Và đây là kết quả khi bạn publish Campaign
![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_hw1x9m.png)

# Personalization Settings - Các cài đặt cá nhân hoá cho text

### Add toggle to show/hide
Tương tự như tùy chỉnh cho phần ảnh Layer. (Tham khảo thêm [tại đây](https://support.teeinblue.com/vi/article/cac-tuy-chinh-ca-nhan-hoa-cua-layer-trong-artwork-11bzapv/))

### No Personalization
Bạn hãy bật tính năng này nếu bạn không muốn khách hàng cá nhân hoá layer text hiện tại

### Bật tính năng cá nhân hóa cho Text: "Enable Personalization"
* Sử dụng tính năng "Enable Personalization" sẽ cho phép khách hàng được phép tự thay đổi đoạn text.
* Sau khi bạn bật lên, sẽ có một trường hiển thị trên storefront cho phép khách hàng điền đoạn text mà họ muốn thêm vào.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/enable-text_1bw1h73.png)

##### Option Title
Tên hiển thị của layer text trong personalization form trên storefront.
*Ví dụ*: Woman's name, Dog's name... 

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/option-title_1qg806d.png)

##### Placeholder Text
Một đoạn text tạm thời xuất hiện trong form điền text.
*Ví dụ*: Type your name here

###### Input type
Chọn cách hiển thị mặc định của text:
* Hiển thị cả chữ và số - All characters (Aa Bb 123 @#$)
* Chỉ hiển thị số - Only numbers (123)
* Hiển thị ngày tháng năm - Date picker

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1moq5co.png)
* Custom rules

| **Mẹo:** Hữu ích khi bạn muốn chặn khách hàng nhập vào một số ký tự nhất định. Tham khảo bảng bên dưới để biết thêm chi tiết.

**Numbers & Scripts**

| TYPE | EXAMPLE | USE CASE |
| ---- |
| **Digits** | 0 1 2 3 4 5 6 7 8 9 | Sử dụng khi khách hàng cần nhập số, chẳng hạn như ngày tháng, độ tuổi hoặc số áo. Giúp giới hạn đầu vào chỉ ở dạng số. |
| **Latin Basic** | A a B b C c X x Y y Z z | Phù hợp cho các nội dung bằng tiếng Anh như tên, chữ viết tắt hoặc tin nhắn ngắn. Đảm bảo tương thích với hầu hết các phông chữ và thiết kế. |
| **Latin Extended** | À à Ü Ö ö ß Ç ç Ñ ñ | Hữu ích khi cần hỗ trợ các ký tự Latin có dấu — phù hợp cho các ngôn ngữ châu Âu như tiếng Pháp, Đức hoặc Tây Ban Nha. |
| **Non-Latin + Ideographs** | あ カ 汉 字 ก น บ ج प अ | Cho phép sử dụng các ký tự từ hệ chữ phi Latin (ví dụ: tiếng Nhật, Trung, Thái, Ả Rập). Được khuyến nghị cho các cửa hàng hướng đến khách hàng quốc tế. |

**Misc**

| TYPE | EXAMPLE | USE CASE |
| ---- |
| **Punctuation** | . , ; " [ ] ( ) ? < > _ - | Cho phép sử dụng dấu câu trong tin nhắn hoặc câu trích dẫn, chẳng hạn như “I Love You!” hoặc “#1 Dad.” |
| **Common Symbols** | ! @ # ~ % & * $ € | Hỗ trợ các ký hiệu thông dụng thường dùng trong văn bản sáng tạo, như “Best $Dad$ Ever.” |
| **Miscellaneous Symbols** | ★ ♡ ✿ ✓ ← → ☀ | Cho phép khách hàng thêm các biểu tượng trang trí để cá nhân hóa thiết kế — ví dụ: ngôi sao, trái tim, hoặc mũi tên. |
| **Emojis - Unsupported** | 😊 🍰 👑 💗 | Emojis không được hỗ trợ do giới hạn của phông chữ và hiển thị. Để tránh lỗi, các ký tự này bị chặn theo mặc định. |

**Advanced**

| TYPE | EXAMPLE | USE CASE |
| ---- |
| **Character Exceptions** | ä, ×, ! | Tùy chỉnh chặn thủ công các từ hoặc ký tự cụ thể không nằm trong các tùy chọn bên trên — hữu ích để lọc tên thương hiệu, nội dung không phù hợp hoặc các trường hợp đặc biệt khác. |
| **Whitespace Settings** | (e.g., space handling) | Kiểm soát việc sử dụng khoảng trắng — cho phép, loại bỏ hoặc giới hạn. Giúp định dạng chính xác các đầu vào nhiều từ như “Anna Marie” hoặc “The Best Dad.” |


###### Input text case
Chọn cách hiển thị của các kí tự text mà khách hàng điền:
* Hiển thị đúng như khách hàng tự viết - Normal
* Chữ thường - lowercase
* Chữ in hoa - UPPERCASE
* Chỉ in hoa chữ cái đầu - Capitalize Each Word

##### Text character limit
Giới hạn số kí tự khách hàng có thể điền. 

| Sử dụng tính năng này để tránh trường hợp đoạn text quá dài đè lên các phần khác trong design.

###### Enable prefix/suffix
Cho phép viết sẵn phần chữ không cá nhân hoá vào trước hoặc sau layer chữ hiện tại. Phần chữ này sẽ không bị thay đổi khi khách hàng điền thêm phần text cá nhân hoá
Eg. "Mr". Leroy -> Chữ Mr. là prefix

###### Cho phép khách hàng đổi màu chữ - Allow customers to change Text Color
Mọi người có thể chọn hiển thị dưới dạng
* **Color Picker**
* chỉ giới hạn một số màu cố định với **Color Category** (trong trang Assets). Đọc thêm về Color Category [tại đây](https://support.teeinblue.com/vi/article/cach-tao-va-su-dung-color-categories-13qwy96/)

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/text-color_1kkjepg.png)

###### Cho phép khách hàng đổi font chữ - Allow customers to change Font
Khách hàng sẽ có thể đổi font chữ dựa trên những lựa chọn bạn đã cài đặt. Tính năng này sẽ chỉ hoạt động nếu layer text gốc sử dụng Custom Font 
* Bước 1: Cài đặt Font Category trong trang Assets > Font Categories. Đọc thêm về cách cài đặt Font Categories [tại đây](https://support.teeinblue.com/vi/article/ve-fonts-1t2ezq3/#1-font-categories)
* Step 2: Quay trở lại chỉnh sửa Artwork > chọn Font Category mà bạn vừa mới tạo

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/change-font_ofnjdq.png)

Và đây là kết quả trên storefront

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/font-family_16rfd4n.png)

###### Điền giá trị từ các tùy chọn khác - Populate values from other options

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1grnsw6.png)

Ở ví dụ này, nếu vị trí bản đồ Map Location được đặt là **Berlin, Germany**, cả ô text và live preview sẽ tự động hiển thị là **Berlin, Germany**

Để làm được như vậy, hãy làm các bước sau:

* Tạo một layer text
* Bật setting **Populate values from other options**

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1r35rpz.png)

* Tiếp tục chọn layer mà bọn muốn lấy giá trị. Trong trường hợp này, nó là layer **Street Map**

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_uk06q4.png)

* Chọn kiểu giá trị mà bạn muốn lấy. Bạn có thể chọn nút **Lookup values ** để xem thêm chi tiết. Hiện tại Teeinblue chỉ hỗ trợ các giá trị như dưới đây, chúng mình sẽ tiếp tục update nhiều giá trị hơn trong thời gian sắp tới.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_17nu5ri.png)

* Vì bạn muốn lấy giá trị tên địa điểm, bạn có thể copy và paste gái trị `{{place_name}}`.
 | Tips: Bạn có thể điền một tùy chọn với giá trị tùy chọn

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1a8zbsp.png)
* Xem kết quả trên Store của bạn:

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_b6sqwl.png)
| Bạn có thể kết hợp nhiều giá trị nếu bạn muốn

**CHÚ Ý:**
* Khách hàng có thể sửa text bất cứ khi nào họ muốn, kể cả sau khi text đã được tự động điền.
* Nếu khách hàng thay đổi vị trí bản đồ, text sẽ được update với giá trị mới thay thế giá trị cũ đã điền trước đó.

##### Mark as required

Sử dụng tính năng này sẽ khiến khách hàng buộc phải điền vào trường text trống trước khi tạo order.

##### Align text
Sử dụng tình năng này để chọn căn chính trái, phải, giữa cho text khi text được nhập trên trang sản phẩm.

##### Stroke Text
Bạn có thể add thêm hiệu ứng stroke cho field Custom Text.
![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1u0tno2.png)
Và đây là kết quả khi bạn publish Campaign:
![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_dj6tjq.png)

| Bạn có thể kết hợp đồng thời 2 tính năng Text Background và Stroke Text cùng lúc
| ![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1bwwp1j.png)

###### Letter Spacing
Bạn có thể thay đổi letter spacing cho layer text như dưới đây: 

![Letter spacing](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/monosnap-teeinblue-portal-2024_1veuc37.png)

# Tính năng Paragraph

![Bạn đã có thể tạo tính năng Paragraph từ teeinblue](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_5zu9so.png)

###### Tạo Paragraph
Trong Artwork Editor, bấm vào icon hình dấu +, rồi chọn Paragraph

![Tạo mới Paragraph](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1uffk2r.png)

###### Paragraph container

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1xhm807.png)

**Các lưu ý chính:**

* Kích thước của container sẽ cố định. Chữ trong paragraph sẽ không tràn ra khỏi vùng này.
* Nếu đoạn text dài hơn chiều ngang của container → text sẽ được tự động xuống dòng tiếp theo

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_pc52uy.png)

* Nếu đoạn text dài hơn chiều cao của container → size chữ sẽ được tự động nhỏ lại để fit với container
* Nếu đoạn text ngắn hơn chiều cao của container → đoạn chữ sẽ được giữ nguyên, không có thay đổi gì.

###### Căn chỉnh Paragraph

* Căn theo chiều ngang

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_eqkyew.png)

* Căn theo chiều dọc

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1rzvygj.png)

###### Auto scale (chiều trục dọc)

|| Đoạn Paragraph sẽ được tự động scale font size theo chiều dọc. Bạn không thể tắt tính năng này.

**Các lưu ý chính: **
* Trên trang Product Page, nếu đoạn text dài hơn chiều dọc của container, font size sẽ được tự động giảm xuống để fit vào trong container.
* Tính năng auto scale hiện chỉ hoạt động ở Campaign Editor và trang Product Page. Bạn chưa view được nó trong Artwork Editor

###### Paragraph letter spacing
Bạn có thể điều chỉnh khoảng cách giữa các kí tự cho đoạn Paragraph của bạn với setting

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_ewyj03.png)

###### Các tùy chỉnh về Font
Bạn có thể dùng các tùy chỉnh sau:
* Font Size
* Font Family
* Font Color

|| Nếu Paragraph đã dài/rộng đến sát container, font size sẽ không thể tăng thêm được nữa.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1p467md.png)

###### Text Background

|| Background sẽ được áp dụng lên cho đoạn Paragraph, chứ không phải vùng hiển thị của container.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1r45c2b.png)

###### Text character limit

|| Tính năng này sẽ được áp dụng cho toàn bộ đoạn paragraph, chứ không phải cho mỗi dòng. Lưu ý nếu bạn sẽ dụng kí tự [Enter] hay [Spacebar] thì cũng sẽ được tính là 01 kí tự.

###### Vertical offset

| Bạn có thể tìm thấy tính năng này trong mục Extra. Tính năng này được dùng để update vị trí hiển thị của đoạn Paragraph trong file render.

Tùy vào custom font bạn dùng, đôi khi trong file render, đoạn paragraph có thể sẽ bị render lệch vài pixels.
Lý do là bởi chúng tôi không thể tính toán chính xác được vị trí của vài font chữ viết tay. Do vậy mà có sự chênh lệch nhỏ này giữa Artwork Editor, trang Product Page, và file render.

* Nếu đoạn Paragraph được top-aligned, chúng có thể sẽ lệch vài pixel xuống phía dưới trong order design.
* Nếu đoạn Paragraph được bottom-aligned, chúng có thể sẽ lệch vài pixel lên trên trong file order design.
* Nếu đoạn Paragraph được middle-aligned, sẽ không có độ lệch trong file order design, bạn sẽ không cần dùng tính năng này.

Nếu bạn gặp phải trường hợp này, hãy làm theo các bước sau để fix file order design:

**Bước 1.** Mở Artwork. Và chỉnh sửa lại setting vertical offset.

![Sử dụng tính năng vertical offset để fix file order design](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1v7uvl3.png)

| 1 để đi lên 1px và + 1 để đi xuống 1px)

**Bước 2.** Save Artwork sau khi bạn chỉnh sửa xong

**Bước 3.** Regenerate lại file order design.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_83kcue.png)

| Bạn có thể lặp lại Bước 1 để được kết quả như mong muốn.

Bước 4. Update lại Campaign sau khi có được kết quả hài lòng. 

###### Các tính năng về text không dùng được với Paragraph
* Curve Text
* Skew Text
* Input Type

##### Tùy chỉnh thêm

1. Add Condition

Đọc thêm về tính năng này ở đây: [Thêm Điều kiện cho Layer](/vi/article/them-dieu-kien-cho-layer-1y9bm04/)

2. Custom class

Dùng để thêm style cho đoạn text. Bạn sẽ cần kiến thức code CSS khi sử dụng.