# Giới thiệu về Tempi

Bạn muốn yêu cầu tính năng/gửi ý kiến đóng góp cho team phát triển Tempi? 

Vui lòng gửi cho chúng tôi [tại đây](https://www.messenger.com/t/115926154442425/?messaging_source=source%3Apages%3Amessage_shortlink\&source_id=1441792\&recurring_notification=0)

## Tempi là gì?

Tempi là nền tảng hỗ trợ bạn xây dựng Website và các trang Landing một cách dễ dàng và nhanh chóng mà không cần yêu cầu hiểu biết về kỹ thuật. Cho dù là lần đầu tiên bạn tạo Website/Landing page hay bạn đã là một chuyên gia lâu năm, bạn sẽ tìm thấy các tính năng và giải pháp cần thiết để xây dựng một trang Web/Landing chuyên nghiệp và cá nhân hoá. 

Cho dù bạn là chủ của hàng, marketer xây dựng các chiến dịch truyền thông, doanh nhân, nhà thiết kế, nhà phát triển, bạn sẽ tìm thấy các tính năng chuyên biệt để tạo một trang Web/Landing chuyên nghiệp để tiếp cận khách hàng, quản lý doanh nghiệp hay các chiến dịch truyền thông đặc thù của mình.

## Với Tempi, bạn có thể:

Tự do xây dựng các trang Web/Landing của bạn, cho dù bạn đang quảng bá doanh nghiệp của mình, trưng bày tác phẩm, mở cửa hàng hay bắt đầu viết blog — bạn có thể làm tất cả với trình tạo trang Web/Landing của Tempi.

![](/files/FvbH3uqLAp8kzZGQxlPH)

Không biết bắt đầu từ đâu? Bạn hoàn toàn có thể sử dụng các trang mẫu để tùy chỉnh trang của bạn.

![](/files/8lh1LGRHyz57nqdEDwCh)

Sử dụng bộ công cụ kinh doanh chuyên nghiệp được tích hợp sẵn để quảng bá và quản lý doanh nghiệp của bạn — tất cả ở một nơi. Bán sản phẩm của bạn với các tính năng thương mại điện tử tích hợp và nhận orders/bookings cho dịch vụ của bạn.

## Tài liệu 

Tài liệu này mô tả các tính năng cốt lõi của Tempi. Chúng tôi sẽ đưa ra hướng dẫn về cách sử dụng các tính năng để bạn có thể hoàn thiện trang Tempi của mình. 

Chúng tôi cũng sẽ cập nhật nội dung liên tục khi các tính năng mới được triển khai. 

Hãy cùng bắt đầu tìm hiểu nhé!


# Tạo và chỉnh sửa Website

## Bước 1: Tạo mới Website

Tại màn hình danh sách Website, click button "Thêm mới Website" để tạo mới Website

<figure><img src="/files/c2FON3z6efL0WbSXKIaW" alt=""><figcaption></figcaption></figure>

* **Sử dụng giao diện mẫu:** bạn sẽ được chuyển hướng tới kho template mẫu với đa dạng chủ đề đã được thiết kế sẵn của Tempi.
* **Sử dụng trang trắng:** Thiết kế Website của bạn từ đầu.
* **Tải tệp .tempiweb từ máy tính:** Tải lên Website bạn đã thiết kế trước đó dưới dạng file .tempiweb

## Bước 2: Chỉnh sửa Website

Tại trình kéo thả Website, chọn thêm bố cục hoặc khối được xây dựng sẵn để bắt đầu thiết kế Website của bạn

<figure><img src="/files/Mmnl9RPI8zWDtmTcs6tk" alt=""><figcaption></figcaption></figure>

Hướng dẫn các phần cài đặt chung cho Website

**Bấm vào biểu tượng "Cài đặt" góc trái màn hình để cấu hình các thông tin chung cho Website của bạn:**

### Thay favicon (biểu tượng website)

Bấm vào phần tải ảnh để tải lên ảnh favicon (biểu tượng website) của bạn, ảnh này sẽ hiển thị bên cạnh tiêu đề trang của bạn để khách hàng có thể dễ nhận diện hơn

<figure><img src="/files/ZtMGT6AtKWIOY9ZUumhS" alt=""><figcaption></figcaption></figure>


# Chỉnh sửa giao diện cho điện thoại

Chỉnh sửa giao diện hiển thị đẹp trên điện thoại

Chọn **chế độ máy tính/điện thoại** trên trình chỉnh sửa để tùy chỉnh tương ứng cho từng thiết bị

* **Icon máy tính**: Chỉnh sửa giao diện hiển thị trên máy tính
* **Icon điện thoại**: Chỉnh sửa giao diện hiển thị trên điện thoại
* **Icon con mắt**: Ẩn/hiện các phần tử đang sử dụng tính năng ẩn/hiện trên từng thiết bị tương ứng

<figure><img src="/files/D3Fys4RCdApmC89CGJMp" alt=""><figcaption></figcaption></figure>

Hầu hết các phần tử trên Tempi đều có hỗ trợ chỉnh sửa riêng **kích thước (chiều rộng, chiều cao), cỡ chữ, bố cục** hiển thị riêng cho máy tính và điện thoại, chi tiết như bảng dưới

<table><thead><tr><th width="183">Phàn tử</th><th width="433">Thuộc tính hỗ trợ chỉnh sửa riêng cho máy tính/điện thoại</th></tr></thead><tbody><tr><td>Tất cả phần tử</td><td><p></p><ul><li>Margin</li><li>Padding</li></ul></td></tr><tr><td>Danh sách sản phẩm</td><td>Cỡ chữ</td></tr><tr><td>QR code</td><td>Kích thước</td></tr><tr><td>Icon</td><td>Kích thước<br></td></tr><tr><td>Slideshow ảnh</td><td><p></p><ul><li>Chiều cao</li><li>Số lượng phần tử hiển thị trên 1 hàng</li></ul></td></tr><tr><td>Video</td><td>Chiều rộng</td></tr><tr><td>Button</td><td>Kích thước<br>Cỡ chữ</td></tr><tr><td>Gallery</td><td><p>Layout</p><p>Số cột</p><p>Khoảng cách giữa các ảnh</p></td></tr><tr><td>PDF viewer</td><td>Kích thước<br></td></tr><tr><td>Tab</td><td>Cỡ chữ</td></tr><tr><td>Countdown</td><td>Cỡ chữ</td></tr><tr><td>Câu hỏi thường gặp</td><td><p></p><ul><li>Chiều rộng</li><li>Cỡ chữ</li><li>Khoảng cách giữa các mục</li></ul></td></tr><tr><td>Nội dung thu gọn</td><td><ul><li>Cỡ chữ</li><li>Khoảng cách với nội dung</li></ul><p><br></p></td></tr><tr><td>Icon mạng xã hội</td><td><p></p><ul><li>Kích thước khung</li><li>Kích thước biểu tượng</li><li>Khoảng cách</li></ul></td></tr><tr><td>Danh sách cửa hàng</td><td>Khoảng cách trên khi scoll</td></tr><tr><td>Progress</td><td><p></p><ul><li>Chữ: Cỡ chữ, khoảng cách dòng</li><li>Số: Cỡ chữ, khoảng cách dòng</li><li>Kiểu bar: Chiều cao</li></ul></td></tr><tr><td>Danh sách bài viết</td><td><p></p><ul><li>Dạng lưới: Số hàng, số lượng bài viết trên 1 hàng, khoảng cách giữa các bài viết, khoảng cách giữa các mục</li><li>Dạng danh sách: Số lượng bài viết hiển thị, khoảng cách giữa các bài viết, khoảng cách giữa các mục</li><li>Dạng trượt: Số lượng bài viết trên 1 hàng, khoảng cách giữa các bài viết, khoảng cách giữa các mục</li></ul></td></tr><tr><td>Trang sách</td><td><ul><li>Chiều cao</li><li>Chiểu rộng<br></li></ul></td></tr><tr><td>Danh sách</td><td><p>Số lượng mục trên 1 hàng</p><p>Khoảng cách giữa các mục</p><p>Khoảng cách giữa các hàng</p></td></tr><tr><td>Văn bản</td><td><p></p><ul><li>Cỡ chữ</li><li>Khoảng cách dòng</li><li>Khoảng cách chữ</li></ul></td></tr></tbody></table>

Đối với những phần bạn thiết kế khác nhau hẳn cho máy tính và điện thoại thì có thể chọn ẩn/hiện trên thiết bị tương ứng. **VD:** Bạn thiết kế ảnh A chỉ muốn hiển thị cho máy tính thì bạn có thể tùy chỉnh tương ứng như hình bên dưới

<figure><img src="/files/fs2RFhroaf0QS80xRmgL" alt=""><figcaption></figcaption></figure>


# Cấu hình website đa ngôn ngữ

## Giới thiệu chung

Đa ngôn ngữ là tính năng cho phép người dùng có thể cấu hình nhiều ngôn ngữ cho Website trên Tempi, giúp cho Website của bạn có thể tiếp cận thêm các đối tượng khách hàng đa quốc gia.

**Lưu ý:** Tính năng Đa ngôn ngữ hiện chưa khả dụng trên trình kéo thả Landing Page.

## Hướng dẫn cấu hình Đa ngôn ngữ trên trình kéo thả Website

**Bước 1:** Vào trình kéo thả Website của bạn và **xây dựng hoàn chỉnh** Website với ngôn ngữ ban đầu.

Nếu bạn xây dựng Website từ trang trắng, bạn cần thêm khối **Đầu trang** để có thể tuỳ chỉnh nút chuyển đổi đa ngôn ngữ như hướng dẫn ở **Bước 4** trong bài hướng dẫn này.

<div align="center"><img src="https://lh3.googleusercontent.com/3kHZxUbN8R3jdYoqx_P0zD22t71bz4SAaaemMOHXbZEqBG6tvx8MnmSOtrQWoYCATwXeQ3m-_U5pKtFsdpZ7rq-iATPYW88=rw-w2304" alt="Thêm phần tử hoặc khối được xây dựng sẵn"></div>

<div align="center"><img src="https://lh3.googleusercontent.com/rXpFgoK6C5C5I7bz5AgWox9gJkAI1f4SYxn6oqVYlikAR6owkrWNujliuT-k74JYAUgYJ-au7z22j2cBrOYFFt1in33CyT4=rw-w2304" alt="Thêm khối đầu trang"></div>

**Bước 2:** Thêm ngôn ngữ mới vào Website.

***Lưu ý**: Ngôn ngữ mới sẽ sao chép nội dung Website từ ngôn ngữ ban đầu, bạn nên hoàn chỉnh thiết kế ngôn ngữ ban đầu trước khi thêm ngôn ngữ mới để có thể đồng nhất thiết kế giữa các phiên bản ngôn ngữ.*

<div align="center"><img src="https://lh3.googleusercontent.com/7QRIMGIUTEQbfBVvd3fF-zqZxdyMwX3atfO1fv7wjMnSPOqIwXJeKzVUPjLgGojwO6WrEF-ZTqH3dED6Vz1gl6VWgAHM__vKhA=rw-w2304" alt="Thêm ngôn ngữ mới"></div>

Sau khi đã hoàn thành thiết kế Website với ngôn ngữ ban đầu, bấm **Tiếp tục** để chuyển sang chỉnh sửa nội dung phiên bản ngôn ngữ vừa thêm.

<div align="center"><img src="https://lh3.googleusercontent.com/1DozpaT3e920U5Z1r8qGbg2RxM797NXXyTd15ud7Ftr7jVORhbrURX_vxg6heBpmn4jb7GZySj7qkLWLb7GsmiZTHkHO8HxQ=rw-w1590" alt="Tiếp tục thêm ngôn ngữ mới"></div>

**Bước 3:** Bạn đã được chuyển sang trình kéo thả cho ngôn ngữ vừa thêm. Lúc này phần tên trang sẽ hiển thị thêm ký hiệu của ngôn ngữ bạn đã thêm. *(Ví dụ: Tiếng Anh - EN)*. Bạn có thể thao tác sửa tên trang tuỳ ý. Tên trang này sẽ hiển thị trên thanh menu của ngôn ngữ đó.

<div align="center"><img src="https://lh3.googleusercontent.com/VPpmDwWQqZJvhhBKW8n0D3THxtc967tqO84dh9GP0FbQQfGWWWDG-HF8aAT7f1hN5uRVeWtH_mpw1auK2hZYxnZAb2IdUnM=rw-w2304" alt="Trình kéo thả ngôn ngữ mới"></div>

Bạn có thể thao tác sửa tên trang và nội dung trang tuỳ ý cho phiên bản Website ở ngôn ngữ này.

Để biết mình đang chỉnh sửa Website ở phiên bản ngôn ngữ nào, bạn chỉ cần lưu ý phần hiển thị ngôn ngữ ở đây.

<div align="center"><img src="https://lh3.googleusercontent.com/mzbQT1QNc2Q3ztxied6GGMdA8HktrsksQst1ikLWhHF40fpLHa0pfI6vcFlUc_ajNBGden8uESfJNdSmHfDifpfulrPo-fZvjg=rw-w2304" alt="Trình kéo thả ngôn ngữ mới"></div>

Nếu bạn muốn chuyển sang chỉnh sửa Website ở phiên bản ngôn ngữ khác, bạn chỉ cần chọn lại ngôn ngữ ở menu danh sách ngôn ngữ.

<div align="center"><img src="https://lh3.googleusercontent.com/04OUO1PYptmxIKPXLWaCuPnwV_fs-2JC-BWLC4bFQ5WgREkjB0IVPCK_gtwUaDW6Lb7fn1v1GlSZsQBOM4sgx6WNWXeM2hkV=rw-w1184" alt="Chọn ngôn ngữ"></div>

**Lưu ý:**

*Nếu phiên bản ngôn ngữ ban đầu có chứa phần tử Form và Vòng quay may mắn thì khi thêm ngôn ngữ mới sẽ không thể sao chép cấu hình của các phần tử đó mà bạn cần cấu hình lại ở phiên bản ngôn ngữ mới.*

*Sau khi thêm 1 ngôn ngữ mới vào Website, toàn bộ chỉnh sửa của bạn sẽ độc lập đối với từng phiên bản ngôn ngữ. Khi bạn chỉnh sửa nội dung ở 1 phiên bản ngôn ngữ bất kỳ, các phiên bản còn lại sẽ không tự động sao chép các thay đổi đó.*

**Ví dụ:** Khi bạn thêm 1 phần tử mới vào Website phiên bản tiếng Việt thì Website phiên bản tiếng Anh sẽ không có gì thay đổi, đây cũng là lý do Tempi khuyến khích bạn nên hoàn thành thiết kế ngôn ngữ ban đầu trước khi thêm ngôn ngữ mới hoặc dùng thao tác **Sao chép & Dán** phần tử để có thể đồng nhất thiết kế giữa các phiên bản ngôn ngữ.

**Hướng dẫn thao tác Sao chép & Dán phần tử:**

**- B1:** Click chuột phải vào phần tử bạn cần sao chép -> Chọn **Sao chép.**

**- B2:** Chuyển sang trình kéo thả của phiên bản ngôn ngữ khác -> Click chuột phải vào vị trí cần dán phần tử vừa sao chép -> Chọn **Dán.**

**Bước 4:** Sau khi đã hoàn chỉnh nội dung và thiết kế của phiên bản ngôn ngữ mới, vui lòng bật **Hiện với khách truy cập** để trang ngôn ngữ mới này được hiển thị trên trang xuất bản.

<div align="center"><img src="https://lh3.googleusercontent.com/lePDnpf0Ph6tujLjq4DShX4j7RVtHmKBqklXHLYXRY8iasCmLiJcMT0kZY2NbNC6A54T4ZsxnfDkmiEDHE7ZXXIPm2rrs8Ie=rw-w2304" alt="Bật hiển thị với khách truy cập"></div>

Khi đó, nút chuyển đổi ngôn ngữ cũng sẽ hiển thị trong khối **Đầu trang** của Website. Bạn có thể tuỳ chỉnh giao diện của nút chuyển đổi ngôn ngữ theo hướng dẫn bên dưới:

**Bước 1:** Di chuột đến khối **Đầu trang** và chọn vào biểu tượng cài đặt.

<div align="center"><img src="https://lh3.googleusercontent.com/R9YoMo4LQTYsNBQTjl2hLk_MwBd_jWJQ6gaz0zK7x9pFOrFQ43F03TU7uBLcF3CwMsF8LVs0zs-0Bn7ICWurke4nE5M-ofLB=rw-w1602" alt="mở cài đặt điều hướng"></div>

**Bước 2:** Chọn **Nút chuyển đổi ngôn ngữ** để mở phần cài đặt.

<div align="center"><img src="https://lh3.googleusercontent.com/FXvW4vrn2JGU9yhs4j1rT_ccV3jEqONoFyu-vf1w5KgIxYBZsRvBKgVYWBxZgvZ4cmg2nxiuGq-RWyxRMg2UxL9eWXfI4D8=rw-w2304" alt="mở cài đặt điều hướng"></div>

*Hướng dẫn theo thứ tự từ trên xuống dưới:*

* Vị trí nút: Nút hiển thị trái/phải trên thanh điều hướng.
* Kiểu hiển thị ngôn ngữ: Hiển thị Tên đầy đủ/Tên viết tắt/Chỉ hiển thị cờ của ngôn ngữ đó.
* Bật/Tắt hiển thị cờ của ngôn ngữ.
* Kiểu hiển thị cờ: Hiển thị hình tròn hoặc hình chữ nhật.
* Kích thước cờ: Điều chỉnh cỡ hiển thị cờ của ngôn ngữ đó.

***Lưu ý:** Cài đặt của nút chuyển đổi ngôn ngữ sẽ không tự động sao chép giữa các phiên bản ngôn ngữ khác nhau. Nếu bạn đã chỉnh sửa nút chuyển đổi ngôn ngữ ở 1 phiên bản, bạn cần chỉnh sửa cho tất cả phiên bản ngôn ngữ còn lại để đảm bảo tính đồng bộ giữa các phiên bản.*


# Tạo website bán hàng

Hướng dẫn tạo website bán hàng

{% hint style="warning" %}
Tính năng này chỉ được hỗ trợ trên các website tạo mới từ ngày **21/03/2025**, nếu bạn có nhu cầu chuyển đổi danh sách sản phẩm từ các website cũ được tạo trên Tempi trước thời điểm này, bạn có thể tham khảo hướng dẫn ở [cuối bài này](#huong-dan-chuyen-doi-danh-sach-san-pham-o-website-cu-sang-website-moi) hoặc vui lòng [liên hệ Tempi](https://m.me/tempi.vn) để được hỗ trợ
{% endhint %}

## [Video hướng dẫn](https://www.youtube.com/watch?v=2aTP52y7MS8)

## Bước 1: Tạo mới website

{% content-ref url="/pages/YGtI8HrzCw3AWL6ld09d" %}
[Tạo và chỉnh sửa Website](/cau-hinh-website/tao-va-chinh-sua-website)
{% endcontent-ref %}

## Bước 2: Thêm mới danh sách sản phẩm

Kéo thả phần tử **Danh sách sản phẩm** vào website, Tempi đã tạo sẵn một số sản phẩm mẫu cho bạn

<figure><img src="/files/qjNGmWWQ4EUWlA4Hsb7J" alt=""><figcaption></figcaption></figure>

Các phần cài đặt nhanh cho phần tử danh sách sản phẩm bao gồm:

* **Quản lý bán hàng:** Bấm vào "Quản lý bán hàng" hoặc biểu tượng giỏ hàng trên Sidebar bên trái màn hình để mở phần quản lý bán hàng này

  <figure><img src="/files/uq3KuyQg4OV9wevBRnQs" alt=""><figcaption></figcaption></figure>

  * Từ màn quản lý đơn hàng, bạn có thể truy cập các mục sau:
    * **Quản lý sản phẩm**: Tạo, chỉnh sửa và quản lý toàn bộ sản phẩm của bạn
    * **Popup đặt hàng**: Tùy chỉnh thông tin giao hàng và kết nối lưu dữ liệu về Gmail Google sheet
    * **Phương thức thanh toán**: Tùy chỉnh các phương thức thanh toán COD, chuyển khoản qua ngân hàng, thanh toán qua VNPAY để có thể nhận thanh toán từ khách hàng của bạn
    * **Quản lý đơn hàng**: Quản lý toàn bộ đơn hàng, trạng thái thanh toán và trạng thái xử lý đơn
* Biểu tượng **Cài đặt :** mở phần cài đặt nội dung danh sách sản phẩm
* Biểu tượng **Nhân bản**: cho phép bạn nhân bản phần tử
* Biểu tượng **Xóa**: cho phép bạn xóa phần tử

## Bước 3: Tùy chỉnh giao diện bán hàng trên website

Danh sách sản phẩm hiển thị:

<figure><img src="/files/Avmh1BV8BWOEk5IO4CMX" alt=""><figcaption></figcaption></figure>

Hướng dẫn cấu hình từ trên xuống dưới

* **Quản lý sản phẩm**: mở màn danh sách sản phẩm, cho phép tạo, chỉnh sửa hoặc import danh sách sản phẩm của bạn
* **Chọn sản phẩm hiển thị**:
  * Hiển thị theo danh mục: bạn có thể quản lý sản phẩm theo danh mục ở màn danh sách sản phẩm
  * Hiển thị một số sản phẩm cụ thể: cho phép bạn xem, tìm kiếm sản phẩm theo tên, danh mục để chọn ra một số sản phẩm cần hiển thị như bán chạy nhất, mới nhất, khuyến mãi nhiều nhất...
* **Nội dung hiển thị**: cho phép bạn bật tắt hoặc kéo thả các nội dung để di chuyển vị trí hiển thị
* **Sự kiện khi khách hàng bấm vào sản phẩm của bạn**
  * TH bạn có nhiều thông tin, hình ảnh về sản phẩm bạn nên chọn lựa chọn đầu tiên: Mở popup hiển thị chi tiết sản phẩm
  * TH bạn chỉ cần 1 trang trưng bày danh sách sản phẩm điều hướng khách hàng về 1 nền tảng khác có sẵn -> bạn nên chọn lựa chọn 2, cấu hình đường dãn cho từng sản phẩm và điều hướng khách hàng của bạn đến đó
* **Nút kêu gọi hành động**: bạn có thể thêm tối đa 2 nút theo mục đích bạn muốn
  * Nút thêm vào giỏ hàng -> khi khách hàng bấm vào, sản phẩm sẽ được thêm vào giỏ
  * Nút mua ngay -> khi khách hàng bấm vào, hệ thống mở ngay popup đặt hàng
  * Nút liên hệ -> khi khách hàng bấm vào, hệ thống điều hướng khách hàng đến đường dẫn bạn cấu hình

Ngoài ra bạn có thể tùy chỉnh giao diện hiển thị **danh sách sản phẩm** ở tab **Thiết kế**

<figure><img src="/files/ygdtpb53tD3xggyjm6g0" alt=""><figcaption></figcaption></figure>

## Hướng dẫn chuyển đổi danh sách sản phẩm ở website cũ sang website mới

Do tính năng này chỉ được hỗ trợ trên các website tạo mới từ ngày **21/03/2025**, nếu bạn có nhu cầu chuyển đổi danh sách sản phẩm từ các website cũ được tạo trên Tempi trước thời điểm này, bạn có thể làm theo hướng dẫn chi tiết bên dưới hoặc vui lòng [liên hệ Tempi](https://m.me/tempi.vn) để được hỗ trợ

**Bước 1:** Xuất website cũ ra tệp **.tempiweb**

<figure><img src="/files/sAM8H8jxnKo6SBugoCHY" alt=""><figcaption></figcaption></figure>

**Bước 2:** Tạo website mới từ tệp **.tempiweb** vừa xuất ra từ web cũ

<figure><img src="/files/gFln4pHbF0cP5qbg0OCU" alt=""><figcaption></figcaption></figure>

**Bước 3**: Xuất file danh sách sản phẩm từ website cũ

Vào **Cài đặt** phần tử danh sách sản phẩm cũ -> vào phần **quản lý sản phẩm**

<figure><img src="/files/wwxdhx9qfN1tQuLIEKWu" alt=""><figcaption></figcaption></figure>

Chọn **xuất file** danh sách sản phẩm ra **tệp xlsx**&#x20;

<figure><img src="/files/g0TzX8htGYSR3w6oaEnZ" alt=""><figcaption></figcaption></figure>

**Bước 4**: Tải lên danh sách sản phẩm vào website mới

Vào trình chỉnh sửa Website mới, kéo thả ra 1 phần tử **danh sách sản phẩm mới** và chọn phần **quản lý sản phẩm**

<figure><img src="/files/hsL9umWM1QkKWoUJDQxe" alt=""><figcaption></figcaption></figure>

Tại màn **quản lý sản phẩm**, chọn **Import sản phẩm** -> chọn **tải về file mẫu** và điền thông tin sản phẩm vào file mẫu để tải lên (bạn có thể sao chép nội dung từ file danh sách sản phẩm cũ để tiết kiệm thời gian nhập thông tin sản phẩm vào file mẫu)

<figure><img src="/files/FPzkGLHXCpbAUWyMffr4" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/vhuDT6NE19SeLZa67hDt" alt=""><figcaption></figcaption></figure>

Sau khi hoàn thành nhập thông tin sản phẩm vào file mãu -> chọn **tải lên file**, kết quả tải file được thể hiện ở bảng "**Lịch sử tải file**" bên trái

Sau khi tải lên danh sách sản phẩm thành công, mở lại tab chỉnh sửa website và chọn **nút đồng bộ sản phẩm** để cập nhật thông tin sản phẩm lên website của bạn

<figure><img src="/files/sIVnruArdoUmtURtHo5K" alt=""><figcaption></figcaption></figure>

**Bước 5**: Xuất bản Website mới

Sau khi chuyển đổi danh sách sản phẩm từ website cũ sang website mới, chọn dừng xuất bản website cũ và xuất bản lại website mới


# Cấu hình SEO, ảnh mạng xã hội

Bạn có thể cài đặt thông tin SEO và ảnh mạng xã hội chung cho website hoặc cấu hình riêng cho từng trang trong website như hướng dẫn bên dưới, các thông tin này sẽ giúp cho các Google bot nhận diện nội dung website của bạn tốt hơn, bên cạnh đó các thông tin này này sẽ hiển thị khi bạn gửi đường dẫn hay đăng đường dẫn url trên các mạng xã hội như facebook, zalo, ...

<figure><img src="/files/DwoVT6duh7ePIg1TqkDq" alt=""><figcaption><p>Kết quả tìm kiếm website trên Google</p></figcaption></figure>

<figure><img src="/files/Ctl5NBjCTiygPCN0c0bc" alt=""><figcaption><p>Kết quả hiển thị khi gửi đường dẫn website qua Zalo</p></figcaption></figure>

## **Cấu hình chung cho website**

<figure><img src="/files/bWum8ugpueN2GXeAuR5H" alt=""><figcaption></figcaption></figure>

## **Cấu hình cho từng trang trong website**

Chọn "Quản lý trang và menu" -> Chọn "Cài đặt SEO" -> Lần lượt cài đặt các thông tin SEO, ảnh mạng xã hội

* **Tiêu đề trang:** Có độ dài trong khoảng 50-60 ký tự. Chứa từ khóa chính, từ khóa càng nằm ở đầu càng tốt. Nội dung trong thẻ tiêu đề có thể không cần giống hoàn toàn với tiêu đề của bài viết.
* **Mô tả trang:** Có độ dài từ 120 – 180 ký tự. Có chứa từ khóa, từ khóa càng nằm ở đầu càng tốt.
* **Từ khóa:** Nên chọn những từ khóa cụ thể về doanh nghiệp, dịch vụ, sản phẩm của bạn
* **Ảnh mạng xã hội:** Sử dụng ảnh có kích thước gợi ý 1200\*620px, nên sử dụng định dạng jpg

<figure><img src="/files/00JnJxhQ2KGyCkU3wzau" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/sq7FUzpUGmL83o0QQ56L" alt=""><figcaption></figcaption></figure>


# Các Chế Độ Thiết Kế Giao Diện Landing Page

Tempi hiện đang có 2 chế độ thiết kế giao diện là **Responsive** và **Mobile Only**&#x20;

**Lưu ý**: Các chế độ thiết kế chỉ khả dụng đối với trình kéo thả Landing page.

Vào mục **Landing Page** bấm chọn **+ Thêm trang mới** rồi chọn Kiểu giao diện thiết kế bạn muốn sử dụng:

<figure><img src="/files/3U92QRWYeKlxDouXPk2E" alt=""><figcaption></figcaption></figure>

* **Sử dụng giao diện mẫu:** bạn sẽ được chuyển hướng tới kho template mẫu với đa dạng chủ đề đã được thiết kế sẵn của Tempi.
* **Sử dụng trang trắng:** chọn 01 trong 02 kiểu thiết kế và thiết kế trang landing của bạn từ đầu.
* **Tải tệp .tempi từ máy tính:** file bạn trước đó đã được thiết kế theo kiểu chế độ nào thì sẽ giữ nguyên như vậy, không có phần chọn thay đổi chế độ.
* Đối với lựa chọn **“Sử dụng trang trắng”**, bạn chọn 01 trong các chế độ thiết kế tại:

<figure><img src="/files/b2NPWnPvCv24yzC3OPRm" alt=""><figcaption></figcaption></figure>

* **Responsive:** Giao diện thiết kế của bạn có thể tự điều chỉnh theo các kích thước màn hình hiển thị trên Desktop và Mobile.
* **Mobile only:** Bạn chỉ thiết kế trên giao diện mobile và tắt giao diện desktop. Khi khách hàng truy cập bằng Desktop, màn hình sẽ hiển thị bé lại bằng khung hình Mobile.&#x20;


# Hàng

Hướng dẫn chi tiết về cách chỉnh sửa và tạo kiểu cho Hàng trong trình kéo thả Website/Landing page

**Hàng** là khối cơ bản chính của việc xây dựng thiết kế trên Tempi. **Hàng** chứa các loại bố cục và tất cả các phần tử khác bên trong nó. Để bắt đầu thiết kế trang của mình, trước tiên bạn cần phải thêm **Bố cục** để có thể kéo các phần tử vào bên trong Hàng.&#x20;

## Cách thêm Hàng

**Bước 1:** Tại vị trí mà bạn muốn thêm phần tử, bấm chọn **Thêm bố cục hoặc khối được xây dựng sẵn.**

<div align="center"><figure><img src="/files/LLyBfvGY32ESjTTRfzrp" alt="" width="464"><figcaption></figcaption></figure></div>

**Bước 2:** Chọn bố cục mà bạn mong muốn để tạo các khối bên trong hàng và kéo thả phần tử vào các khối tương ứng.

<figure><img src="/files/Etvm3qHnyl7NQs2uFZln" alt=""><figcaption></figcaption></figure>

## Cài đặt Hàng

**Bước 1:** Di chuột vào hàng để hiển thị thanh cài đặt nằm ở góc phải của Hàng.

<figure><img src="/files/bjLhCUFm5bbmpHyALOP3" alt=""><figcaption></figcaption></figure>

**Bước 2:** Chỉnh sửa chung các khối trong Hàng.

*Hướng dẫn theo thứ tự hiển thị từ trái sang phải*

* **Chỉnh sửa bố cục Hàng:** Bạn có thể chọn nhanh bố cục có sẵn hoặc sửa bố cục thủ công theo đơn vị %
* **Di chuyển khối xuống dưới/lên trên:** Di chuyển khối xuống dưới hoặc lên trên mà không cần thiết kế lại
* **Ẩn/Hiện trên thiết bị:** Cài đặt để khối Ẩn/Hiện trên Máy tính/Điện thoại

  <img src="/files/DBab0felZVKSCPF18E5x" alt="" data-size="original">
* **Cấu hình hàng:** Chỉnh sửa kích thước nội dung/kiểu/hiệu ứng/nâng cao cho Hàng


# Cột

Hướng dẫn chi tiết cách sử dụng Cột trên Trình kéo thả Website/Landing page

Cột là lớp bên trong trong Hàng. Hàng sẽ chứa Cột và các Phần tử bên trong nó. Có thể thêm nhiều Cột ở trong 1 Hàng. Bạn có thể tạo nhiều Cột vào trong một Hàng hoặc 1 Cột cụ thể.

## Cách thêm Cột&#x20;

**Bước 1:** Tại vị trí mà bạn muốn thêm cột, bấm chọn **Thêm bố cục hoặc khối được xây dựng sẵn.**

<figure><img src="/files/sWaFUTDAqwmCr1mZG36L" alt="" width="464"><figcaption></figcaption></figure>

**Bước 2:** Chọn bố cục mà bạn mong muốn để tạo các Cột bên trong hàng và kéo thả phần tử vào các Cột tương ứng.

<figure><img src="/files/4IzJoLRMOiUiC5xKKQWF" alt=""><figcaption></figcaption></figure>

## Cài đặt Cột

**Bước 1:** Di chuột vào cột cho đến khi thấy biểu tượng <img src="/files/leZ12aUUacLMQcIkX66A" alt="" data-size="original"> ở góc phải trên cùng của cột và bấm chọn biểu tượng đó để mở thanh chỉnh sửa.

<figure><img src="/files/p3cyO7ehkgasxVX2YRIy" alt=""><figcaption></figcaption></figure>

**Bước 2:** Chỉnh sửa Cột.

*Hướng dẫn theo thứ tự hiển thị từ trái sang phải*

* **Dịch phần tử sang trái/ phải:** Di chuyển cột sang trái/phải cột khác
* **Gắn link:** Thêm Sự kiện hoặc Chuyển đổi cho Cột
* **Cấu hình cột:** Chỉnh sửa kích thước nội dung/kiểu/hiển thị/nâng cao cho Cột
* **Nhân bản:** Nhân bản cột trong hàng


# Khối dựng sẵn

Hướng dẫn chi tiết về cách sử dụng Khối dựng sẵn trên Trình kéo thả Website/Landing page

Khối dựng sẵn là các khối đã được chúng tôi xây dựng sẵn theo nhiều loại bố cục khác nhau. Sử dụng khối được xây dựng sẵn sẽ giúp bạn tiết kiệm tối đa thời gian thiết kế cho Website/Landing page của mình.&#x20;

## Cách thêm Khối dựng sẵn

Bước 1: Tại vị trí mà bạn muốn thêm phần tử, bấm chọn Thêm bố cục hoặc khối được xây dựng sẵn để mở danh sách Bố cục và Khối đã được chúng tôi xây dựng sẵn.

<figure><img src="/files/gm5Rih5LpATZ52TeHoFi" alt="" width="464"><figcaption></figcaption></figure>

**Bước 2:** Chọn Khối mà bạn muốn sử dụng và chỉnh sửa tương tự như chỉnh sửa Hàng/Cột/Phần tử.

<figure><img src="/files/3boogVGdmiNF3QwSv3Y5" alt=""><figcaption></figcaption></figure>

{% content-ref url="/pages/ak1i3pFGLxFtkqRxFbf3" %}
[Hàng](/cac-thanh-phan-co-ban-tren-tempi/hang)
{% endcontent-ref %}

{% content-ref url="/pages/qFbzCN23fO7OOQFdvmTH" %}
[Cột](/cac-thanh-phan-co-ban-tren-tempi/cot)
{% endcontent-ref %}

{% content-ref url="/pages/W726uiIDEIj6GJ2xkIPe" %}
[Phần tử](/cac-thanh-phan-co-ban-tren-tempi/phan-tu)
{% endcontent-ref %}


# Phần tử

Hướng dẫn về cách sử dụng Phần tử trên Trình kéo thả Website/Landing page

Phần tử sẽ nằm trong Cột. Bạn có thể kéo thả nhiều Phần tử vào trong một Cột.

## Cách thêm phần tử

**Bước 1:** Để thêm phần tử vào Cột, trước tiên bạn cần tạo ra Cột.

{% content-ref url="/pages/qFbzCN23fO7OOQFdvmTH" %}
[Cột](/cac-thanh-phan-co-ban-tren-tempi/cot)
{% endcontent-ref %}

**Bước 2:** Bấm vào nút **"+"** tại cột mà bạn muốn thêm phần tử hoặc bấm vào nút **"+"** tại thanh menu dọc bên trái màn hình để mở Bảng phần tử. Sau đó chỉ cần lựa chọn phần tử để kéo thả vào cột tuỳ ý.

<figure><img src="/files/3xDKsRubJ46GIgVQeIfq" alt=""><figcaption></figcaption></figure>

**Bước 3:** Sau khi kéo thả phần tử vào vị trí bạn mong muốn, bấm trực tiếp vào phần tử để mở thanh cài đặt tương ứng với từng phần tử và chỉnh sửa tuỳ ý.

<figure><img src="/files/8VTq6GshVkPJDy1Tf9wV" alt=""><figcaption></figcaption></figure>


# Đoạn văn

Hướng dẫn chi tiết cách sử dụng Đoạn văn trên Trình kéo thả Website/Landing page

### Cách thêm Đoạn văn <a href="#cach-them-doan-van" id="cach-them-doan-van"></a>

Tại vị trí mà bạn muốn thêm đoạn văn, kéo phần tử **Đoạn văn** vào bố cục có sẵn. Khi vị trí hiển thị màu xanh (ảnh) thì có nghĩa là bạn có thể đặt phần tử vào vị trí đó.

<figure><img src="/files/6TgJFBipAJI4LbI7E9eN" alt=""><figcaption></figcaption></figure>

### Cách cài đặt Đoạn văn <a href="#cach-cai-dat-doan-van" id="cach-cai-dat-doan-van"></a>

Bấm vào phần tử Đoạn văn -> Bấm **Chỉnh sửa đoạn văn** rồi chỉnh sửa đoạn văn tuỳ ý.

<figure><img src="/files/qTyEzzl5o6rNml1vR5Ya" alt=""><figcaption></figcaption></figure>

Hướng dẫn theo thứ tự từ trái qua phải, từ trên xuống dưới:

<figure><img src="/files/xEj3BvOCl7pMaPP58Ddg" alt=""><figcaption></figcaption></figure>

* Chỉnh sửa màu của Đoạn văn
* Chỉnh sửa Tiêu đề 1/2/3,... Đoạn văn
* Lựa chọn phông chữ
* Chỉnh sửa cỡ chữ (Lựa chọn cỡ chữ có sẵn hoặc nhập cỡ chữ tuỳ ý)
* Khoảng cách trong Đoạn văn
* Căn chỉnh trái/giữa/phải/căn lề 2 bên
* Đánh dấu/Đánh số đầu dòng
* In đậm
* In nghiêng
* Gạch chân
* Gạch ngang
* Gắn link (Cài đặt Mở trang trong website hoặc Nhập liên kết)
* Cài đặt Hiệu ứng & Cài đặt Nâng cao

<br>


# Hình ảnh

Hướng dẫn chi tiết cách sử dụng Hình ảnh trên Trình kéo thả Website/Landing page

### Cách thêm Hình ảnh <a href="#cach-them-hinh-anh" id="cach-them-hinh-anh"></a>

Tại vị trí mà bạn muốn thêm đoạn văn, kéo phần tử **Hình ảnh** vào bố cục có sẵn. Khi vị trí hiển thị màu xanh (ảnh) thì có nghĩa là bạn có thể đặt phần tử vào vị trí đó.

<figure><img src="/files/OVdq32m5KcyhBdEIxhZS" alt=""><figcaption></figcaption></figure>

### Cách cài đặt Hình ảnh <a href="#cach-cai-dat-hinh-anh" id="cach-cai-dat-hinh-anh"></a>

Bấm vào phần tử Hình ảnh để mở thanh cài đặt hình ảnh.

<figure><img src="/files/EMu8DZ1FBhMwiaYnJ92m" alt=""><figcaption></figcaption></figure>

Hướng dẫn theo thứ tự từ trái qua phải:

* Gắn link (Cài đặt Mở trang trong website, Mở liên kết, Cuộn trong trang, Email, Số điện thoại)
* Cấu hình chi tiết Hình ảnh (Bo góc, Chiều cao, Chiều rộng, Phóng to khi click ảnh, Hiệu ứng, Cài đặt nâng cao)
* Nhân bản
* Xoá


# Nút bấm

Hướng dẫn chi tiết cách sử dụng Nút bấm trên Trình kéo thả Website/Landing page

### Cách thêm Nút bấm <a href="#cach-them-nut-bam" id="cach-them-nut-bam"></a>

Tại vị trí mà bạn muốn thêm nút bấm, kéo phần tử **Nút bấm** vào bố cục có sẵn. Khi vị trí hiển thị màu xanh (ảnh) thì có nghĩa là bạn có thể đặt phần tử vào vị trí đó.<br>

<figure><img src="/files/ikzdOMxxpMfeD4rilmAF" alt=""><figcaption></figcaption></figure>

### Cách cài đặt Nút bấm <a href="#cach-cai-dat-nut-bam" id="cach-cai-dat-nut-bam"></a>

Bước 1: Bấm vào phần tử Nút bấm để chỉnh sửa nội dung trong Nút bấm.<br>

<figure><img src="/files/YkluXO1OkA1CRnTSrk9Z" alt=""><figcaption></figcaption></figure>

Hướng dẫn theo thứ tự từ trái qua phải, từ trên xuống dưới:

* Chỉnh sửa phông chữ (Chọn phông chữ, Độ dày phông chữ, Cỡ chữ, Khoảng cách dòng, Khoảng cách chữ)
* Chỉnh sửa kiểu Nút bấm (Chiều rộng, chiều cao, bo góc)
* Thêm icon cho Nút bấm
* Căn trái/giữa/phải
* Cài đặt màu Nền/Chữ/Viền/Bóng cho Nút bấm
* Gắn link (Mở trang trong website, Mở liên kết, Cuộn trong trang, Email, Số điện thoại)
* Cài đặt Hiệu ứng & Cài đặt Nâng cao
* Nhân bản
* Xoá


# Thư viện ảnh

Hướng dẫn chi tiết cách sử dụng Thư viện ảnh trên Trình kéo thả Website/Landing page

### Cách thêm Thư viện ảnh <a href="#cach-them-thu-vien-anh" id="cach-them-thu-vien-anh"></a>

Tại vị trí mà bạn muốn thêm thư viện ảnh, kéo phần tử **Thư viện ảnh** vào bố cục có sẵn. Khi vị trí hiển thị màu xanh (ảnh) thì có nghĩa là bạn có thể đặt phần tử vào vị trí đó.

<figure><img src="/files/V1nhRzESPsB4EHipFvQN" alt=""><figcaption></figcaption></figure>

### Cách tải ảnh lên Thư viện ảnh <a href="#cach-tai-anh-len-thu-vien-anh" id="cach-tai-anh-len-thu-vien-anh"></a>

Bước 1: Bấm vào Thư viện ảnh -> Bấm vào **Quản lý ảnh**

<figure><img src="/files/0Fs5XK8lcXVBShqlsLxP" alt=""><figcaption></figcaption></figure>

Bước 2: Bấm vào từng ảnh có sẵn để thay thế bằng ảnh của bạn hoặc Tải ảnh lên từ thiết bị

<br>

<figure><img src="/files/COYTeEpqN1IhfrO83RRh" alt=""><figcaption></figcaption></figure>

### Cách cấu hình Thư viện ảnh <a href="#cach-cau-hinh-thu-vien-anh" id="cach-cau-hinh-thu-vien-anh"></a>

Bấm vào phần tử Thư viện ảnh -> Bấm vào icon như ảnh minh hoạ để mở bảng Cấu hình Thư viện ảnh.

<br>

<figure><img src="/files/gpqwDYcCCwEtGRulljvV" alt=""><figcaption></figcaption></figure>

Hướng dẫn theo thứ tự từ trên xuống dưới:

* Bố cục: Kiểu hiển thị Thư viện ảnh
* Số cột: Số cột hiển thị trên 1 hàng
* Khoảng cách giữa các ảnh
* Phóng to khi click ảnh (Chỉ xem được ở chế độ Xem trước và Đã xuất bản)


# Slideshow

Hướng dẫn chi tiết cách sử dụng Slideshow trên Trình kéo thả Website/Landing page

### Cách thêm Slideshow[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/slideshow/#c%C3%A1ch-th%C3%AAm-slideshow) <a href="#cach-them-slideshow" id="cach-them-slideshow"></a>

Tại vị trí mà bạn muốn thêm slideshow, kéo phần tử **Slideshow** vào bố cục có sẵn. Khi vị trí hiển thị màu xanh (ảnh) thì có nghĩa là bạn có thể đặt phần tử vào vị trí đó.

<br>

<div align="center"><img src="https://lh3.googleusercontent.com/bXmfHBwFGRoJHtNOyUVGNSO1COeWAldWLY8h9BtIGEDN-KLShq8oXMTb9H9X4Nw96DaO8auKfROdiiRZBDkZBqALqwF_tzsf=rw-w2304" alt="Thêm slideshow vào bố cục"></div>

<br>

### Cách tải ảnh lên Slideshow[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/slideshow/#c%C3%A1ch-t%E1%BA%A3i-%E1%BA%A3nh-l%C3%AAn-slideshow) <a href="#cach-tai-anh-len-slideshow" id="cach-tai-anh-len-slideshow"></a>

Bước 1: Bấm vào phần tử Slideshow -> Bấm vào **Quản lý ảnh**

<br>

<div align="center"><img src="https://lh3.googleusercontent.com/skx-OMB9-5z3SdaAoQOAtUA5g4hOeIXEEsMikL0Y0G_7W3x_Va1G-R5wuIHTdXJX12iu26G8CxZ2-9ac5O4ZX4-VZc0e3ImC=rw-w1274" alt=""></div>

<br>

Bước 2: Bấm vào từng ảnh có sẵn để thay thế bằng ảnh của bạn hoặc Tải ảnh lên từ thiết bị

<br>

<div align="center"><img src="https://lh3.googleusercontent.com/Fst5_PM72oOdRVHTTgGOxhYpV5SwWazIwHj5SRYdLDSs8NxXk94BlfwaQjKqdtTSEgeuHmQHsXpwucLgeLnno9Bg1HtubKKO=rw-w1628" alt="Cài đặt slideshow"></div>

<br>

### Cách cấu hình Slideshow[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/slideshow/#c%C3%A1ch-c%E1%BA%A5u-h%C3%ACnh-slideshow) <a href="#cach-cau-hinh-slideshow" id="cach-cau-hinh-slideshow"></a>

Bấm vào Slideshow -> Bấm vào icon như ảnh minh hoạ để mở bảng Cấu hình Slideshow .

<br>

<div align="center"><img src="https://lh3.googleusercontent.com/Jb1UcaPOF5thVYRyAlEuIXvegxI7wtgGjwRlv4WXPqGOErAdgFFNL7_mWkIbXhZIBFzMC0-dzaMX1HsTQs31864PI8MpfuZ1=rw-w2630" alt="Cài đặt slideshow"></div>

<br>

#### Nội dung[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/slideshow/#n%E1%BB%99i-dung) <a href="#noi-dung" id="noi-dung"></a>

Hướng dẫn theo thứ tự từ trên xuống dưới

* Kiểu hiển thị: Chọn 1 trong 2 chế độ hiển thị Không có thumbnail/Có thumbnail
* Chiều cao: Điều chỉnh chiều cao của Slideshow
* Số lượng phần tử hiển thị trên 1 hàng: Số lượng ảnh hiển thị trên 1 hàng
* Màu nút trượt
* Màu mũi tên điều hướng
* Tự động trượt: Bật/Tắt chế độ ảnh tự động trượt trong Slideshow
* Lặp lại: Bật/Tắt chế độ tự động lặp lại ảnh trong Slideshow
* Tự động căn chỉnh ảnh: Bật/Tắt chế độ tự động căn chỉnh chiều cao/chiều rộng của ảnh

#### Kiểu[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/slideshow/#ki%E1%BB%83u) <a href="#kieu" id="kieu"></a>

Bo góc: Điều chỉnh bo góc cho Slideshow


# Video

Hướng dẫn chi tiết cách sử dụng Video trên Trình kéo thả Website/Landing page

### Cách thêm Video <a href="#cach-them-video" id="cach-them-video"></a>

Tại vị trí mà bạn muốn thêm video, kéo phần tử **Video** vào bố cục có sẵn. Khi vị trí hiển thị màu xanh (ảnh) thì có nghĩa là bạn có thể đặt phần tử vào vị trí đó.

<figure><img src="/files/YAkXStltTpTq1sRgsCp3" alt=""><figcaption></figcaption></figure>

### Cách cài đặt Video <a href="#cach-cai-dat-video" id="cach-cai-dat-video"></a>

Bấm vào phần tử Video -> Bấm vào icon như ảnh minh hoạ để mở bảng Cấu hình video

<figure><img src="/files/QpEJUC2qFUEFrXym9Uok" alt=""><figcaption></figcaption></figure>

Hướng dẫn theo thứ tự từ trên xuống dưới:

* Đường dẫn Youtube: Nhập đường dẫn Youtube của video
* Dùng đường dẫn video: Nhập đường dẫn bất kỳ của video
* Tải lên video: Tải video lên từ thiết bị (chỉ tải lên video có định dạng MP4, WebM, OGV)
* Tự động phát: Tự động phát video khi vào trang
* Lặp lại: Tự động lặp lại video
* Hiển thị thanh điều khiển video: Bật/Tắt thanh điều khiển video khi trỏ chuột vào video
* Cài đặt Hiệu ứng & Cài đặt Nâng cao

### Cách tuỳ chỉnh kích thước video <a href="#cach-tuy-chinh-kich-thuoc-video" id="cach-tuy-chinh-kich-thuoc-video"></a>

Bấm vào Video -> Bấm vào icon **Tuỳ chỉnh kích thước** để chỉnh chiều rộng của video.

<br>

<figure><img src="/files/z8eqh2pUIkRnzXhbRRj6" alt=""><figcaption></figcaption></figure>


# Icon

Hướng dẫn chi tiết cách sử dụng Icon trên Trình kéo thả Website/Landing page

### Cách thêm Icon[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/icon/#c%C3%A1ch-th%C3%AAm-icon) <a href="#cach-them-icon" id="cach-them-icon"></a>

Tại vị trí mà bạn muốn thêm icon, kéo phần tử **Icon** vào bố cục có sẵn. Khi vị trí hiển thị màu xanh (ảnh) thì có nghĩa là bạn có thể đặt phần tử vào vị trí đó.

<div align="center"><img src="https://lh3.googleusercontent.com/xa_y-3DLgNR1ZmXK6dgJCz-rsJkvtvumBakTFBc8m_bGaXnozmDh2a5wQtSdgo3Yq27JWiSrvBm2ntIwD5n-Po00hjxFnqNm=rw-w3343" alt="Thêm icon vào bố cục"></div>

### Cách cài đặt Icon[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/icon/#c%C3%A1ch-c%C3%A0i-%C4%91%E1%BA%B7t-icon) <a href="#cach-cai-dat-icon" id="cach-cai-dat-icon"></a>

Bấm vào phần tử icon để mở thanh cài đặt Icon.

<div align="center"><img src="https://lh3.googleusercontent.com/-j_W9FvCvNfh0BCUvFPIk_X33Qkr3YyyJBFPhtusmkiYl_vLgnRFjcCP72Hdy6vavNWPK52ZwgKGYq0lC0NTyxSKrVBvdAm1=rw-w1272" alt="Cài đặt icon"></div>

Hướng dẫn theo thứ tự từ trái qua phải:

* Tuỳ chỉnh biểu tượng: Chọn icon, kích thước và màu sắc của Icon
* Căn trái/giữa/phải
* Cài đặt Hiệu ứng & Cài đặt Nâng cao
* Nhân bản
* Xoá


# Tab

Hướng dẫn chi tiết cách sử dụng Tab trên Trình kéo thả Website/Landing page

### Cách thêm Tab[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/tab/#c%C3%A1ch-th%C3%AAm-tab) <a href="#cach-them-tab" id="cach-them-tab"></a>

Tại vị trí mà bạn muốn thêm tab, kéo phần tử **Tab** vào bố cục có sẵn. Khi vị trí hiển thị màu xanh (ảnh) thì có nghĩa là bạn có thể đặt phần tử vào vị trí đó.

<div align="center"><img src="https://lh3.googleusercontent.com/HbVUtyp2lCg03s3xtN5EiVNH1vCgdLaktdJ5x4ECjgr5oDBD-aLIRRYoyyZpmh6IwBwAUqhBTLI48CBRCI2hUdHfMIcZ5ZU=rw-w2304" alt="Thêm tab vào bố cục"></div>

### Cách cài đặt Tab[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/tab/#c%C3%A1ch-c%C3%A0i-%C4%91%E1%BA%B7t-tab) <a href="#cach-cai-dat-tab" id="cach-cai-dat-tab"></a>

Bấm vào phần tử tab để mở thanh cài đặt Tab. Điều chỉnh theo từng Nội dung/Kiểu cho Tab.

<div align="center"><img src="https://lh3.googleusercontent.com/nBbdvgauPguUu2Ef-MAeZI36DaK1HRZ7q1mXFTVMZw_m2Ka67ERDl_hgGXGdypvQB3X1Yh0xPDehAc0DA5Mx9tY9qpDzZCXmXQ=rw-w3054" alt="Cài đặt icon"></div>

#### Nội dung[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/tab/#n%E1%BB%99i-dung) <a href="#noi-dung" id="noi-dung"></a>

* Danh sách tab: Cài đặt tiêu đề cho từng tab
* Thêm tab mới

#### Kiểu[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/tab/#ki%E1%BB%83u) <a href="#kieu" id="kieu"></a>

* Kiểu hiển thị: Lựa chọn kiểu hiển thị chung cho Tab
* Căn chỉnh: Căn chỉnh trái/giữa/phải/căn lề đều 2 bên
* Màu tab: Cài đặt màu chung của Tab
* Nền: Cài đặt màu sắc hoặc hình ảnh cho nền của Tab


# Đếm ngược

Hướng dẫn chi tiết cách sử dụng Đếm ngược trên Trình kéo thả Website/Landing page

### Cách thêm Đếm ngược[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/dem-nguoc/#c%C3%A1ch-th%C3%AAm-%C4%91%E1%BA%BFm-ng%C6%B0%E1%BB%A3c) <a href="#cach-them-dem-nguoc" id="cach-them-dem-nguoc"></a>

Tại vị trí mà bạn muốn thêm đếm ngược, kéo phần tử **Đếm ngược** vào bố cục có sẵn. Khi vị trí hiển thị màu xanh (ảnh) thì có nghĩa là bạn có thể đặt phần tử vào vị trí đó.

<div align="center"><img src="https://lh3.googleusercontent.com/JY6XpFwXLP24dYNtRWPUw-2SCEirTBX-r6uM97K69sDJs-rMxZFnCne4aXuVaj1yfJDot8InocnEUOUMwqDlvUAX6fc3Co4=rw-w2304" alt="Thêm đếm ngược vào bố cục"></div>

### Cách cài đặt Đếm ngược[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/dem-nguoc/#c%C3%A1ch-c%C3%A0i-%C4%91%E1%BA%B7t-%C4%91%E1%BA%BFm-ng%C6%B0%E1%BB%A3c) <a href="#cach-cai-dat-dem-nguoc" id="cach-cai-dat-dem-nguoc"></a>

Bấm vào phần tử đếm ngược để mở thanh cài đặt Đếm ngược.

<div align="center"><img src="https://lh3.googleusercontent.com/Hj74RF0SuOqNJSCCYmjswvQI6fnFMj5yieTjDEEd1vphIzPUl7UeTTXyVi7byZGO3NpROf2hAAjCxZEjMMnkFC-CFevA6q5K=rw-w1000" alt="Cài đặt icon" height="811" width="936"></div>

Hướng dẫn theo thứ tự từ trái qua phải:

* Tuỳ chỉnh đồng hồ đếm ngược: Cài đặt thời điểm đồng hồ đếm ngược kết thúc (Cài đặt tuỳ chọn hiển thị số Ngày, Giờ, Phút, Giây)
* Hiển thị và khoảng cách: Bật/Tắt hiển thị nhãn, cài đặt Khoảng cách giữa các chữ số trong Đếm ngược, cài đặt Khoảng cách của số đếm ngược với nhãn
* Cài đặt phông chữ/kiểu chữ/màu chữ,... cho chữ số và nhãn
* Căn chỉnh trái/giữa/phải
* Cài đặt màu Viền/Nền/Bóng của Đếm ngược
* Cài đặt Hiệu ứng & Cài đặt Nâng cao
* Xoá


# Danh sách Icon

Hướng dẫn chi tiết cách sử dụng Danh sách Icon trên Trình kéo thả Website/Landing page

### Cách thêm Danh sách Icon[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/danh-sach-icon/#c%C3%A1ch-th%C3%AAm-danh-s%C3%A1ch-icon) <a href="#cach-them-danh-sach-icon" id="cach-them-danh-sach-icon"></a>

Tại vị trí mà bạn muốn thêm danh sách Icon, kéo phần tử **Danh sách Icon** vào bố cục có sẵn. Khi vị trí hiển thị màu xanh (ảnh) thì có nghĩa là bạn có thể đặt phần tử vào vị trí đó.

<div align="center"><img src="https://lh3.googleusercontent.com/2EBGMk4ScZM2o72qjeRblF65Lr4bi85xBDWyfr0m9r75h094Qn715IQgzYrABokQyRMKcOnnxVKnAkxYUBklQjlkQDe7vGCC=rw-w2304" alt="Thêm danh sách icon vào bố cục"></div>

### Cách cài đặt Icon[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/danh-sach-icon/#c%C3%A1ch-c%C3%A0i-%C4%91%E1%BA%B7t-icon) <a href="#cach-cai-dat-icon" id="cach-cai-dat-icon"></a>

Bấm vào Icon đầu dòng để mở bảng cài đặt Icon.

<div align="center"><img src="https://lh3.googleusercontent.com/lE35ZidxxOI2WAQ4UQ8y3YBYmUystBpPYkjgQ37_XeXWW77_qVvkRJQLJ98KlKdYlO6cudR_jjA9wl2it8vXpK7NQT9GYtNo=rw-w1292" alt="Cài đặt icon trong Danh sách icon"></div>

Hướng dẫn theo thứ tự từ trên xuống dưới:

* Tuỳ chỉnh biểu tượng: Chọn icon, đổi màu, cài đặt kích thước
* Căn trái/giữa/phải
* Cài đặt màu Nền/Viền/Bóng cho Icon
* Gắn link: Cài đặt Mở trang trong website, Mở liên kết, Cuộn trong trang, Email, Số điện thoại
* Cài đặt Hiệu ứng & Cài đặt Nâng cao
* Nhân bản
* Xoá

### Cách cài đặt Văn bản trong Danh sách Icon[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/danh-sach-icon/#c%C3%A1ch-c%C3%A0i-%C4%91%E1%BA%B7t-v%C4%83n-b%E1%BA%A3n-trong-danh-s%C3%A1ch-icon) <a href="#cach-cai-dat-van-ban-trong-danh-sach-icon" id="cach-cai-dat-van-ban-trong-danh-sach-icon"></a>

Bấm vào Văn bản trong phần tử Danh sách Icon -> Bấm vào Chỉnh sửa văn bản -> Chỉnh sửa tương tự như cách chỉnh sửa phần tử [Đoạn văn](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/danh-sach-icon/doan-van).

<div align="center"><img src="https://lh3.googleusercontent.com/cep8CV766Typp9Od2yZXw-Jc8asXyW-nZvxkLGOHpIR94MwzE-OmGyacwWCkCxtSFQtzFGStAwexuFXSheHbJ4P6rNxE6I_5=rw-w1314" alt="Cài đặt văn bản trong Danh sách icon"></div>

### Cách cài đặt chung Danh sách Icon[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/danh-sach-icon/#c%C3%A1ch-c%C3%A0i-%C4%91%E1%BA%B7t-chung-danh-s%C3%A1ch-icon) <a href="#cach-cai-dat-chung-danh-sach-icon" id="cach-cai-dat-chung-danh-sach-icon"></a>

Bấm vào icon như ảnh minh hoạ để mở bảng cài đặt chung cho Danh sách Icon.

<div align="center"><img src="https://lh3.googleusercontent.com/R6T0rHZK088nY8CZjAIL8a8witGTaGVBF_XnjLg8Vz61uObp6rdq8srsbZZeiYPONFPHWFYx8dh7I_sCQoh5MW3T291IcXiH=rw-w1528" alt="Cài đặt văn bản trong Danh sách icon"></div>

Hướng dẫn theo thứ tự từ trái qua phải:

* Điều chỉnh khoảng cách giữa Icon và Văn bản; Điều chỉnh vị trí của Danh sách Icon ở Phía trên/Ở giữa/Phía dưới
* Căn lề trái/giữa/phải
* Cài đặt màu Nền/Viền/Bóng
* Cài đặt Hiệu ứng & Cài đặt Nâng cao
* Nhân bản
* Xoá


# Nội dung thu gọn

Hướng dẫn chi tiết cách sử dụng Nội dung thu gọn trên Trình kéo thả Website/Landing page

### Cách thêm Nội dung thu gọn[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/noi-dung-thu-gon/#c%C3%A1ch-th%C3%AAm-n%E1%BB%99i-dung-thu-g%E1%BB%8Dn) <a href="#cach-them-noi-dung-thu-gon" id="cach-them-noi-dung-thu-gon"></a>

Tại vị trí mà bạn muốn thêm nội dung thu gọn, kéo phần tử **Nội dung thu gọn** vào bố cục có sẵn. Khi vị trí hiển thị màu xanh (ảnh) thì có nghĩa là bạn có thể đặt phần tử vào vị trí đó.

<div align="center"><img src="https://lh3.googleusercontent.com/afEbjp3juLA10By4PPtUKmyWew8kOjunpSVpTPkyZNVHgUv4oL-f97fuDHVvKydt1XnFIlxf1ffDLwgjq_VAN892Ywss_fm3=rw-w2304" alt="Thêm nội dung thu gọn vào bố cục"></div>

### Cách chỉnh sửa tiêu đề và nội dung cho Nội dung thu gọn[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/noi-dung-thu-gon/#c%C3%A1ch-ch%E1%BB%89nh-s%E1%BB%ADa-ti%C3%AAu-%C4%91%E1%BB%81-v%C3%A0-n%E1%BB%99i-dung-cho-n%E1%BB%99i-dung-thu-g%E1%BB%8Dn) <a href="#cach-chinh-sua-tieu-de-va-noi-dung-cho-noi-dung-thu-gon" id="cach-chinh-sua-tieu-de-va-noi-dung-cho-noi-dung-thu-gon"></a>

Bước 1: Bấm trực tiếp vào phần **Item 1** để chỉnh sửa tiêu đề.

<div align="center"><img src="https://lh3.googleusercontent.com/k--_QQkko5rxoEyr1YrBh2oBPn2z02_LuM6qY718pc7x_xhdbv486peLizj0q2g5etIlak8P2VRdW3Mtz3IH0uoEC670jlk-Fg=rw-w1290" alt="Sửa tiêu đề nội dung thu gọn"></div>

Bước 2: Kéo phần tử bất kỳ vào vị trí có dấu "+" (ảnh minh hoạ) để thêm nội dung cụ thể cho từng Item trong Nội dung thu gọn.

<div align="center"><img src="https://lh3.googleusercontent.com/TRSVlhPaO05VubWK_pzPGdFAD-GfARQpvXMEqzLu2VK1-MC5JZioazLXIrb3mjlmChv4NVNt9qiLlnTQVgvdkU1n0YiF2u5s3w=rw-w3338" alt="Sửa nội dung cho từng Item nội dung thu gọn"></div>

Bước 3: Chỉnh sửa phần tử đã kéo thả trong Item như các phần tử cơ bản khác.

### Cách cài đặt Nội dung thu gọn[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/noi-dung-thu-gon/#c%C3%A1ch-c%C3%A0i-%C4%91%E1%BA%B7t-n%E1%BB%99i-dung-thu-g%E1%BB%8Dn) <a href="#cach-cai-dat-noi-dung-thu-gon" id="cach-cai-dat-noi-dung-thu-gon"></a>

Bấm vào phần tử Nội dung thu gọn để mở thanh cài đặt Nội dung thu gọn.

<div align="center"><img src="https://lh3.googleusercontent.com/2YnA2VGnhR_vuEEX6wh3a1uuLRYyuGM4aVkSSbP-jxRNZO4xiWjvheX4ZGGh27YD_4fX8M0xGVRLpN5DLFuu1QfmNPzOmLB8bw=rw-w1276" alt="Cài đặt nội dung thu gọn"></div>

Hướng dẫn theo thứ tự từ trái qua phải:

**Tuỳ chỉnh nội dung thu gọn**

Danh sách:

* Khoảng thời gian (s): Thời gian nội dung trong Item hiển thị khi bấm vào tiêu đề của Item
* Khoảng cách giữa các mục: Khoảng cách giữa các Item
* Vị trị biểu tượng: Vị trí đặt nút mở nội dung trong Item

Nội dung:

* Căn chỉnh: Điều chỉnh vị trí căn trái/giữa/phải cho nội dung trong Item
* Padding: Điều chỉnh vị trí tuỳ ý cho nội dung trong Item

**Cài đặt Phông chữ, Độ dày phông chữ, Cỡ chữ, Khoảng cách dòng, Khoảng cách chữ cho Tiêu đề trong Item**

**Ảnh nền: Tải ảnh từ thiết bị hoặc dùng đường dẫn ảnh để làm ảnh nền cho Nội dung thu gọn**

**Màu khối**

* Chữ: Cài đặt màu chữ cho Tiêu đề
* Icon: Cài đặt màu của nút mở nội dung trong Item
* Nền: Cài đặt màu nền cho toàn bộ nội dung thu gọn
* Viền: Cài đặt Bo góc và Kiểu viền cho Nội dung thu gọn
* Tuỳ chỉnh kích thước: Cài đặt chiều rộng cho Nội dung thu gọn


# Đường phân chia

Hướng dẫn chi tiết cách sử dụng Đường phân chia trên Trình kéo thả Website/Landing page

### Cách thêm Đường phân chia[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/duong-phan-chia/#c%C3%A1ch-th%C3%AAm-%C4%91%C6%B0%E1%BB%9Dng-ph%C3%A2n-chia) <a href="#cach-them-duong-phan-chia" id="cach-them-duong-phan-chia"></a>

Tại vị trí mà bạn muốn thêm đường phân chia, kéo phần tử **Đường phân chia** vào bố cục có sẵn. Khi vị trí hiển thị màu xanh (ảnh) thì có nghĩa là bạn có thể đặt phần tử vào vị trí đó.

<div align="center"><img src="https://lh3.googleusercontent.com/Zr7YKUDs47NzOGr3sjwsLAZJIk3eXCmSkYVAHvif-x1MXl2Vw_HEhzbFWIT3JB1NivlDtpff6BnaOP4WXsPJ2buhtgNU8ZNWfQ=rw-w2304" alt="Thêm đường phân chia vào bố cục"></div>

### Cách cài đặt Đường phân chia[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/duong-phan-chia/#c%C3%A1ch-c%C3%A0i-%C4%91%E1%BA%B7t-%C4%91%C6%B0%E1%BB%9Dng-ph%C3%A2n-chia) <a href="#cach-cai-dat-duong-phan-chia" id="cach-cai-dat-duong-phan-chia"></a>

Bấm vào phần tử đường phân chia để mở thanh cài đặt Đường phân chia.

<div align="center"><img src="https://lh3.googleusercontent.com/XinRUmaAS0LavZBMNLD_XTzEDtNwHbQQQA7pniec-t2smR0RVJLxt0U2nNcpO5DI0WpU1RUR-P73XcBhefSKk9rUp2eA0mTL=rw-w1784" alt="Cài đặt đường phân chia"></div>

Hướng dẫn theo thứ tự từ trái qua phải:

* Tuỳ chỉnh đường phân chia: Cài đặt Kiểu, Chiều rộng, Độ dày, Khoảng cách, Màu của Đường phân chia
* Thêm thành phần trang: Thêm văn bản hoặc icon vào Đường phân chia
* Căn trái/giữa/phải Đường phân chia
* Nhân bản
* Xoá


# Khoảng cách

Hướng dẫn chi tiết cách sử dụng Khoảng cách trên Trình kéo thả Website/Landing page

### Cách thêm Khoảng cách[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/khoang-cach/#c%C3%A1ch-th%C3%AAm-kho%E1%BA%A3ng-c%C3%A1ch) <a href="#cach-them-khoang-cach" id="cach-them-khoang-cach"></a>

Kéo phần tử **Khoảng cách** vào vị trí mà bạn muốn thêm khoảng cách. Khi vị trí hiển thị màu xanh (ảnh) thì có nghĩa là bạn có thể đặt phần tử vào vị trí đó.

<div align="center"><img src="https://lh3.googleusercontent.com/afEbjp3juLA10By4PPtUKmyWew8kOjunpSVpTPkyZNVHgUv4oL-f97fuDHVvKydt1XnFIlxf1ffDLwgjq_VAN892Ywss_fm3=rw-w2304" alt="Thêm khoảng cách vào bố cục"></div>

### Cách cài đặt Khoảng cách[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/khoang-cach/#c%C3%A1ch-c%C3%A0i-%C4%91%E1%BA%B7t-kho%E1%BA%A3ng-c%C3%A1ch) <a href="#cach-cai-dat-khoang-cach" id="cach-cai-dat-khoang-cach"></a>

Bấm vào phần tử Khoảng cách -> Bấm vào icon như ảnh minh hoạ để điều chỉnh chiều cao của khoảng cách

<div align="center"><img src="https://lh3.googleusercontent.com/IqKgBpVWSnSnD5D4o-cfuqLAIq9Cg7jJqnpl-aL-xR3lvYzEi9Sxr9bwyIsP0DAMXe4bV9Q3r4ReVgVkfeLU6aOyNc9oq_9Yjw=rw-w1644" alt="Cài đặt video"></div>


# Mã HTML

Hướng dẫn chi tiết cách sử dụng Mã HTML trên Trình kéo thả Website/Landing page

### Cách thêm HTML[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/ma-html/#c%C3%A1ch-th%C3%AAm-html) <a href="#cach-them-html" id="cach-them-html"></a>

Tại vị trí mà bạn muốn thêm mã HTML, kéo phần tử **Mã HTML** vào bố cục có sẵn. Khi vị trí hiển thị màu xanh (ảnh) thì có nghĩa là bạn có thể đặt phần tử vào vị trí đó.

<div align="center"><img src="https://lh3.googleusercontent.com/tFbW2VKulQd21ADKVhzZYnzIBB_upAyBgAcRWen8ur3wUX9fHyka8pw9F5JKp4IhJUm51FM8KAY6-1DLmjDd2kHQGOovBoLCAg=rw-w3341" alt="Thêm mã html vào bố cục"></div>

### Cách cấu hình Mã HTML[​](https://tempi.vn/huong-dan/cac-thanh-phan-co-ban-tren-tempi/phan-tu/ma-html/#c%C3%A1ch-c%E1%BA%A5u-h%C3%ACnh-m%C3%A3-html) <a href="#cach-cau-hinh-ma-html" id="cach-cau-hinh-ma-html"></a>

Bước 1: Bấm vào phần tử mã HTML -> Bấm vào icon như ảnh minh hoạ để mở bảng Cấu hình Mã HTML.

<div align="center"><img src="https://lh3.googleusercontent.com/StuhpdNejoTKYIk2oK9QSlP_ZbgM0-TbOEXCyI1wcylqDV41gecoZ8m-M_oYPzJZPRc0ZfMCR6CO6_AIZ56FKaAZ9-dui4rz4A=rw-w2916" alt="Cài đặt mã html" height="600" width="936"></div>

Bước 2: Dán đoạn mã HTML vào phần Nội dung.


# Form Thông Tin

Hướng dẫn chi tiết cách sử dụng Form trên Trình kéo thả Website/Landing page

## 1. **Cách thêm Phần tử**

**Bước 1 - Thêm phần tử:** Kéo thả phần tử Form vào trang thiết kế tương tự như cách thêm các phần tử khác[ **tại đây.**](/cac-thanh-phan-co-ban-tren-tempi/phan-tu)

![](/files/eOth544NHKBjVfaBgMwb)

**Bước 2 - Mở bảng cài đặt:** Click trực tiếp vào phần tử **Form** để mở bảng cài đặt

<figure><img src="/files/vlhnaK8Pe8dpgs1xBV7O" alt=""><figcaption></figcaption></figure>

**Bạn có thể chỉnh sửa form** *(theo thứ tự từ trái qua phải):*

* Thay đổi ảnh nền của form thông tin
* Thay đổi màu nền, màu viền, màu bóng và độ bóng của form thông tin
* Lưu dữ liệu: Lưu thông tin khách hàng về Email/Google Sheet/API
* Phản hồi: Cấu hình Popup hoặc Trang cảm ơn sau khi khách hàng điền form thông tin
* Thêm trường: Cài đặt các trường thông tin cần thu thập
* Cài đặt nâng cao
* Nhân bản
* Xoá

## 2. Cài đặt phần tử

### Lưu dữ liệu:

Bạn có thể lưu thông tin của khách hàng điền form qua 03 hình thức Gmail, Google Sheet và API.

<figure><img src="/files/JebVzETpAhpfkGJlUn5x" alt=""><figcaption></figcaption></figure>

{% content-ref url="/pages/A2LvQjgKknyDco90TWR6" %}
[Lưu data về Email](/phan-t-nang-cao/form-thong-tin/luu-data-ve-email)
{% endcontent-ref %}

{% content-ref url="/pages/2m57fOQPBi0QsfGGKOjL" %}
[Lưu data về Google Sheets](/phan-t-nang-cao/form-thong-tin/luu-data-ve-google-sheets)
{% endcontent-ref %}

{% content-ref url="/pages/Gd7yAkd3QISVlMQ8we5Q" %}
[Lưu data về API](/phan-t-nang-cao/form-thong-tin/luu-data-ve-api)
{% endcontent-ref %}

### Phản hồi:&#x20;

<figure><img src="/files/YXUE1JouRfTN2ceTRIIR" alt=""><figcaption></figcaption></figure>

Sau khi khách hàng hoàn thành điền form thông tin, bạn có thể cấu hình Popup hoặc Trang cảm ơn để thông báo khách hàng đã điền form thành công hoặc thất bại.

<figure><img src="/files/0MQI1U4aufSZDI7pnedL" alt=""><figcaption></figcaption></figure>

**Bạn có thể cấu hình Popup cảm ơn** *(theo thứ tự từ trên xuống dưới):*

* Tên của Popup
* Click chuột vào biểu tượng <img src="/files/esIkty6mj302UTpmcscf" alt="" data-size="line"> để hiển thị icon đóng popup
* Click chuột vào biểu tượng <img src="/files/esIkty6mj302UTpmcscf" alt="" data-size="line"> để popup hiện lên khi vào trang
* Click chuột vào biểu tượng <img src="/files/esIkty6mj302UTpmcscf" alt="" data-size="line"> để popup hiện lên khi thoát trang
* Hiện khi cuộn đến: Chọn vào mã mà hệ thống đã tự động gán cho form thông tin, popup sẽ tự động hiện lên khi cuộn đến form này
* Chiều rộng của popup được hiển thị theo thông số pixel
* Chiều cao của popup được hiển thị theo thông số pixel
* Màu backdrop: Là màu nền xung quanh popup khi popup được hiển thị
* Vị trí: Vị trí hiển thị của popup

**Cấu hình Popup thất bại tương tự như trên**

<figure><img src="/files/VrnEwysmKb8zqz54iAlX" alt=""><figcaption></figcaption></figure>

Bạn tạo 1 **Trang cảm ơn/ Thất bại** bất kỳ rồi dán đường dẫn của trang cảm ơn đó vào mục **URL trang cảm ơn/thất bại** để trang cảm ơn hiển thị sau khi khách hàng hoàn thành điền form thông tin.

### 3. Danh sách trường:

Bấm vào từng trường trong “Danh sách trường” để cài đặt dữ liệu:

<figure><img src="/files/qSUvsHSq5ii7xC0SVvrO" alt=""><figcaption></figcaption></figure>

**Bạn có thể cấu hình danh sách trường** *(theo thứ tự từ trên xuống dưới):*

* Loại: Các kiểu phân loại thông tin mà khách hàng có thể nhập trên form
* Tên lấy dự liệu: Là tên dữ liệu của trường
* Nhãn: Nhãn hiển thị của trường
* Chữ gợi nhắc: Chữ hiển thị bên trong ô nhập thông tin của trường
* Click vào biểu tượng <img src="/files/68CGdj6dfv85r32GM9Yx" alt="" data-size="line"> để bật/tắt chế độ bắt buộc nhập thông tin của trường
* Chiều rộng: Chiều rộng của trường được hiển thị theo thông số %
* Chiều cao: Chiều cao của trường được hiển thị theo thông số pixel

## Kiểu

Bạn có thể cấu hình các kiểu hiển thị của Form (Kiểu, căn chỉnh, nhãn, chữ input, khoảng cách,...)&#x20;

<figure><img src="/files/XdEceVHs90IARbxE3NlW" alt=""><figcaption></figcaption></figure>


# Lưu data về Email

Hướng dẫn chi tiết cách Lưu thông tin về Email

**Bước 1:** Mở trang bạn muốn lưu data về Email. Click trực tiếp vào phần tử Form thông tin để mở **Bảng cài đặt -> Nội dung -> Cấu hình lưu dữ liệu.**

<figure><img src="/files/zXfhFsM8NpajLTydrSi0" alt=""><figcaption></figcaption></figure>

**Bước 2:** Bấm vào **Thêm kết nối (0/3) -> Email** và nhập email mà bạn muốn liên kết với Form thông tin này.

<figure><img src="/files/6QlDLpVz5F2QiSTHNxOs" alt=""><figcaption></figcaption></figure>

* **Nhập địa chỉ email** mà bạn muốn liên kết với form thông tin
* Bấm **Lưu** để hoàn thành lưu liên kết


# Lưu data về Google Sheets

Hướng dẫn chi tiết cách Lưu thông tin về Google Sheets

**Bước 1:** Mở trang bạn muốn lưu data về Google Sheets. Click trực tiếp vào phần tử Form thông tin để mở **Thanh cài đặt -> Lưu dữ liệu.**

<figure><img src="/files/zXfhFsM8NpajLTydrSi0" alt=""><figcaption></figcaption></figure>

**Bước 2:** Bấm vào **Thêm kết nối (0/3) -> Google Sheet -> Đăng nhập vào tài khoản Google** và chọn tài khoản Google mà bạn muốn liên kết với Form thông tin.

<figure><img src="/files/1nwQ4YlXtnZSNgtNem1G" alt=""><figcaption></figcaption></figure>

Bước 3: Tạo 1 trang tính từ tài khoản mà bạn đã liên kết với Form rồi dán đường dẫn của trang tính đó vào mục **Nhập đường dẫn Google Sheet.** Nhấn **Lưu** để hoàn thành liên kết.

<figure><img src="/files/Q7pFotG6kFCAph64ktWV" alt=""><figcaption></figcaption></figure>


# Lưu data về API

Hướng dẫn chi tiết cách Lưu thông tin về API

**Bước 1:** Mở trang bạn muốn lưu data về Gmail. Click trực tiếp vào phần tử Form thông tin để mở **Bảng cài đặt -> Lưu dữ liệu.**

<figure><img src="/files/yWFqbP5zFFrDdnlvQwde" alt=""><figcaption></figcaption></figure>

**Bước 2:** Bấm vào **Thêm kết nối (0/3) -> API** và bấm vào Sửa cấu hình.

<figure><img src="/files/S1U4BR5WQibyxG0D4Bxr" alt=""><figcaption></figcaption></figure>

**Bước 3:** Cấu hình API

<figure><img src="/files/SUiLVca74pS0xzFUR6ZI" alt=""><figcaption></figcaption></figure>

**Header:** Bạn có thể cấu hình Content Type trong trường hợp cần chỉ định rõ kiểu dữ liệu muốn gửi và Authorization (Token, Api Key) nếu như bạn cần xác thực dữ liệu gửi đến.

**API URL :** Là đường dẫn url API mà bạn sẽ ghi nhận dữ liệu từ Tempi

**JSON:** Là trường có thể tùy chỉnh theo định dạng JSON (chỉ cấu hình cho phương thức POST và PATCH)

**URL Encoded:** Dữ liệu được mã hoá trước khi gửi (chỉ cấu hình cho phương thức POST và PATCH)


# Vòng Quay May Mắn

Hướng dẫn chi tiết cách sử dụng Vòng Quay May Mắn trên Trình kéo thả Website/Landing page

## 1. **Cách thêm Phần tử**

**Bước 1 - Thêm phần tử:** Kéo phần tử Vòng quay may mắn tương tự như cách thêm các phần tử khác[ **tại đây.**](/cac-thanh-phan-co-ban-tren-tempi/phan-tu)

<figure><img src="/files/mgjQfkOu1GNd06A23V8h" alt=""><figcaption><p>Giao diện hiển thị Vòng quay may mắn khi chưa được cấu hình phần thưởng</p></figcaption></figure>

**Bước 2 - Mở bảng cài đặt:** Click trực tiếp vào phần tử **Vòng quay may mắn** để mở bảng cài đặt.

## 2. Cài đặt Phần tử

<figure><img src="/files/ws2MABRKiINh0dgkkKXS" alt=""><figcaption></figcaption></figure>

### **Chỉnh sửa ảnh:**

* Nền: Tải ảnh lên từ máy tính hoặc dán đường dẫn ảnh để chỉnh sửa hình nền của vòng quay may mắn. Nhập độ xoay của hình nền mà bạn muốn tại mục Xoay (độ).
* Viền: Tải ảnh lên từ máy tính hoặc dán đường dẫn ảnh để chỉnh sửa viền của vòng quay may mắn.
* Nút: Tải ảnh lên từ máy tính hoặc dán đường dẫn ảnh để chỉnh sửa nút quay của vòng quay may mắn.
* Mũi tên: Tải ảnh lên từ máy tính hoặc dán đường dẫn ảnh để chỉnh sửa hình nền của vòng quay may mắn. Nhập độ xoay của mũi tên trúng thưởng mà bạn muốn tại mục Xoay (độ).

### **Lưu dữ liệu:**

Bạn có thể lưu dữ liệu của người chơi qua 03 hình thức liên kết là Email, Google Sheet và API.

<figure><img src="/files/ZcT6o9CyXvlhr1FbEOrY" alt=""><figcaption></figcaption></figure>

{% content-ref url="/pages/A2LvQjgKknyDco90TWR6" %}
[Lưu data về Email](/phan-t-nang-cao/form-thong-tin/luu-data-ve-email)
{% endcontent-ref %}

{% content-ref url="/pages/Gd7yAkd3QISVlMQ8we5Q" %}
[Lưu data về API](/phan-t-nang-cao/form-thong-tin/luu-data-ve-api)
{% endcontent-ref %}

{% content-ref url="/pages/2m57fOQPBi0QsfGGKOjL" %}
[Lưu data về Google Sheets](/phan-t-nang-cao/form-thong-tin/luu-data-ve-google-sheets)
{% endcontent-ref %}

### **Cấu hình giải thưởng:**

*Hướng dẫn theo thứ tự từ trên xuống dưới*

* **Góc quay trúng thưởng:** Là vị trí mà mũi tên trúng thưởng sẽ được đặt tuỳ vào góc độ mà bạn nhập.
* **Hướng giải thưởng:** Bạn có thể chọn hướng của giải thưởng là Dọc hoặc Ngang.
* **Hiển thị số lượt quay:** Click chuột vào biểu tượng <img src="/files/2fTMzVwh6S0KqIjcuM0c" alt="" data-size="line"> để bật hiển thị số lượt quay còn lại mà người chơi có thể bấm quay.

### Danh sách giải thưởng:

<figure><img src="/files/35GFTLn6ucUyWYnAytaC" alt=""><figcaption></figcaption></figure>

#### Chọn “+ Thêm phần quà” để mở cài đặt danh sách quà tặng:

* **Tên quà:** Nhập tên của phần quà
* **Tỉ lệ trúng thưởng:** Bạn có thể tuỳ chỉnh tỉ lệ trúng thưởng của từng phần quà theo thông số %
* **Liên kết API:** Thêm liên kết API theo hướng dẫn [tại đây](/phan-t-nang-cao/form-thong-tin/luu-data-ve-api)
* **Hình ảnh:** Bạn có thể tải ảnh của phần quà lên từ máy tính
* **Đường dẫn ảnh:** Bạn có thể dán đường dẫn của ảnh phần quà
* **Chiều rộng ảnh:** Độ lớn của ảnh được hiển thị theo thông số pixel
* **Số lượng giải thưởng:** Số lượng tối đa của giải thưởng

### Phản hồi:

<figure><img src="/files/m704STdyCfmnrZ006dVl" alt=""><figcaption></figcaption></figure>

Click chuột vào biểu tượng <img src="/files/VEpp4F5acHlY3qWD6Ynn" alt="" data-size="line"> để mở bảng cài đặt **Popup trúng thưởng:**

<figure><img src="/files/TQbzrCuNh7ABN5miBj56" alt=""><figcaption></figcaption></figure>

#### Bạn có thể cấu hình popup (Hướng dẫn theo thứ tự từ trên xuống dưới):

* **Tên:** Là tên của popup trúng thưởng
* **Hiển thị icon đóng popup:** Click chuột vào biểu tượng để bật hiển thị icon đóng popup bên trên cùng góc phải của popup
* **Hiển thị icon đóng popup:** Click chuột vào biểu tượng <img src="/files/68CGdj6dfv85r32GM9Yx" alt="" data-size="line"> để bật hiển thị icon đóng popup bên trên cùng góc phải của popup
* **Hiện khi vào trang:** Click chuột vào biểu tượng <img src="/files/68CGdj6dfv85r32GM9Yx" alt="" data-size="line"> để popup hiện lên khi vào trang
* **Hiện khi thoát trang:** Click chuột vào biểu tượng <img src="/files/68CGdj6dfv85r32GM9Yx" alt="" data-size="line"> để popup hiện lên khi thoát trang
* **Hiện khi cuộn đến:** Chọn tên của popup mà bạn đã lưu để popup đó hiện lên khi cuộn đến trên trang landing
* **Chiều rộng/Chiều cao:** Là kích thước hiển thị của popup được hiển thị theo thông số pixel
* **Màu backdrop:** Là màu của màn hình đằng sau khi popup hiển thị
* **Vị trí:** Là vị trí mà popup hiển thị trên trang Landing

Để chỉnh sửa ảnh trên Popup, bấm vào từng phần tử ảnh để chỉnh sửa.

Để chỉnh sửa văn bản trên Popup, bấm vào từng phần tử văn bản để chỉnh sửa.

#### Chỉnh sửa **Popup hết lượt/Popup hết quà** tương tự như Popup trúng thưởng.

### Điều kiện tham gia & trúng giải:

Chọn **Chỉnh sửa cấu hình form** để mở cài đặt cấu hình form.

<figure><img src="/files/o9l5xgxjqDBDVu5XuKf1" alt=""><figcaption></figcaption></figure>

Khi bạn Xác nhận cấu hình form thành công, người chơi cần nhập đủ thông tin trên form rồi mới được quay vòng quay may mắn.

### Giới hạn tham gia:

* **Giới hạn theo mỗi người chơi:** Giới hạn quay vòng quay may mắn của mỗi người chơi
* **Lượt tham gia tối đa:** Nhập số lần tối đa mà người chơi có thể quay vòng quay may mắn
* **Tính theo mốc thời gian cố định (với lựa chọn này, lượt chơi sẽ được tự động reset theo mốc thời gian bắt đầu được cài đặt bên dưới)**

<figure><img src="/files/onOZAi2AqlE3vDXI17tF" alt=""><figcaption></figcaption></figure>

•  **Lượt tham gia:** Số lần mà người chơi được quay vòng quay may mắn

• **Thời gian bắt đầu:** Mốc thời gian để tính lượt chơi được reset lại

• **Reset sau: N**hập số ngày/tuần/tháng mà bạn muốn lượt chơi được reset tính từ mốc thời gian bắt đầu mà bạn đã đặt ở trên

Tương tự, với lựa chọn Tính theo thời điểm tham gia, lượt chơi sẽ tự động reset theo thời điểm mà người chơi bắt đầu quay vòng quay may mắn.

<figure><img src="/files/KOcNfqwfEKkL4pAZzMie" alt=""><figcaption></figcaption></figure>


# Mua tên miền mới trên Tempi

Hướng dẫn chi tiết Mua tên miền mới trực tiếp trên Tempi

### 1. Những lưu ý khi lựa chọn tên miền[​](https://tempi.vn/huong-dan/ten-mien/ten-mien/mua-ten-mien-truc-tiep-tren-tempi/#1-nh%E1%BB%AFng-l%C6%B0u-%C3%BD-khi-l%E1%BB%B1a-ch%E1%BB%8Dn-t%C3%AAn-mi%E1%BB%81n) <a href="#id-1-nhung-luu-y-khi-lua-chon-ten-mien" id="id-1-nhung-luu-y-khi-lua-chon-ten-mien"></a>

Trước khi đi vào tìm hiểu cách mua tên miền cho website, bạn cần lưu ý một số *quy tắc* trong cách lựa chọn tên miền:

* Tên miền không được vượt quá 63 ký tự, bao gồm cả phần .com.vn, .vn …
* Tên miền chỉ gồm các ký tự trong bảng chữ cái (a-z), các số (0-9) và dấu trừ (-).
* Các khoảng trắng và các ký tự đặc biệt trong tên miền khác đều không hợp lệ.
* Không thể bắt đầu bằng hoặc kết thúc tên miền bằng dấu trừ (-).
* Tên miền càng ngắn càng tốt, dễ nhớ, không gây nhầm lẫn, khó viết sai.
* Tên miền phải liên quan đến tên chủ thể và lĩnh vực hoạt động hoặc trùng với thương hiệu/ tên doanh nghiệp, hoặc tên doanh nghiệp ghép thêm tiếng Anh (ngành kinh doanh).
  * com.vn - Dành cho tổ chức, cá nhân hoạt động thương mại.
  * biz.vn - Dành cho các tổ chức, cá nhân hoạt động kinh doanh, tương đương với tên miền COM.VN.
  * edu.vn - Dành cho các tổ chức, cá nhân hoạt động trong lĩnh vực giáo dục, đào tạo.
  * gov.vn - Dành cho các cơ quan, tổ chức nhà nước ở trung ương và địa phương.
  * net.vn - Dành cho các tổ chức, cá nhân hoạt động trong lĩnh vực thiết lập và cung cấp các dịch vụ trên mạng.
  * org.vn - Dành cho các tổ chức hoạt động trong lĩnh vực chính trị, văn hoá, xã hội.
  * int.vn - Dành cho các tổ chức quốc tế tại Việt Nam.
  * ac.vn - Dành cho các tổ chức, cá nhân hoạt động trong lĩnh vực nghiên cứu.
  * pro.vn - Dành cho các tổ chức, cá nhân hoạt động trong những lĩnh vực có tính chuyên ngành cao.
  * info.vn - Dành cho các tổ chức, cá nhân hoạt động trong lĩnh vực sản xuất, phân phối, cung cấp thông tin.
  * health.vn - Dành cho các tổ chức, cá nhân hoạt động trong lĩnh vực dược, y tế.
  * name.vn - Dành cho tên riêng của cá nhân tham gia hoạt động Internet.
  * mil.vn - Dành cho các tổ chức quân đội và quốc phòng.

### 2. Hướng dẫn mua tên miền trực tiếp trên Tempi[​](https://tempi.vn/huong-dan/ten-mien/ten-mien/mua-ten-mien-truc-tiep-tren-tempi/#2-h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-mua-t%C3%AAn-mi%E1%BB%81n-tr%E1%BB%B1c-ti%E1%BA%BFp-tr%C3%AAn-tempi) <a href="#id-2-huong-dan-mua-ten-mien-truc-tiep-tren-tempi" id="id-2-huong-dan-mua-ten-mien-truc-tiep-tren-tempi"></a>

**Bước 1:** Tại trang Dashboard tài khoản Tempi của bạn, vào mục **Tên miền**. Bấm **+ Mua tên miền mới.**

<figure><img src="/files/iqqMp3ir0xakIggyDMoK" alt=""><figcaption></figcaption></figure>

**Bước 2:** Kiểm tra tên miền bạn muốn đăng ký.

Nhập tên miền bạn muốn đăng ký và bấm vào nút **Kiểm tra,** để kiểm tra xem tên miền đã có người sở hữu chưa.

<figure><img src="/files/jM4A5Td4jskq5goBqbI0" alt=""><figcaption></figcaption></figure>

Nếu tên miền chưa có người đăng ký, hệ thống sẽ hiển thị giá của tên miền trong vòng 01 năm

<figure><img src="/files/9jAh57eFL0qp02zch0XW" alt=""><figcaption></figcaption></figure>

Ở đây, bấm **Đăng ký** để tiếp tục mua tên miền.

**Bước 3:** Điền thông tin mua tên miền mới.

<figure><img src="/files/lDPLHx8gVDq4LbUvafLf" alt=""><figcaption></figcaption></figure>

Điền đầy đủ các thông tin trong phần **Nhập thông tin chủ thể**. Bấm **Tiếp tục thanh toán** để tiến hành thanh toán tên miền.

**Bước 4:** Chọn phương thức thanh toán phù hợp và hoàn tất quá trình mua tên miền.

<figure><img src="/files/fTM2Pmr7b2te84P91b4T" alt=""><figcaption></figcaption></figure>

Khi đã đăng ký tên miền thành công, màn hình của bạn sẽ hiển thị thông báo như sau:

Bấm vào **Danh sách tên miền** để đi đến trang quản lý tên miền của bạn.

<figure><img src="/files/8tCLcpeRbspey9S20F9Z" alt=""><figcaption></figcaption></figure>

**Bước 5:** Tại màn **Danh sách tên miền**, tên miền khi vừa được đăng ký sẽ ở trạng thái **Đang chờ tạo**. Thông thường sẽ cần chờ từ 30 phút đến 1 tiếng để tên miền được kích hoạt thành công.

<figure><img src="/files/WYFnMCZqv7iRpr28hdBA" alt=""><figcaption></figcaption></figure>

* Tên miền được kích hoạt thành công ở sẽ trạng thái **Đã kích hoạt**. Hệ thống sẽ tự động gửi thông tin tên miền của bạn về email. Vui lòng theo dõi email và tiến hành bổ sung hồ sơ theo hướng dẫn.

  <br>

  <div align="center"><img src="https://lh3.googleusercontent.com/XXw8cpLLYVM-7cnlK_iKRXrNne2Mfi2M-01Hd-462tH8jw3ePykaHugekHslBEaqrs46Bvqg-3VEJKZ8ZOafEEkC7ol1-ek=rw-w1799" alt="Đã kích hoạt tên miền" height="50" width="936"></div>

<br>

*Lưu ý: Vui lòng **Bổ sung hồ sơ** để hoàn thiện quá trình đăng ký tên miền **trong vòng 3 ngày** kể từ khi tên miền của bạn ở trạng thái **Đã kích hoạt.***<br>

Chi tiết cách **Bổ sung hồ sơ**

Tại màn **Danh sách tên miền,** bấm **Bổ sung hồ sơ.**

<br>

<figure><img src="/files/uLnLApLkolbQdWO5QKYW" alt=""><figcaption></figcaption></figure>

Sau đó thực hiện bổ sung hồ sơ theo từng bước được hướng dẫn.

Như vậy, bạn đã hoàn thiện quá trình mua tên miền trực tiếp trên Tempi. Thời gian xử lý hồ sơ sẽ diễn trong khoảng từ 1-2 ngày.

* Nếu hồ sơ hợp lệ, tên miền của bạn sẽ được hiển thị trạng thái **Hồ sơ hợp lệ.**
* Nếu hồ sơ không hợp lệ, tên miền của bạn sẽ được hiển thị trạng thái **Hồ sơ không hợp lệ.** Vui lòng liên hệ Tempi để được hỗ trợ xử lý.
* Tên miền khi chưa được kích hoạt thành công sẽ ở trạng thái **Lỗi khi tạo**.<br>

<div align="center"><img src="https://lh3.googleusercontent.com/iyCsLe8P-h9A5pekSE5Ngrwzs0cWlq1mIyDZHTDEwg7UM_iCZhYeqDelvNv6UCbYMZJbD-vTppoDd8-DiUwPHQKTRW4aXPem=rw-w1804" alt="Lỗi kích hoạt tên miền" height="70" width="936"></div>

*Nếu gặp phải trường hợp này, bạn vui lòng liên hệ với Tempi để được hỗ trợ kích hoạt tên miền.*<br>

Sau khi mua tên miền thành công, bạn có thể sử dụng tên miền này để xuất bản Website/Landing Page của bạn.

Tại trình kéo thả Website/Landing Page của bạn, bấm **Xuất bản trang** và chọn **Sử dụng tên miền đã sở hữu.** Chọn tên miền bạn vừa mua và bấm **Xuất bản** để hoàn tất Website/Landing Page.

<figure><img src="/files/97VSjVFBvm8kpKJAwc7u" alt=""><figcaption></figcaption></figure>

Vậy là bạn đã xuất bản thành công Website/Landing Page với tên miền mua trên Tempi.[​](https://tempi.vn/huong-dan/ten-mien/ten-mien/mua-ten-mien-truc-tiep-tren-tempi/#c%C3%A1ch-2-ti%E1%BA%BFn-h%C3%A0nh-mua-t%C3%AAn-mi%E1%BB%81n-khi-xu%E1%BA%A5t-b%E1%BA%A3n-trang)


# Kết nối tên miền bạn có sẵn

Hướng dẫn chi tiết Cách kết nối tên miền bạn có sẵn về Tempi

## **Bước 1: Trỏ tên miền về Hosting của Temp**i

***Trỏ tên miền chính:***

Vào phần quản trị tên miền ở nơi bạn mua tên miền và cấu hình **2** bản ghi sau để điều hướng tên miền đó về địa chỉ của Tempi:

**Bản ghi bắt buộc**

Tên (Host record): **@**\
Type (Loại): **A**\
Value (Giá trị): **103.126.157.43**

**Bản ghi tuỳ chọn**

Tên (Host record): **www**\
Type (Loại): **CNAME**\
Value (Giá trị): **kdc.tempi.vn**

{% hint style="info" %}
Khi thêm bản ghi này, truy cập tên miền [www.example.com](http://www.example.com) sẽ được chuyển hướng về tên miền example.com
{% endhint %}

***Trỏ tên miền phụ:***

Giả sử tên miền chính là example.com, và bạn muốn tạo một tên miền phụ là abc.example.com thì chọn tên miền chính bạn muốn cài đặt, sau đó tạo một bản ghi mới với các giá trị như sau:\
Tên (Host record): **abc**\
Type (Loại): **CNAME**\
Value (Giá trị): **kdc.tempi.vn**

Dưới đây là hướng dẫn cụ thể cho từng nền tảng mà bạn mua tên miền:

{% content-ref url="/pages/2RjtjBClAGPyQdDdzxQJ" %}
[Trỏ tên miền từ Nhân Hoà](/ten-mien/ket-noi-ten-mien-ban-co-san/tro-ten-mien-tu-nhan-hoa)
{% endcontent-ref %}

{% content-ref url="/pages/MdsRK0IfyvekAbtfIUr0" %}
[Trỏ tên miền từ Mắt Bão](/ten-mien/ket-noi-ten-mien-ban-co-san/tro-ten-mien-tu-mat-bao)
{% endcontent-ref %}

{% content-ref url="/pages/UjO531T3BRHrhr2Ozm9a" %}
[Trỏ tên miền từ TenTen](/ten-mien/ket-noi-ten-mien-ban-co-san/tro-ten-mien-tu-tenten)
{% endcontent-ref %}

{% content-ref url="/pages/IQD9PCDY6tb8pw8oulXe" %}
[Trỏ tên miền từ iNET](/ten-mien/ket-noi-ten-mien-ban-co-san/tro-ten-mien-tu-inet)
{% endcontent-ref %}

{% content-ref url="/pages/f7Hb7VUW3daWTLFu6Q6b" %}
[Trỏ tên miền từ Namecheap](/ten-mien/ket-noi-ten-mien-ban-co-san/tro-ten-mien-tu-namecheap)
{% endcontent-ref %}

{% content-ref url="/pages/oup6KP0ehbd4PIPt61FC" %}
[Trỏ tên miền từ GoDaddy](/ten-mien/ket-noi-ten-mien-ban-co-san/tro-ten-mien-tu-godaddy)
{% endcontent-ref %}

{% content-ref url="/pages/yamnfPhTDwC5N6r1NmXd" %}
[Trỏ tên miền từ HOSTVN](/ten-mien/ket-noi-ten-mien-ban-co-san/tro-ten-mien-tu-hostvn)
{% endcontent-ref %}

{% content-ref url="/pages/EeD7zxIit8EFUVVzUAB8" %}
[Trỏ tên miền từ PA Việt Nam](/ten-mien/ket-noi-ten-mien-ban-co-san/tro-ten-mien-tu-pa-viet-nam)
{% endcontent-ref %}

## Bước 2: Tạo và xác thực tên miền lại Tempi

**Bước 1:** Tại trang chủ của Tempi, vào phần **Tên miền** và bấm chọn **+ Thêm tên miền mới.**

![](https://storage.googleapis.com/teko-landing-builder-cdn/tempi-help/assets/te%CC%82n%20mie%CC%82%CC%80n.png)

**Bước 2:** Nhập tên miền của bạn và nhấn **Tạo tên miền.**

![](https://storage.googleapis.com/teko-landing-builder-cdn/tempi-help/assets/te%CC%82n%20mie%CC%82%CC%80n1.png)

**Bước 3:** Chờ xác nhận cấu hình DNS cho tên miền tại nơi bạn đã mua tên miền

**Bước 4:** Sau khi tạo tên miền thành công, bấm vào nút **Xác thực** để xác thực tên miền

<div align="center"><img src="https://storage.googleapis.com/teko-landing-builder-cdn/tempi-help/assets/te%CC%82n%20mie%CC%82%CC%80n2.png" alt=""></div>


# Tên Miền

## Bước 1: Trỏ tên miền về hosting của Tempi

***Trỏ tên miền chính:***

Vào phần quản trị tên miền ở nơi bạn mua tên miền và cấu hình **2** bản ghi sau để điều hướng tên miền đó về địa chỉ của Tempi:

Host record: **www**\
Type (Loại): **CNAME**\
Value (Giá trị): **dns.tempi.vn**

Host record: @\
Type (Loại): URL Redirect\
Value (Giá trị):   <http://www.tenmiencuaban.vn\\>
Lưu ý: Thay tenmiencuaban.vn thành tên miền bạn đang cấu hình.

***Trỏ tên miền phụ:***

Giả sử tên miền chính của bạn là tenmiencuaban.vn, và bạn muốn tạo một tên miền phụ là abc.tenmiencuaban.vn thì:\
Chọn tên miền chính bạn muốn cài đặt, sau đó tạo một bản ghi mới và điền các giá trị như sau:\
Host record: **abc**\
Type (Loại): **CNAME**\
Value (Giá trị): **dns.tempi.vn**

Dưới đây là hướng dẫn cụ thể cho từng nền tảng mà bạn mua tên miền:

{% content-ref url="/pages/IQD9PCDY6tb8pw8oulXe" %}
[Trỏ tên miền từ iNET](/ten-mien/ket-noi-ten-mien-ban-co-san/tro-ten-mien-tu-inet)
{% endcontent-ref %}

{% content-ref url="/pages/yamnfPhTDwC5N6r1NmXd" %}
[Trỏ tên miền từ HOSTVN](/ten-mien/ket-noi-ten-mien-ban-co-san/tro-ten-mien-tu-hostvn)
{% endcontent-ref %}

{% content-ref url="/pages/UjO531T3BRHrhr2Ozm9a" %}
[Trỏ tên miền từ TenTen](/ten-mien/ket-noi-ten-mien-ban-co-san/tro-ten-mien-tu-tenten)
{% endcontent-ref %}

{% content-ref url="/pages/MdsRK0IfyvekAbtfIUr0" %}
[Trỏ tên miền từ Mắt Bão](/ten-mien/ket-noi-ten-mien-ban-co-san/tro-ten-mien-tu-mat-bao)
{% endcontent-ref %}

{% content-ref url="/pages/EeD7zxIit8EFUVVzUAB8" %}
[Trỏ tên miền từ PA Việt Nam](/ten-mien/ket-noi-ten-mien-ban-co-san/tro-ten-mien-tu-pa-viet-nam)
{% endcontent-ref %}

## Bước 2: Tạo và xác thực tên miền tại Tempi

{% content-ref url="/pages/qxEiotqIHGRKMxMvkocK" %}
[Tạo và xác thực tên miền lại Tempi](/ten-mien/ket-noi-ten-mien-ban-co-san/tao-va-xac-thuc-ten-mien-lai-tempi)
{% endcontent-ref %}


# Mua tên miền từ nhà cung cấp Nhân Hoà

Hướng dẫn chi tiết Mua tên miền từ nhà cung cấp Nhân Hoà

### 1. Những lưu ý khi lựa chọn tên miền

Trước khi đi vào tìm hiểu cách mua tên miền cho website, bạn cần lưu ý một số *quy tắc* trong cách lựa chọn tên miền:

* Tên miền không được vượt quá 63 ký tự, bao gồm cả phần .com, .net, .org …
* Tên miền chỉ gồm các ký tự trong bảng chữ cái (a-z), các số (0-9) và dấu trừ (-).
* Các khoảng trắng và các ký tự đặc biệt trong tên miền khác đều không hợp lệ.
* Không thể bắt đầu bằng hoặc kết thúc tên miền bằng dấu trừ (-).
* Tên miền càng ngắn càng tốt, dễ nhớ, không gây nhầm lẫn, khó viết sai.
* Tên miền phải liên quan đến tên chủ thể và lĩnh vực hoạt động hoặc trùng với thương hiệu/ tên doanh nghiệp, hoặc tên doanh nghiệp ghép thêm tiếng Anh (ngành kinh doanh).

### 2. Hướng dẫn mua tên miền từ nhà cung cấp Nhân Hoà

**Bước 1:** Kiểm tra tên miền định đăng ký

<figure><img src="https://lh3.googleusercontent.com/vTzhU_bwBc7jzUgHBIbxphSbDoDbkBl09z9gX_uYz0emRYJ76hDep9xY-IyvU5Yuxiyr1k6hwO_DU0CEsPRO75Bgs5_T_p7t=w2048" alt=""><figcaption></figcaption></figure>

Để kiểm tra tên miền bạn đang dự định mua đã được đăng ký trước đó hay chưa, bấm [**vào đây**](https://nhanhoa.com/ten-mien.html)**.**

Nhập vào thanh tìm kiếm tên miền bạn muốn kiểm tra, sau đó đợi 1s. Nhân Hòa sẽ kiểm tra xem tên miền đó có ai đăng ký trước chưa, và còn liệt kê thêm các tên miền tương tự.&#x20;

<figure><img src="https://lh3.googleusercontent.com/gfX6-4Su2lNk14By7eKtaPUKCYkWnC4TgLPRl4jw10hyk4xGmoeWCV3zB5VWjMNbYDtERXxkn1tWPpD8FGLivDRUWYoRCfDR=w2048" alt=""><figcaption></figcaption></figure>

Nên xác định giá trị ngay từ lần mua đầu tiên, nhất là với những tên miền có yếu tố phổ biến và dễ thu hút người khác. Bởi đây là những tên miền có mức độ cạnh tranh cao, nếu như bạn không chọn mua, các đối thủ cạnh tranh có thể chọn mua và tung tin thiệt hại, hạ uy tín của công ty bạn.

**Bước 2:** Thêm tên miền vào giỏ hàng & tiến hành thanh toán

Sau khi đã lựa chọn tên miền phù hợp với nhu cầu của bạn, hãy click ô “Chọn” để Tiếp tục thanh toán. - Tại đây, bạn có thể tham khảo thêm một số lựa chọn của Nhân Hòa hoặc đi đến mục “Tiếp tục thanh toán”.

<figure><img src="https://lh3.googleusercontent.com/4e_ZFjwaO8BnPgT3LVhLs5HAE6_BlVrq55bRaik0lTdZh2synqgwS2mHHKKuUbMbT-wZwtNlencrBxQsZsphAIplIo6dmt8=w2048" alt=""><figcaption></figcaption></figure>

* Nếu bạn đã là khách hàng của Nhân Hòa, bạn chỉ cần điền đầy đủ thông tin “Username hoặc Email và Mật khẩu” là được.
* Hoặc lựa chọn “Đăng ký tài khoản miễn phí” để tiếp tục.
* Sau khi nhấn vào nút "Đồng ý điều khoản" và "Tiếp tục thanh toán", bạn sẽ được chọn phương thức thanh toán để tiến hành thanh toán:&#x20;

<figure><img src="https://lh3.googleusercontent.com/EWcvkvLwdjne06N66A5-LiP57To057F_SP-mJuhj3OUmvK23XR5TacwtpcQOqspVuoNwUuyA0j7wGYQzuOdBYFVbU_VwIkj3=w2048" alt=""><figcaption></figcaption></figure>

**Bước 3:** Điền thông tin người/tổ chức sở hữu tên miền

Ngay sau khi bạn mua tên miền xong, màn hình sẽ chuyển tới trang quản lý control panel. Hoặc bạn sẽ cần tiến hành đăng nhập lại với tài khoản email được dùng ở bước 2, đăng nhập vào giao diện quản lý tên miền.

<figure><img src="https://lh3.googleusercontent.com/4tqGz4juVUiqUMHYBneqWNSPutmswkfoixq7WXpf8xa2LqLewN47hat-kOTyoeVymkJuzkFifk_B7Nf7br0SaNVsKdX58Mg=w2048" alt=""><figcaption></figcaption></figure>

Bạn sẽ được chuyển đến trang điền thông tin đăng ký, tại đây bạn cần điền các thông tin chủ sở hữu tên miền được gọi là thông tin WHOIS. Các thông tin trên là:

* First Name – Tên
* Last Name – Họ
* Address line 1 – Địa chỉ liên hệ
* City – Thành Phố
* State/Region/Province – Tỉnh
* Zip/Postal Code – Mã bưu chính
* Country – Quốc gia/Vùng lãnh thổ
* Phone number – Số điện thoại liên hệ
* Company – Công ty (tùy chọn)

Sau khi nhập thông tin chủ sở hữu tên miền, cách mua tên miền sẽ được thực thi, bạn chỉ cần còn cần làm thêm một bước xác nhận nữa là hoàn tất đăng ký. \
&#x20;

**Bước 4:** Xác nhận quyền sở hữu tên miền

Bước này rất đơn giản nhưng rất quan trọng trong cách mua tên miền, vì nó xác nhận chủ sở hữu của tên miền bằng địa chỉ email bạn nhập khi đăng ký. Thường là đơn xác nhận sẽ được gửi đến email của bạn ngay khi hoàn tất đơn đăng ký tên miền ở bước trên.

Mẫu email xác nhận đăng ký tên miền, bạn cần click vào link xác nhận trong email. Hiện nay, thời hạn cho phép chủ thể đăng ký nộp phí sau khi quá hạn là 20 ngày. Nếu sau 20 ngày mà vẫn không gia hạn thì tên miền sẽ bị xóa bỏ đưa quay trở lại kho tên miền. Khi tiến hành nộp phí duy trì tên miền, người dùng cần chủ động cung cấp đầy đủ các thông tin sau:

* Tên chủ thể đăng ký.
* Tên miền cần gia hạn.
* Số năm gia hạn

Như vậy Tempi đã tổng hợp toàn bộ những thông tin về cách mua tên miền cho các website tại nhà cung cấp Nhân Hoà để bạn có thể tham khảo. Hy vọng bạn sẽ có một cái nhìn tổng quan hơn về việc đăng ký tên miền cho trang riêng của mình nhé!

<br>

<br>


# Tạo và xác thực tên miền lại Tempi

**Bước 1:** Tại trang chủ của Tempi, vào phần **Tên miền** và bấm chọn **+ Thêm tên miền mới.**

![](/files/WhxfdLvMjh1kphbCuwO3)

**Bước 2:** Nhập tên miền của bạn và nhấn **Tạo tên miền.**

![](/files/ifKzux3b9CBnqxEWp9Bp)

**Bước 3:** Chờ xác nhận cấu hình DNS cho tên miền tại nơi bạn đã mua tên miền

**Bước 4:** Sau khi tạo tên miền thành công, bấm vào nút **Xác thực** để xác thực tên miền

<figure><img src="/files/Gh5tqupFuwPP626nKdE0" alt=""><figcaption></figcaption></figure>


# Trỏ tên miền từ Nhân Hoà

Bạn truy cập trang quản trị tên miền của Nhân Hòa và nhập thông tin tài khoản:\
<https://zonedns.vn/>

1. **Trỏ tên miền chính:**

**Thêm mới** 2 bản ghi sau:

Host record: www\
Type (Loại): CNAME\
Value (Giá trị): kdc.tempi.vn

Host record: @\
Type (Loại): A\
Value (Giá trị): 103.126.157.43

![](/files/Wvsrp7uOSnq2iirqKYkG)

![](/files/eQ7gChGfJ6j9q7KrUS57)

**2. Trỏ tên miền phụ:**&#x20;

![](/files/dTHbif3eJmC99wwo71aY)

Giả sử tên miền chính của bạn là tenmiencuaban.vn, bạn muốn tạo một tên miền phụ là abc.tenmiencuaban.vn thì:\
Chọn tên miền chính bạn muốn cài đặt, sau đó tạo một bản ghi mới và điền các giá trị như sau:\
Host record: abc\
Type (Loại): CNAME\
Value (Giá trị): kdc.tempi.vn

Sau khi đã trỏ thành công tên miền về hosting của Tempi, bạn cần tiếp tục [tạo và xác thực tên miền tại Tempi.](/ten-mien/ket-noi-ten-mien-ban-co-san/tao-va-xac-thuc-ten-mien-lai-tempi)


# Trỏ tên miền từ Mắt Bão

Bạn truy cập trang quản trị tên miền của Mắt Bão và nhập thông tin tài khoản:\
<https://id.matbao.net/users/login/>

Sau đó, bạn lần lượt chọn:

* Chọn mục **Tên Miền**
* Click vào tên miền cần trỏ&#x20;
* Vào mục **Quản lý DNS**

Mắt Bão hiện tại có 2 giao diện cấu hình trỏ DNS, bạn xem mình đang sử dụng giao diện nào thì làm theo hướng dẫn của giao diện đó.

### Giao diện cũ của Mắt Bão:

1. **Trỏ tên miền chính:**

**Thêm mới** 2 bản ghi sau:

Host record: www\
Type (Loại): CNAME\
Value (Giá trị): kdc.tempi.vn

Host record: @\
Type (Loại): A\
Value (Giá trị): 103.126.157.43

![](/files/M1NU8lPqUj4avCG1UhFZ)

![](/files/ebj0HPhVWARK8lv7FRd6)

Sau khi thiết lập, danh sách bản ghi hiện 2 dòng như dưới là bạn đã làm đúng cách:

![](/files/GETR8wXskzTN0EAGl93S)

**2. Trỏ tên miền phụ:**&#x20;

Giả sử tên miền chính của bạn là tenmiencuaban.vn, và bạn muốn tạo một tên miền phụ là abc.tenmiencuaban.vn.\
Chọn tên miền chính bạn muốn cài đặt, sau đó tạo một bản ghi mới và điền các giá trị như sau:\
Host record: abc\
Type (Loại): CNAME\
Value (Giá trị): kdc.tempi.vn&#x20;

![](/files/hoNaK21ZlFKGqWGWpL2U)

### Giao diện mới của Mắt Bão:

1. **Trỏ tên miền chính:**

**Thêm mới** 2 bản ghi sau:

Host record: www\
Type (Loại): CNAME\
Value (Giá trị): kdc.tempi.vn

Host record: @\
Type (Loại): A\
Value (Giá trị): 103.126.157.43&#x20;

![](/files/8py8wCJJoKkI9B6EKZdq)

![](/files/fApaBBsa5pF1TL6cGOEs)

![](/files/EKCTMgI8HEuty4WR2rsI)

Sau khi tạo xong, phần danh sách bản ghi hiển thị đủ 2 bản ghi này là bạn đã tạo đúng cách:

![](/files/N75ESQ1iJncbwZi8gkxG)

Sau khi đã trỏ thành công tên miền về hosting của Tempi, bạn cần tiếp tục [tạo và xác thực tên miền tại Tempi.](/ten-mien/ket-noi-ten-mien-ban-co-san/tao-va-xac-thuc-ten-mien-lai-tempi)<br>


# Trỏ tên miền từ TenTen

Bạn truy cập trang quản trị tên miền của Tenten và nhập thông tin tài khoản:\
&#x20;<https://domain.tenten.vn/>

1. **Trỏ tên miền chính:**

**Thêm mới** 2 bản ghi sau:

![](/files/iL3r7AelZAYnFjtHBH17)

Host record: www\
Type (Loại): CNAME\
Value (Giá trị): kdc.tempi.vn

Host record: @\
Type (Loại): A\
Value (Giá trị):  103.126.157.43&#x20;

![](/files/sJardNZgoiUMObDL7neI)

Giả sử tên miền chính của bạn là tenmiencuaban.vn, bạn muốn tạo một tên miền phụ là abc.tenmiencuaban.vn thì:\
Chọn tên miền chính bạn muốn cài đặt, sau đó tạo một bản ghi mới và điền các giá trị như sau:\
Host record: abc\
Type (Loại): CNAME\
Value (Giá trị): kdc.tempi.vn

Sau khi đã trỏ thành công tên miền về hosting của Tempi, bạn cần tiếp tục [tạo và xác thực tên miền tại Tempi.](/ten-mien/ket-noi-ten-mien-ban-co-san/tao-va-xac-thuc-ten-mien-lai-tempi)<br>


# Trỏ tên miền từ iNET

Bạn truy cập trang chủ của iNET tại <https://inet.vn/> và chọn **Đăng nhập**. Sau đó nhập thông tin tài khoản khách hàng tại iNET để đăng nhập vào hệ thống quản trị.

![](/files/PjrTQT0iugIddkA9ynFY)

![](/files/Bu5zJpkyQxD1r8kdyDHI)

## Trỏ tên miền chính

Tại ô **Chọn template** có sẵn bạn chọn **Trỏ về Tempi** và bấm nút có dấu tích màu xanh ở cột bên phải để lưu lại là xong.

![](/files/lCz3OWeMeXsJwZL776Gr)

2 bản ghi dùng để trỏ tên miền chính về hosting Tempi  :

Host record: www\
Type (Loại): CNAME\
Value (Giá trị): kdc.tempi.vn&#x20;

Host record: @\
Type (Loại): A\
Value (Giá trị):  103.126.157.43

## Trỏ tên miền phụ

Giả sử tên miền chính là example.com, và bạn muốn tạo một tên miền phụ là abc.example.com thì chọn tên miền chính bạn muốn cài đặt, sau đó tạo một bản ghi mới với các giá trị như sau:\
Host record: abc\
Type (Loại): CNAME\
Value (Giá trị): kdc.tempi.vn

Sau khi đã trỏ thành công tên miền về hosting của Tempi, bạn cần tiếp tục [tạo và xác thực tên miền tại Tempi.](/ten-mien/ket-noi-ten-mien-ban-co-san/tao-va-xac-thuc-ten-mien-lai-tempi)<br>


# Trỏ tên miền từ Namecheap

Bạn truy cập vào tài khoản của bạn ở <https://ap.www.namecheap.com/>, vào mục **Account** và chọn **Domain List.**

**Bước 1:** Tiếp theo, chọn tên miền mà bạn muốn cập nhật bản ghi, bấm nút <img src="/files/VeFsJVlTELKos9Z9RfCd" alt="" data-size="original">để truy cập vào phần quản lý tên miền đó.

**Bước 2:** Chọn mục **Advanced DNS -> Add New Record** để tạo bản ghi tên miền.

<figure><img src="/files/x8rJ3bXQa8VUxLX6cexS" alt=""><figcaption></figcaption></figure>

## Trỏ tên miền chính

Tạo 2 bản ghi trỏ tên miền chính về hosting của Temp&#x69;**.** Bấm vào ![](/files/jUeG1r3lvo1irya77D3F) để thêm bản ghi.

<figure><img src="/files/R1WUbG5FvD0CRUy9CS80" alt=""><figcaption></figcaption></figure>

Record: CName\
Host: www\
Target: kdc.tempi.vn

Host record: @\
Type (Loại): A\
Value (Giá trị): 103.126.157.43

## Trỏ tên miền phụ

Giả sử tên miền chính của bạn là tenmiencuaban.vn, và bạn muốn tạo một tên miền phụ là abc.tenmiencuaban.vn.&#x20;

Chọn tên miền chính bạn muốn cài đặt. Sau đó bạn tạo một bản ghi mới và điền các giá trị như sau:

Record :CName\
Host : abc\
Target: kdc.tempi.vn

Bấm vào ![](/files/jUeG1r3lvo1irya77D3F) để thêm bản ghi.

<figure><img src="/files/t02sqxSQyFrNSdAVU8xb" alt=""><figcaption></figcaption></figure>

Sau khi đã trỏ thành công tên miền về hosting của Tempi, bạn cần tiếp tục [tạo và xác thực tên miền tại Tempi.](/ten-mien/ket-noi-ten-mien-ban-co-san/tao-va-xac-thuc-ten-mien-lai-tempi)

<br>


# Trỏ tên miền từ GoDaddy

Truy cập trang quản trị tên miền của GoDaddy và nhập thông tin tài khoản. Trong phần **Domain Manager (Quản lý tên miền),** bấm chọn vào tên miền bạn muốn trỏ.

Kéo xuống phần **Additional Setting (Thiết lập bổ sung)** và chọn **Manage DNS:**

<figure><img src="/files/JBy6JVeKvwXs6U8Cq9bm" alt=""><figcaption></figcaption></figure>

## Trỏ tên miền chính:

Thêm mới 2 bản ghi sau:

Host record: www\
Type (Loại): CNAME\
Points to: kdc.tempi.vn

Host record: @\
Type (Loại): A\
Value (Giá trị): 103.126.157.43\
*Lưu ý: Thay tenmiencuaban.vn thành tên miền bạn đang cấu hình.*

## Trỏ tên miền phụ:

Giả sử tên miền chính của bạn là tenmiencuaban.vn, và bạn muốn tạo một tên miền phụ là abc.tenmiencuaban.vn\
Chọn tên miền chính bạn muốn cài đặt. Sau đó tạo một bản ghi mới và điền các giá trị như sau:\
Host record: abc\
Type (Loại): CNAME\
Points to: kdc.tempi.vn

<figure><img src="/files/XO4f3zlK08AeXMMj2DIn" alt=""><figcaption></figcaption></figure>

Sau khi đã trỏ thành công tên miền về hosting của Tempi, bạn cần tiếp tục [tạo và xác thực tên miền tại Tempi.](/ten-mien/ket-noi-ten-mien-ban-co-san/tao-va-xac-thuc-ten-mien-lai-tempi)<br>


# Trỏ tên miền từ HOSTVN

Bạn truy cập trang quản trị tên miền của HOSTVN tại <https://dns.hostvn.net/>

**Bước 1:** Sử dụng tài khoản khách hàng của bạn tại HOSTVN để đăng nhập

![](/files/hO8ZaaMXHcbiixDOlLgn)

**Bước 2:** Chọn **Quản lý DNS** tại tên miền cần trỏ về Tempi

![](/files/ocuMS1ev0kaqgGoVYriU)

Bước 3: Bấm chọn **Trỏ tên miền về Tempi**

![](/files/w6nyHHv0L9xpwF1Y6zAg)

![](/files/74go0F7aeSWiXIbcajsX)

### Trỏ tên miền phụ (Tên miền dạng: abc.tenmien.vn)

**Bước 1:** Bấm chọn **Tạo mới bản ghi** sau đó chọn **CNAME**

![](/files/g1rPmo0agAgL6gOwH9Av)

**Bước 2:** Nhập thông tin vào các trường thông tin sau đó bấm nút **Thêm mới** .\
1\. **Host**: Nhập tiền tố của tên miền phụ. VD: abc\
2\. **Host name:** kdc.tempi.vn

![](/files/arDDoyCInTn5RXkcbrsR)

![](/files/V1WELwDYUM1nIa7q8w9A)

Sau khi đã trỏ thành công tên miền về hosting của Tempi, bạn cần tiếp tục [tạo và xác thực tên miền tại Tempi.](/ten-mien/ket-noi-ten-mien-ban-co-san/tao-va-xac-thuc-ten-mien-lai-tempi)<br>


# Trỏ tên miền từ PA Việt Nam

Bạn truy cập vào trang quản trị tên miền của P.A Việt Nam và nhập thông tin tài khoản:\
&#x20;[https://access.pavietnam.vn/](https://access.pavietnam.vn/login.php)

1. **Trỏ tên miền chính:**

Trong mục **Default/ Cấu hình domain**, bạn **Thêm mới** 2 bản ghi sau:

![](/files/9QriPUKYEauAxMJ6Wdej)

Host record: www\
Type (Loại): CNAME\
Value (Giá trị): kdc.tempi.vn

Host record: @\
Type (Loại): A\
Value (Giá trị): 103.126.157.43

**2. Trỏ tên miền phụ:**&#x20;

![](/files/lQAr8ANd4R2fq5QVBmRH)

Giả sử tên miền chính của bạn là tenmiencuaban.vn, bạn muốn tạo một tên miền phụ là abc.tenmiencuaban.vn.\
Chọn tên miền chính bạn muốn cài đặt, sau đó tạo một bản ghi mới và điền các giá trị như sau:\
Host record: abc\
Type (Loại): CNAME\
Value (Giá trị): kdc.tempi.vn

Sau khi đã trỏ thành công tên miền về hosting của Tempi, bạn cần tiếp tục [tạo và xác thực tên miền tại Tempi.](/ten-mien/ket-noi-ten-mien-ban-co-san/tao-va-xac-thuc-ten-mien-lai-tempi)<br>


# Hướng dẫn Deploy Component

## Giới thiệu chung

Tempi mang đến nền tảng cho phép bạn có thể phát triển và đưa các tính năng vào trình kéo thả để xây dựng Website/Landing Page của chính bạn, làm hoàn thiện hơn Website/Landing Page của bạn bằng các tính năng mà bạn có thể tự tạo ra.

Sau khi đã đưa tính năng lên nền tảng của chúng tôi, bạn hoàn toàn có thể sử dụng trong các trình kéo thả Website/Landing Page của bạn.

## Phát triển Component là gì?

Component là các tính năng được đưa vào trình kéo thả Website/Landing Page để người dùng có thể tự do kéo thả thiết kế, đặt vào các bố cục tuỳ theo thẩm mỹ và nhu cầu cũng như mục đích sử dụng.

Phát triển Component là giải pháp được tạo ra nhằm mở rộng cũng như bổ sung các tính năng hiện có của Tempi, mang lại sự tiện lợi và chủ động hơn đến cho người dùng Tempi, góp phần tạo nên sự đột phá trên trực tuyến.

Với tính năng Phát triển Component, giờ đây người dùng hoàn toàn có thể tự tạo ra các tính năng cần thiết, tăng khả năng cá nhân hoá trang theo nhu cầu cụ thể khi xây dựng Website/Landing Page trên Tempi.

## Hướng dẫn

Tính năng Phát triển Component cho phép người dùng có thể thêm mới Component của mình vào trình kéo thả Website/Landing Page và sử dụng tương tự như các Component sẵn có trên Tempi.

**Bước 1:** Vào mục **Phát triển Component** trong màn Dashboard -> Chọn **+ Thêm Component mới.**

<div align="center"><img src="https://lh3.googleusercontent.com/XrVr8JbNgh5UFHFOVl4lymB9kvt5QuScGVTyl1xAqiP_JKqn0m_ieYH3p6gQ3Xwo9Uh7E-_J3SNSIC4P71uE-3viLHAgwF6G=rw-w1844" alt="Thêm component mới"></div>

*Tempi cung cấp sẵn cho bạn Component mẫu giúp bạn có cái nhìn tổng quan về cấu hình của 1 Component. Click vào icon tải xuống để xem chi tiết code.*<br>

**Bước 2:**

* Thêm tên Component
* Tải icon hiển thị Component
* Chọn Danh mục
* Tải tệp code lên: Tải lên file Zip code của Component

**Bước 3:** Bấm chọn nút **Deploy** để tiến hành deploy Component của bạn lên hệ thống Tempi, bạn có thể kiểm tra trạng thái deploy của Component trên màn danh sách.

Component sẽ hiển thị theo các trạng thái sau:

* Deploying: hệ thống đang tiến hành deploy (quá trình này có thể mất từ 3-4 phút).

<div align="center"><img src="https://lh3.googleusercontent.com/KQEyJv5_ExF9gTU1tEI5lnEyqxNIFBRBm2yFnuktRfALyXLmQegfidyWqaHYKtxhkDjQwhdV4SKRJRwEsOLJC-y7Tty1BYIb=rw-w1457" alt="Thêm component mới"></div>

* Available: Deploy Component thành công, bạn có thể bật/tắt hiển thị Component để sử dụng trên trình kéo thả.

<div align="center"><img src="https://lh3.googleusercontent.com/X0S3XbpsvKmbznRsdgx0OgJUt0f0ZcQvOcD_9Q-9rJD91D_2ZpO0LyKjk3F600Dqc17oPrJnV4XOhC84odSRB3wuzUM0qOA3=rw-w1452" alt="Thêm component mới"></div>

* Failed: Quá trình Deploy Component thất bại, bạn có thể bấm vào link xem chi tiết lý do, sau đó bấm vào icon bánh răng để chỉnh sửa cấu hình Component và thực hiện deploy lại.

<div align="center"><img src="https://lh3.googleusercontent.com/yIXhIQIEB-i46xPlAeYogCcVIODzJT0Q29JwKb3dTwx5lKNQIGVmk6RSnmpXMVAVYFlWUlRcmyG4zGbqe36iXbDQ0-2NfYU=rw-w1442" alt="Thêm component mới"></div>

**Lưu ý:**

Đối với Component ở trạng thái **Available** và đang được sử dụng trên trình kéo thả của Tempi:

* Nếu bạn tắt hiển thị Component: Component sẽ biến mất khỏi menu phần tử kéo thả của Tempi (Nếu bạn đã kéo thả Component đó vào trang, Component vẫn duy trì trên trang của bạn).
* Nếu bạn chỉnh sửa cấu hình Component và deploy lại thì trong quá trình deploy sẽ không có ảnh hưởng gì đến phiên bản đang được sử dụng.
  * Trường hợp deploy thất bại: Component trên trình kéo thả vẫn duy trì bản cũ.
  * Trường hợp deploy thành công: Component trên trình kéo thả sẽ cập nhật theo bản mới. Khi bạn xóa Component: Component sẽ biến mất khỏi danh sách và trên menu phần tử kéo thả của Tempi (Nếu bạn đã kéo thả Component vào trang, Component vẫn duy trì trên trang).

Khi bạn xóa Component: Component sẽ biến mất khỏi danh sách và trên menu phần tử kéo thả của Tempi (Nếu bạn dã kéo thả Component vào trang, Component vẫn duy trì trên trang).


# Quản lý popup

## Cách truy cập

* Truy cập website cần thiết lập popup

<figure><img src="/files/P1Fi7AOMKopSeSCw7dYK" alt=""><figcaption><p>Lựa chọn website</p></figcaption></figure>

* Chọn menu Quản lý popup bên trái để xem danh sách các smart popup hiện có của website

<figure><img src="/files/xFK3gytTJj2OuU480OJu" alt=""><figcaption></figcaption></figure>

## Thao tác với danh sách

<figure><img src="/files/Ad0WLi9ypiMaaaAKRaT7" alt=""><figcaption><p>Menu quản lý danh sách smart popup</p></figcaption></figure>

Trong danh danh sách popup, bạn có thể:

* Click vào tên popup để truy cập màn hình chỉnh sửa thiết kế cho popup (2)
* Chỉnh sửa nhanh thông tin popup hoặc xóa popup (3)
* Thêm mới 1 popup (4), xem tiếp tại [Tạo mới popup](/smart-popup/tao-moi-popup)

## Trạng thái popup và thời gian hiển thị

Việc hiển thị popup sẽ phụ thuộc vào 2 yếu tố là trạng thái và thời gian hiển thị:

| Trạng thái popupu  | Thời gian hiển thị của popup   | Kết quả                                         |
| ------------------ | ------------------------------ | ----------------------------------------------- |
| Bản nháp (vô hiệu) | Đang trong thời gian hiển thị  | ❌ Không hiển thị popup                          |
| Bản nháp (vô hiệu) | Không trong thời gian hiển thị | ❌ Không hiển thị popup                          |
| Hoạt động          | Đang trong thời gian hiển thị  | ✅ Hiển thị popup                                |
| Hoạt động          | Không trong thời gian hiển thị | ⏰Lên lịch và chờ đến đúng thời gian sẽ hiển thị |


# Tạo mới popup

## Bước 1: Khai báo thông tin popup

<figure><img src="/files/wG1unIm3JYQ210qUlS9K" alt=""><figcaption></figcaption></figure>

* Tên popup (bắt buộc)
* Thời gian hiển thị (bắt buộc): chọn thời gian bắt đầu và kết thúc hiển thị của popup khi kích hoạt trạng thái hoạt động. Xem thêm [Quản lý popup](/smart-popup/quan-ly-popup#trang-thai-popup-va-thoi-gian-hien-thi)
* Chỉ hiển thị cho khách hàng mới: nếu chọn bật sẽ chỉ hiển thị cho khách hàng truy cập website lần đầu tiên.
* Phân khúc khách hàng: chọn phân khúc khách hàng muốn hiển thị (tính năng đang trong giai đoạn thử nghiệm).
* Hiện với URLs: nhập giá trị các url của trang mà bạn muốn hiển thị popup, enter mỗi khi muốn thêm 1 chuỗi giá trị mới. Nếu để trống, popup sẽ hiển thị ở bất kỳ trang nào trên website của bạn khi khách hàng truy cập.
* Ẩn với URLs: nhập giá trị các url của trang mà bạn không muốn hiển thị popup. Enter mỗi khi muốn thêm 1 chuỗi giá trị mới.
* Ảnh thumbnail: tải lên ảnh đại diện để dễ phân biệt với các popup khác trong danh sách

{% hint style="success" %}
🧙‍♂️Mẹo! Bạn có thể thêm kí tự \* để thiết lập điều kiện linh hoạt hơn. Ví dụ:&#x20;

abc: tìm kiếm chính xác&#x20;

\*abc\*: url có chứa chuỗi abc&#x20;

\*abc: url kết thúc bằng chuỗi abc&#x20;

abc\*: url bắt đầu bằng chuỗi abc
{% endhint %}

{% hint style="info" %}
Bạn có thể truy cập để chỉnh sửa lại các thông tin đã khai báo bất cứ lúc nào tại màn hình thiết kế hoặc quản lý danh sách popup
{% endhint %}

Lưu thông tin để chuyển tiếp qua giao diện thiết kế popup

## Bước 2: Thiết kế popup

<figure><img src="/files/hyikKsVc8lqaiYOnAxhV" alt=""><figcaption><p>Kéo thả các phần tử để thiết kế nội dung popup theo mong muốn</p></figcaption></figure>

Hướng dẫn sử dụng các phần tử bạn có thể xem thêm chi tiết tại [PHẦN TỬ NÂNG CAO](/phan-t-nang-cao/form-thong-tin)

## Bước 3: Thiết lập cài đặt nội dung và nâng cao của popup

<figure><img src="/files/yefExI0NLZIXdkFSEoUX" alt=""><figcaption></figcaption></figure>

* Tên popup
* Hiển thị icon đóng popup: Hiển thị icon X để thao tác đóng popup. Nếu không lựa chọn, người xem vẫn sẽ có thể đóng popup bằng cách click vào vị trí bất kỳ bên ngoài popup.
* Hiện khi vào trang: hiển thị popup khi người xem bắt đầu truy cập xem 1 trang
* Độ trễ: thiết lập đỗ trễ theo giây để hiển thị popup kể từ khi người xem truy cập vào trang ở trên
* Hiện khi thoát trang: hiển thị khi người xem có xu hướng rời bỏ trang
* Chiều rộng: thiết lập chiều rộng của khối popup theo pixel
* Chiều cao: thiết lập chiều rộng của khối popup, nếu để trống chiều cao của popup sẽ tự động điều chỉnh phù hợp theo các phần tử chứa trong khối
* Màu backdrop: chọn màu nền backdrop, khuyến khích chọn màu có độ trong suốt phù hợp
* Vị trí: lựa chọn vị trí sẽ hiển thị popup trong khung màn hình
* Khoảng cách: điều chỉnh lại khoảng cách giữa popup và lề tương ứng với vị trí hiển thị trong khung màn hình đã chọn ở trên
* Sự kiện hiển thị popup: khai báo các thông tin sự kiện chuyển đổi của Google Ads/Facebook Ads (nếu có)

{% hint style="info" %}
Nâng cao: bạn có thể khai báo thêm 1 số tùy chỉnh nâng cao cho popup như padding, khung thời gian hiển thị, hiệu ứng hiển thị của popup tại tab Nâng cao
{% endhint %}

## Bước 4: Lưu và kích hoạt popup

<figure><img src="/files/Ap303iiEgfSBW2JC4noo" alt=""><figcaption><p>Thao tác cho popup</p></figcaption></figure>

* Lưu (1): lưu các thiết kế vào cấu hình popup đã thực hiện
* Cài đặt (2): cầi đặt nội dung và nâng cao của popup
* Chi tiết (3): cài đặt thông tin popup
* Trạng thái popup (4): kích hoạt hoặc vô hiệu popup. Xem thêm [Quản lý popup](/smart-popup/quan-ly-popup#trang-thai-popup-va-thoi-gian-hien-thi)
* Đóng (5): đóng màn hình thiết kế popup hiện tại để trở về màn hình thiết kế website