> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appminis.io/llms.txt
> Use this file to discover all available pages before exploring further.

# CTA

> Hướng dẫn tùy chỉnh component CTA: bật/tắt tiêu đề, các nút (Quan tâm OA, Liên hệ), và cài đặt phong cách.

### **4.2.5. CTA**

**Tổng quan**

* **Hiển thị tiêu đề:**
  * Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có tiêu đề và không có tiêu đề, ngoài ra người dùng có thể nhập tiêu đề cho phần CTA. Ví dụ, nếu tiêu đề là "**Nhận thông tin khuyến mãi từ chúng tôi**" thì phần CTA sẽ như thế này

<Frame caption="Tiêu đề CTA  ">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image29_d286178c1d.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* **Kích thước/Màu sắc:**
  * Người dùng có thể điều chỉnh kích thước và màu sắc cho tiêu đề của phần CTA tại

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image433_12e2bfd0ff.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* **Hiển thị nút quan tâm:**
  * Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có nút quan tâm OA và không có nút quan tâm OA
* **Hiển thị nút tạo lối tắt:**
  * Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có nút tạo lối tắt và không có nút tạo lối tắt
  * **Hiển thị nút liên hệ:** Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có nút liên hệ và không có nút liên hệ
* **Nền**
  * Chọn màu nền cho các thẻ bằng cách nhấn ô vuông sau đó chọn màu

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image434_b5f7f22a67.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* Chuyển đổi qua lại giữa 2 trạng thái có màu nền và không có màu nền bằng cách nhấn nút <Icon icon="eye" color="#cfcfcf" size={15} />
* Xóa màu nền bằng cách nhấn nút <Icon icon="minus" color="#cfcfcf" size={15} />
* **Bo góc**
  * Người dùng có thể nhập hoặc tăng/giảm chung độ bo góc của 4 góc của các thẻ tại ô nhập

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image435_777d9af5df.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

hoặc điềù chỉnh riêng lẻ độ bo góc của từng góc bằng cách nhấn nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image436_3a48593d9d.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* **Viền**
  * Người dùng có thể nhập hoặc tăng/giảm chung độ lớn viền của các thẻ tại ô nhập

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image437_a2a3a2680b.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* Chọn màu cho viền bằng cách nhấn ô vuông sau đó chọn màu

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image438_9b2faa5aab.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* Chuyển đổi qua lại giữa 2 trạng thái có viền và không viền bằng cách nhấn nút <Icon icon="eye" color="#cfcfcf" size={15} />
* Xóa viền bằng cách nhấn nút <Icon icon="minus" color="#cfcfcf" size={15} />
* **Đổ bóng**
  * Người dùng có thể chọn độ lớn đổ bóng của các thẻ tại ô

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image439_abf274f4d4.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* Chọn màu cho đổ bóng bằng cách nhấn ô vuông sau đó chọn màu

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image440_76a47d9691.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* Chuyển đổi qua lại giữa 2 trạng thái có đổ bóng và không đổ bóng bằng cách nhấn nút <Icon icon="eye" color="#cfcfcf" size={15} />
* Xóa đồ bóng bằng cách nhấn nút <Icon icon="minus" color="#cfcfcf" size={15} />