# Tổng quan về AppOn

AppOn (Application On) là một nền tảng giúp bạn ra các ứng dụng nhỏ với các thao tác kéo thả và hạn chế việc lập trình, các ứng dụng như: App bán hàng (selling page), Gamification, Đặt đồ ăn, đặt

![Giao diện thiết kế Studio AppOn](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F2Afjtt434k7Xm9VIRHzG%2Ft%E1%BB%95ng%20quan.png?alt=media\&token=007d9c53-70b3-4a4e-8a77-ec4aab45e4af)

AppOn (Application On) là một nền tảng giúp bạn ra các ứng dụng nhỏ với các thao tác kéo thả và hạn chế việc lập trình, các ứng dụng như: App bán hàng (selling page), Gamification, Đặt đồ ăn, đặt vé máy bay, đặt lịch, khảo sát khách hàng, đánh giá dịch vụ nhân viên tại cửa hàng, kết nối máy POS, kết nối IoT…

Sau khi bạn xây dựng và thiết kế xong ứng dụng, ứng dụng của bạn có thể hiện diện ở khắp mọi nơi (cross-platform) như : Messenger, Facebook, Tiktok, Instagram, Youtube, Zalo, WeChat, Viber, Web, Cửa hàng… (Xây dựng 1 lần và xuất hiện đa kênh).

**Các tính năng & thành phần chính để sử dụng:**

## **1. Đoạn - Section**

Nơi bạn sẽ lưu lại các “*Block, Page, App*” đã thiết kế để có thể tái sử dụng nhanh chóng cho mình hoặc đội nhóm(tính năng chia sẻ trong đội nhóm đang được nâng cấp).

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2Fi9Z3BomgIFNCrKkfZ9g8%2F%C4%91o%E1%BA%A1n.png?alt=media\&token=2fc8dfd0-0de1-460e-9468-3e2b33132af2)

## **2. Màn hình - Screen**

Nơi bạn tạo ra các màn hình thiết kế và quản lý toàn bộ các **Khối -** **Block (3)** có trong các màn hình. Mặc định là màn hình "Home - Trang chủ".

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F2Rctli8jJRXA7yqGkZUm%2Fm%C3%A0n%20h%C3%ACnh.png?alt=media\&token=1a6dcf54-ffd9-45d7-be3a-da080d8fd8fb)

## **3. Khối - Block**

Chức năng này sẽ giúp bạn tạo ra các thành phần của ứng dụng như :

* Column : Tạo ra 1 khoảng trống để bạn có thể đưa các Block khác vào trong này để dễ quản lý và di chuyển.
* Text : Tạo ra văn bản.
* Button : Tạo ra nút bấm.
* Image : Thêm hình ảnh
* Video : Thêm Video từ Youtube hoặc Vimeo.
* Input : Tạo ra ô nhập chữ.
* Textarea : Tạo ra ô nhập văn bản.
* Checkbox: Tạo ra ô chọn.
* Radio : Tạo ra các tuỳ chọn.
* List : Thiết kế danh sách hiển thị “ngang hoặc dọc".
* Select: Tạo ra danh sách chọn lựa.
* Shape : Tạo ra các khung, tấm nền, icon,.....

Trong mỗi Block sẽ có các thiết lập thiết kế và **Action (6).**

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FizB4cEtDCh2NTRpjaxCc%2Fkh%E1%BB%91i.png?alt=media\&token=ffd723a0-2aed-4d90-a140-60faf7f2d119)

## **4. Hình ảnh - Image**

Kho hình ảnh để bạn sử dụng nhanh chóng. Ban có thể tải ảnh lên để lưu trữ và sử dụng hoặc bạn cũng có thể sử dụng kho ảnh Template của chúng tôi

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FuwiYWZzBjsai7olwTYHu%2Fh%C3%ACnh%20%E1%BA%A3nh.png?alt=media\&token=68d059b0-083f-4cbf-968d-14db00d745ce)

## **5. API**

API là tính năng rất thú vị, tính năng này sẽ giúp bạn định nghĩa các kết nối API vào hệ thống của bạn hoặc đối tác bạn đang sử dụng. Với API bạn sẽ kết hợp với **Dữ liệu** (phía dưới) để có thể tuỳ biến các dữ liệu động.

Ví dụ : Bạn tạo 1 Form khảo sát khách hàng và đang sử dụng CRM Hubspot, khi đó bạn cần Form khảo sát này được đưa vào Hubspot tự động. Vậy bạn chỉ cần vào Hubspot để lấy API. Sau đó, định nghĩa API tại chức năng này.

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FR4dYbQQ0NwzkgFljmZeZ%2FAPI.png?alt=media\&token=0465c6cf-e5c0-4907-b18b-2fc502c3889a)

## **6. Dữ liệu - Data**

Chức năng giúp bạn lưu trữ và quản lý dữ liệu một cách dễ dàng như Google Sheet, chức năng cho phép bạn đồng bộ với Google Sheet, tải và upload file Excel.

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FqqBhlaW8gUArV1HY3C01%2Fd%E1%BB%AF%20li%E1%BB%87u.png?alt=media\&token=595067c6-77a7-4eed-9aca-255609b2da7c)

## **7. Thiết kế - Design**

Giúp bạn chỉnh sửa màu sắc, kiểu dáng của **Khối** được chọn.&#x20;

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FPvMVjfHrLLErITSG8LUu%2Fthi%E1%BA%BFt%20k%E1%BA%BF.png?alt=media\&token=4bf293e8-b3ab-4d79-a8fb-7465f09e703d)

## **8. Hành động - Action**

Chức năng này sẽ giúp bạn tạo ra 1 chuỗi hành động khi khách hàng tương tác.

Ví dụ : Trong 1 Form khảo sát khi người dùng bấm vào nút “Tôi đăng ký” thì bạn sẽ xây dựng các hành động cho nút bấm này như sau:

Bước 1: Cho khách hàng vào sự kiện “Subscribe” của Pixel Facebook (để remarketing customer) như hình ảnh bên trên.

Bước 2. Chuyển sang trang sản phẩm để giới thiệu cho khách hàng.

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FmZfkSEMyluWHwFuPzTm5%2Fh%C3%A0nh%20%C4%91%E1%BB%99ng.png?alt=media\&token=59cc64af-61fb-43e5-9d15-e6c0cc294900)

Trên đây, là giới thiệu tổng quát về AppOn và các chức năng chính bạn sẽ sử dụng thường xuyên nhất của AppOn.

Chúc các bạn tạo ra được các ứng dụng hữu ích !


# Tạo mới ứng dụng

## 1. Đăng nhập

Truy cập <https://studio.appon.vn> , sau khi bạn Đăng ký 1 tài khoản và Đăng nhập.&#x20;

![Màn hình đăng nhập](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-MW_N5YrNEwBldSAqrfa%2F-MW_NNO4Qbc-CW5MDsWB%2Fimage.png?alt=media\&token=7aa2e8a9-827d-439f-a26d-145a63a4a2f5)

## 2. Tạo ứng dụng

Hãy click vào ô "Tạo ứng dụng mới" sau đó đặt tên cho App của bạn và bấm "Tạo". Như vậy là bạn đã hoàn thành việc tạo App mới và có thể sử dụng để thiết kế giao diện.

![Tạo ứng dụng mới có tên Untitled App](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FnOnFQ17qiRzcbZfArIXF%2FT%E1%BA%A1o%20m%E1%BB%9Bi%20%E1%BB%A9ng%20d%E1%BB%A5ng.png?alt=media\&token=cf8490a2-8045-4659-af5e-bb9eeeec06e9)


# Sử dụng Đoạn - Section

Sử dụng các mẫu giao diện có sẵn của nền tảng theo các chủ đề khác nhau

Đây là nơi lưu trữ các mẫu giao diện có sẵn của Appon, bạn có thể sử dụng theo các chủ đề có sẵn bằng cách chọn vào phần **Đoạn**, chọn 1 chủ đề mà bạn đang tìm kiếm sau đó kéo mẫu Template bạn thích ra ngoài phần chỉnh sửa giao diện. Sau đó bạn có thể tùy chỉnh lại 1 chút theo ý thích và Xuất bản(Publish) để xử dụng.

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FJpXjdxEAVSoujRWMofQd%2Fv%C3%AD%20d%E1%BB%A5%20%C4%91o%E1%BA%A1n%202.png?alt=media\&token=46385885-495e-4694-b0ed-804ba7c5970a)


# Sử dụng Màn hình - Screen

Hướng dẫn sử dụng tính năng Màn hình phục vụ cho nhu cầu của bạn.

**Màn hình** là nơi quản lý tất cả các **Màn hình** được tạo và chứa toàn bộ **Block** trong đó. \
\
Để tạo 1 màn hình mới bạn làm theo những bước sau: Bấm vào biểu tượng **Màn hình** chọn "Thêm màn hình", sẽ hiện lên 1 bảng tạo màn hình mới sau đó bạn bấm vào "Màn hình trắn&#x67;**"** đặt tên cho màn hình và bấm nút "tạo mới". <br>

![Chọn biểu tượng màn hình và ấn thêm màn hình](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FANbvKDCJ3gWJJ3dmUw17%2Fv%C3%AD%20d%E1%BB%A5%20m%C3%A0n%20h%C3%ACnh.png?alt=media\&token=d0391789-92a0-4942-b832-2ee3138add37)

![chọn màn hình trắng](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FZPHrVyjkC1qXyNmXUX6n%2Fv%C3%AD%20d%E1%BB%A5%20m%C3%A0n%20h%C3%ACnh%201.png?alt=media\&token=330c25cf-86b8-4639-bf20-1cbbcb04fc37) ![đặt tên và chọn tạo mới](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FLc98WA5tM59VqAcZ8fmz%2Fv%C3%AD%20d%E1%BB%A5%20m%C3%A0n%20h%C3%ACnh%202.png?alt=media\&token=da50871f-3713-4f42-ac14-68a8082e34a6)

Bạn cũng có thể tạo màn hình mới bằng cách ấn vào dấu ![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FdmmIkGBkxhjtLNE5Fuzu%2Fv%C3%AD%20d%E1%BB%A5%20m%C3%A0n%20h%C3%ACnh%203.png?alt=media\&token=2f96aec9-5061-4651-8b1a-5767bc1abf78)nằm cạnh Màn hình Home để thêm 1 màn hình mới.Sau khi ấn vào dấu "+" các thao tác sẽ tương tự khi bạn ấn "Thêm màn hình".

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2Fh2jqwg1jH6FVdrCYq7iP%2Fv%C3%AD%20d%E1%BB%A5%20m%C3%A0n%20h%C3%ACnh%204.png?alt=media\&token=7232b8db-3447-4f51-8836-a3d18d4445c9)


# Sử dụng Hình ảnh - Image

Hướng dẫn sử dụng hình ảnh, tải hình ảnh

Hình ảnh trong Appon là nơi bạn có thể tải hình ảnh của mình lên để lưu trữ và sử dụng.

Cách tải ảnh lên Appon vô cùng đơn giản. Trước hết bạn hãy tải hình ảnh bất kỳ nào về máy sau đó chọn phần **Hình ảnh** chọn "Tải lên hình ảnh" sau đó chọn hình ảnh bạn vừa tải lên và sử dụng bằng cách kéo hình ảnh ra phần chỉnh sửa giao diện.

![Tải hình ảnh lên](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2Fw58te053YnqTKzCSo6wF%2Fv%C3%AD%20d%E1%BB%A5%20%E1%BA%A3nh%202.png?alt=media\&token=d34bf38c-1df1-4824-a22f-eb6c6ff79f3f)

Bạn cũng có thể sử dụng kho ảnh có sẵn của Template Image Appon ở phần **Hình ảnh**.

* Mẹo : bạn có thể tải nhiều ảnh lên cùng 1 lúc bằng cách bôi đen nhiều ảnh và ấn tải lên. Bạn cũng có thể tạo nhiều folder để lưu trữ ảnh theo chủ đề hoặc chiến dịch

![Tạo folder lưu trữ,phân loại các loại ảnh khác nhau](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FbdCyzi4RJTTWHWcIgea9%2Fv%C3%AD%20d%E1%BB%A5%20%E1%BA%A3nh.png?alt=media\&token=d4a88748-c166-45d6-a3d9-5ffd707be076)


# Sử dụng Khối - Block


# Column

Hướng dẫn sử dụng Column

**Column** giống như 1 trang sách trắng, nó tạo ra 1 khoảng trống để bạn có thể đưa các **Block, Template, Mẫu giao diện,....** vào để sử dụng.&#x20;

Việc phân chia thành nhiều **Column** giúp bạn dễ dàng quản lý và chỉnh sửa giao diện dành riêng cho từng phần.&#x20;

Việc chia nhỏ thành nhiều **Column** cũng giúp bạn lưu lại thành nhiều **Mẫu giao diện** để sử dụng nhằm các mục đích khác nhau

Sử dụng Column rất đơn giản bạn vào phần **Khối >>** kéo **Column** ra phần chỉnh sửa giao diện.

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FV6PADxQCD4G6iV7XaeiZ%2Fv%C3%AD%20d%E1%BB%A5%20column%201.png?alt=media\&token=ec94b642-a345-47d8-af43-d95481660ab4)


# Khối của tôi - My Block

My block - Lưu và sử Mẫu giao diện - Template

Trong quá trình bạn sử dụng Appon, bạn cần lưu lại những thiết kế của bạn để có thể tái sử dụng ở các App khác. Vì vậy **Khối của tôi** là nơi bạn lưu lại các mẫu giao diện để sử dụng ở nhiều **Page**, nhiều App khác nhau.

Cách sử dụng, sau khi đã tạo được 1 mẫu giao diện đẹp bạn click chuột ra khoảng trắng trong **Column** chọn **Lưu mẫu** , đặt tên và thêm mô tả cho mẫu giao diện của bạn, tải thêm hình ảnh cho mẫu giao diện để phân biệt giữa các giao diện đã lưu và chọn Create.

![Chọn vào khoảng trắng và ấn lưu mẫu](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F6LSf7k6Oc6ViIUbCwkO9%2Fv%C3%AD%20d%E1%BB%A5%20kh%E1%BB%91i%20c%E1%BB%A7a%20t%C3%B4i.png?alt=media\&token=a52ca063-3aa9-4c60-9a7d-4f9e439d2428) ![Đặt tên cho mẫu và ấn create](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FIoahhxIjni6xzXm4Z0uP%2Fv%C3%AD%20d%E1%BB%A5%20kh%E1%BB%91i%20c%E1%BB%A7a%20t%C3%B4i%201.png?alt=media\&token=6c33b9db-6d07-4a9b-b479-919696b31439)

Sau khi tạo xong bạn vào phần **Khối**  >> **Khối của tôi** kéo giao diện vừa lưu ra và sử dụng ở các **Page** khác và các App khác.


# Button

Hướng dẫn tính năng Button

Button là những nút ấn có chứa những hành động bên trong như function, google sheet, chuyển page,...\
Để sử dụng tính năng **Button** bạn làm theo những bước sau :\
\- Bạn vào **Khối** -> Kéo **Button** ra phần chỉnh sửa giao diện .

![Kéo button ra để sử dụng](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2Fgd4ODQvI45mDfFUi7lC3%2Fbutton.png?alt=media\&token=ff1d4c84-a421-4ccc-9cef-496eca3f7d48)

\- Cách chỉnh sửa **Button :**\
&#x20; \+ Thiết kế : Nơi để bạn chỉnh sửa màu sắc, kích thước, bo viền,... cho nút ấn.\
&#x20; \+ Hành động : Là nơi để bạn thêm những hành động cho nút ấn như function, model, chuyển page,...

<div align="left"><img src="https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F9EQBNf6mh93OtvBmrLYh%2Fthi%E1%BA%BFt%20k%E1%BA%BF.png?alt=media&amp;token=1c72e724-1372-4c6c-bc6e-5dbdc6bb94c7" alt="Thiết kế button"> <img src="https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FdJgHePI6RpVLUM5MBS31%2Fh%C3%A0nh%20%C4%91%E1%BB%99ng.png?alt=media&amp;token=ff2b6fcd-d25d-420f-aad0-ad3d996ddae6" alt="Hành động button"></div>


# Text

**Text** dùng để soạn thảo văn bản trên Appon. Để Sử dụng tính năng **Text** rất đơn giản bạn vào phần **Khối  -> kéo** "add text" ra phần chỉnh sửa giao diện và thêm nội dung bạn muốn.

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FyvlzQyuzEdIOH3g1nVgs%2Ftext.png?alt=media\&token=18e8e5f1-dee5-46fa-bdb6-c4a69ec3e04c)


# Input / Textarea

Video hướng dẫn sử dụng chức năng Block - Input / Textarea

Sử dụng **Input** hoặc **Textarea** để khách hàng nhập dữ liệu. Bạn cần lưu ý, mỗi một Input hay Textarea cần phải có **Model(Dữ liệu)** kèm theo để lưu và sử dụng dữ liệu khách hàng đã nhập.

Việc sử dụng **Input** hoặc **Textarea** trong Appon để khách hàng nhập dữ liệu,sử dụng để khách hàng nhập họ và tên, số điện thoại, yêu cầu hay ghi chú,....&#x20;

* Lưu ý : **Input** là nhập 1 dòng văn bản thường sẽ để nhập Tên , Số điện thoại. Còn **Textarea** là 1 đoạn văn bản từ 2 dòng trở lên thường dùng để ghi lại yêu cầu, mong muốn,ghi chú  của khách hàng, hoặc là đoạn văn bản nào đó dài hơn 1 dòng.
* Mỗi **Input** hoặc **Textarea** phải cần có 1 Model(Dữ liệu) đi kèm để lưu lại và sử dụng giá trị mà khách hàng nhập.

Để sử dụng **Input** và **Textarea** bạn vào Appon >> chọn **Block** và kéo **Input** & **Textarea** ra phần chỉnh sửa giao diện

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F0m4yv4Jb3WGoihqiPAsy%2Fv%C3%AD%20d%E1%BB%A5%20input%202.png?alt=media\&token=7e796895-237b-4ab1-9930-f5da458a9878)

Để lưu giá trị **Input** hoặc **Textarea** vào **Model(Dữ liệu)** bạn chọn vào đối tượng cần lưu >> chọn "Hành động" >> tại phần "Thiết lập dữ liệu" ấn "chọn" và lựa chọn **Model(Dữ liệu)** bạn muốn lưu vào.

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FXEAOBDqutiF4Ei2kWPC6%2Fv%C3%AD%20d%E1%BB%A5%20input%203.png?alt=media\&token=b6033b26-e78d-4e44-a079-a1da915df6c2)


# Checkbox

Hướng dẫn sử dụng chức năng Block / Checkbox

**Checkbox** là tính năng tạo ra các tuỳ chọn cho người dùng và họ có thể chọn nhiều lựa chọn dùng để tạo câu hỏi khảo sát,... \
Bạn lưu ý, **checkbox** luôn phải kèm theo **Model** để lưu trữ dữ liệu người dùng.

#### Dưới đây là các bước để bạn có thể tạo ra 1 Checkbox

Bước 1: Tạo 1 Model để lưu trữ dữ liệu người dùng. \
Ở giao diện **Appon** chọn Dữ liệu -> Thêm trang tính -> Nhập tên dữ liệu -> Thêm. \
Sau khi tạo xong Model bạn bấm vào Model đó thêm những các trường cần thiết.

![Tạo model lưu trữ dữ liệu](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FlUoKVvJ7hILQp7y8N2W5%2Fmodel.png?alt=media\&token=4fa0b10f-1db8-4911-b799-d601c192c0d2)

Bước 2: Bạn vào phần **Khối** -> kéo xuống tới mục **Selection** -> kéo biểu tượng **Checkbox** ra màn hình bạn muốn tạo.

![Kéo checkbox ra sử dụng](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FvMeqIBROs0DuhwaMqMoz%2Fcheckbox.png?alt=media\&token=dc68cc33-4c5a-433c-ae8c-6c6f85f75336)

Bước 3: Cấu hình cho **Checkbox :**\
Bấm vào **Checkbox** muốn cài đặt cấu hình -> chọn "Hành động" \
\- Text: Là phần hiển thị thông tin của **Checkbox**\
\- Tên nhóm : Là tên của 1 nhóm **Checkbox**\
\- Giá trị : Là phần thông tin trả về ( thông thường phần giá trị sẽ để giống phần text)\
\- Gán giá trị cho model : Để lưu trữ dữ liệu của **Checkbox**\
&#x20;  Chọn -> Click đúp vào model vừa tạo -> chọn trường lưu trữ.

![Cấu hình cho checkbox](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FgH7GnZQoDZ4dclKQYzsz%2Fc%E1%BA%A5u%20h%C3%ACnh.png?alt=media\&token=450cd6c3-9ae6-4c2f-ba6b-0e2fbbc5ead7)

Bước 4: Publish và kiểm tra tính năng.

![Kết quả chọn được hiển thị](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FWA8uRRp4uE53ZT3hYa5p%2Fk%E1%BA%BFt%20qu%E1%BA%A3.png?alt=media\&token=4137a199-f45b-467e-8cc6-5697113ea218)


# Radio

Hướng dẫn sử dụng chức năng Block Radio trong Appon

**Radio** là tính năng tạo ra các tuỳ chọn cho người dùng nhưng chỉ chọn được 1 lựa chọn duy nhất . Dùng để tạo trắc nghiệm, câu hỏi khảo sát,...\
Bạn lưu ý, **Radio** luôn phải kèm theo **Model** để lưu trữ dữ liệu người dùng.

#### Dưới đây là các bước để bạn có thể tạo ra 1 Radio button

Bước 1: Tạo 1 Model để lưu trữ dữ liệu người dùng. \
Ở giao diện **Appon** chọn Dữ liệu -> Thêm trang tính -> Nhập tên dữ liệu -> Thêm. \
Sau khi tạo xong Model bạn bấm vào Model đó thêm những các trường cần thiết.

![Tạo Model lưu dữ liệu](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FlUoKVvJ7hILQp7y8N2W5%2Fmodel.png?alt=media\&token=4fa0b10f-1db8-4911-b799-d601c192c0d2)

Bước 2: Bạn vào phần **Khối** -> kéo xuống tới mục **Selection** -> kéo biểu tượng **Radio button** ra màn hình bạn muốn tạo.

![Kéo Radio button ra sử dụng](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FZ3KROvkFew4Rh4qMztoA%2Fradio%20button.png?alt=media\&token=1885052e-fc0d-4fb3-8b68-19b2e62a165f)

Bước 3: Cấu hình cho **Radio button :**\
Bấm vào **Radio button** muốn cài đặt cấu hình -> chọn "Hành động" \
\- Text: Là phần hiển thị thông tin của **Radio button**\
\- Tên nhóm : Là tên của 1 nhóm **Radio button**\
\- Giá trị : Là phần thông tin trả về ( thông thường phần giá trị sẽ để giống phần text)\
\- Gán giá trị cho model : Để lưu trữ dữ liệu của **Radio button**\
&#x20;  Chọn -> Click đúp vào model vừa tạo -> chọn trường lưu trữ.

![Cấu hình cho Radio button](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FNh1J6oZQR7jxUZMOFjOX%2Fradio.png?alt=media\&token=14989fbd-0080-47b4-b4f7-4c4315fc63c3)

Bước 4: Publish và kiểm tra tính năng.

![Kết quả chọn được hiển thị](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F5BGLblGUpAWrQedJyJCl%2Fk%E1%BA%BFt%20qu%E1%BA%A3.png?alt=media\&token=4934beaf-daf0-4fb8-9f50-88c1154d8040)


# Drop down - Select

Hướng dẫn sử dụng chức năng Block - Select

Select là tính năng tạo ra danh sách lựa chọn cho người dùng chọn và họ chỉ được chọn 1 lựa chọn duy nhất.\
Bạn lưu ý, **Drop down** luôn phải kèm theo **Model** để lưu trữ dữ liệu người dùng.

Ví dụ bạn cần tạo ra danh sách Thành phố, quận huyện ... cho người dùng chọn. Sau đó lưu lại thông tin người dùng đã chọn bạn có thể làm theo các bước sau.

Bước 1: Tạo 1 Model để lưu trữ dữ liệu người dùng. \
Ở giao diện **Appon** chọn Dữ liệu -> Thêm trang tính -> Nhập tên dữ liệu (Khuvuc) -> Thêm. \
Sau khi tạo xong Model bạn bấm vào Model đó thêm những các trường cần thiết \
( Trường "thanhpho" là trường để hiển thị thông tin cho khách chọn, còn trường "luuthanhpho" là để lưu lại thông tin khách hàng chọn)

![Tạo model chứa các trường cần thiết](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F2kQCNXX7dDEPpcvOa3gN%2Fkhuvuc.png?alt=media\&token=760c9a78-27f5-4bd1-98f0-fc252f482f8b)

Bước 2: Bạn vào phần **Khối** -> kéo xuống tới mục **Selection** -> kéo biểu tượng **Drop down** ra màn hình bạn muốn tạo.

![Kéo Drop down ra màn hình để sử dụng](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FR5LKKJQ27tWjGPBE0NN0%2Fdrop%20down.png?alt=media\&token=4fc68bba-1f53-4279-9767-b5368078e13e)

Bước 3: Cấu hình cho **Drop down :**\
Bấm vào **Drop down** muốn cài đặt cấu hình -> chọn "Hành động" <br>

![Cấu hình Drop down](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FK42azfWp6EP69avb7JHI%2Fthi%E1%BA%BFt%20l%E1%BA%ADp%20drop%20down.png?alt=media\&token=ca026b34-989d-4648-8c76-78811b345d08)

Bước 4: Publish và kiểm tra tính năng

![Kết quả chọn hiển thị](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F77m6xDdU8zeo6K496wdL%2Fk%E1%BA%BFt%20qu%E1%BA%A3.png?alt=media\&token=8733f669-dcee-44e0-b3da-a6c1a6ddcdde)


# List repeat

Hướng dẫn sử dụng List repeat

Để có sự dụng **List repeat** bạn làm theo những bước sau:

Bước 1: Tạo 1 model có chứa trường dữ liệu bạn muốn hiển thị.\
Vd: mình tạo 1 model "sanpham" có chứa trường thông tin là "anh" như hình bên dưới.

![Model sản phẩm Iphone 13 Seri gồm ảnh và tên](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2Fshw6GzCvLqIpdR35dAvL%2Fmodel%20list.png?alt=media\&token=38f2449d-3883-4518-80a4-367ba15c0b2d)

Bước 2: Bạn vào phần **Khối** -> kéo xuống tới mục **List repeat** -> kéo biểu tượng ![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FeLhNdBHeHytugd8vuAfz%2Fbi%E1%BB%83u%20t%C6%B0%E1%BB%A3ng%20list.png?alt=media\&token=bd289afa-674e-4057-a5a9-88f54fd2fb66) ra màn hình.

![Cách kéo List repeat](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F9TehAmepdIzodaheF7gz%2Fkeo%20list.png?alt=media\&token=d7131639-7777-44f7-b3a3-bd5ed94094eb)

Bước 3: Bạn vào phần **Khối** -> chọn **text**, **hình ảnh ->** Kéo vào ô list vừa tạo.&#x20;

![List hình ảnh và text](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FsVFxlePiIl5L3TxbzXtg%2Fmuc%20con%20list.png?alt=media\&token=b1d3b286-2c14-4c2d-bd7d-b87f8da1efbe)

\* Chú ý: Hình ảnh trong List phải để cùng kích thước.

Bước 5: Cầu hình cho **List repeat**\
Bấm vào **List** muốn cài đặt cấu hình -> chọn "hành động"\
\- Data list : Là model chọn để hiển thị trên list\
\- Set model : Là nơi để lưu trữ dữ liệu bạn chọn\
\- Item list: gồm những hình ảnh, text được hiển thị trên list chọn trong model

![Cấu hình list sản phẩm Iphone 13](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FCgbn3gXzVKPS1X9T6PnQ%2Fc%E1%BA%A5u%20h%C3%ACnh%20list.png?alt=media\&token=93f403eb-6acf-463c-825f-7ab6d62a35fe)

Bước 6: Publish&#x20;

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FD9IywDvNHfHjMAV77LT1%2Fk%E1%BA%BFt%20qu%E1%BA%A3%20list.png?alt=media\&token=60e6e9f0-de4e-4980-8f19-e82b609e2311)


# Shape

**Shape** là một tính năng cho phép bạn chèn thêm các hình vẽ, hình học (hình tam giác, hình chữ nhật, hình tròn, …) cũng như các hình vẽ biểu tượng (hình mũi tên, ngôi sao, mặt cười, …) vào nội dung của bạn . Các hình vẽ này được cung cấp sẵn trên **Appon**, bạn có thể tuỳ ý lựa chọn sao cho phù hợp.

Để sử dụng **Shape** bạn vào phần **Khối** -> kéo xuống phần **Shape** -> Kéo biểu \
tượng ![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FRavleDplIZLiPcCGwfxJ%2FShape.png?alt=media\&token=4e756006-83d7-4b94-bc49-1ce4b4893027) ra phần giao diện chỉnh sửa và sử dụng.

![Kéo tính năng Shape ra sử dụng](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F7haRLtXXYr1F1o5mWxx2%2Fshape.png?alt=media\&token=a1d41161-de58-4453-bfba-76adbf5d3a1a)


# Ảnh - Video - Slide

#### Hình ảnh

Cách sử dụng rất đơn giản bạn vào phần **Khối** -> kéo xuống tới phần **Media** -> Chọn biểu tượng ![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FO8ayYggXIhUjrHk3SoS8%2F%E1%BA%A3nh.png?alt=media\&token=2a969920-7a69-4054-b942-ae5396fa635f) -> kéo vào giao diện chỉnh sửa. Để thêm ảnh vào bạn có thể nháy đúp vào hình ảnh vừa kéo ra hoặc bạn có thể bấm vào nút "chọn ảnh" để thay ảnh bạn vừa tải lên.&#x20;

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2Fd2PelKcwIZpqaqLi9Ols%2FH%C3%ACnh%20%E1%BA%A3nh.png?alt=media\&token=8ede7ebd-35b6-4610-868b-c137118bb56b)

#### Video

Để có thể sử dụng **Video** bạn sẽ làm theo các bước sau đây :  **Khối** -> kéo xuống tới phần **Media** -> Chọn biểu tượng ![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FCZLt3z8aljpEWmGvDPwj%2Fvideo.png?alt=media\&token=2126e70c-2430-4792-a0ba-3374f642336b) -> kéo vào giao diện chỉnh sửa -> click vào video vừa kéo ra -> chọn "Hành động" -> thay ID video của bạn trên Youtube vào "ID video hoặc chọn dữ liệu".\
\
\* Chú ý : Tính năng Video chỉ hỗ trợ video trên nền tảng Youtube.

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FkzqsgCjpBqaf82aViBxa%2FVideo.png?alt=media\&token=60ed77a0-b5c4-4e92-96df-c432ae213ea5)

**Slide**

**Slide** là tổng hợp của nhiều hình ảnh gộp vào. Để tạo **Slide** bạn vào **Khối** -> kéo xuống tới phần **Media** -> Chọn biểu tượng ![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FzcxhPpeCQAswokwL61JR%2FSlide.png?alt=media\&token=67563346-05cd-46da-91a5-e17aeba2f3bc) -> kéo vào giao diện chỉnh sửa và thêm các hình ảnh của bạn vào.\
\* Chú ý: Hình ảnh trong 1 Slide phải cùng kích thước.

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FPv3rWudjvRif29fAqGqh%2Fslide.png?alt=media\&token=90466774-0863-4798-84bc-4f8d153f93e2)


# HTML

Hướng dẫn sử dụng chức năng Block - HTML

**Block HTML** là tính năng nhúng code HTML bên ngoài vào trong App của bạn.

Để sử dụng **HTML** bạn vào phần **Block** và kéo **HTML** ra ngoài giao diện chỉnh sửa, sau đó bạn click đúp vào **HTML** ở ngoài giao diện chỉnh sửa, dán đoạn Mã **HTML** vào và ấn "Save".

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FZUtNbHQwxMoyb6thRMa2%2Fv%C3%AD%20d%E1%BB%A5%20html%202.png?alt=media\&token=1f519445-8e26-431f-8ea1-2dd9841398b0) ![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FbPgf5M23EABMSRSrl4xc%2Fv%C3%AD%20d%E1%BB%A5%20html%201.png?alt=media\&token=02741258-b1e3-4678-b636-3d93fd5c4266)


# Countdown - Đếm ngược

Hướng dẫn sử dụng Countdown/Đếm ngược

Đây là 1 tính năng rất thú vị, chắc hẳn các bạn đã từng thấy những dãy số chạy ngược về 0 khi mua hàng khuyến mại ở 1 Shop Online, đó chính là tính năng **Countdown**. Tính năng này thường được dùng trong các App Landing Page giảm giá sản phẩm trong vài tiếng ngắn ngủi.

Để sử dụng tính năng này bạn hay vào **Block** kéo **Countdown** ra màn hình chỉnh sửa giao diện và chọn vào phần "Hành động"

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FWYUwAnLfRyfNxe63Dt2B%2Fv%C3%AD%20d%E1%BB%A5%20countdown%203.png?alt=media\&token=a1f601a0-ed53-4930-8bbb-79da712db71d)

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FAgKqgUA4qww49Qa4e7SP%2Fv%C3%AD%20d%E1%BB%A5%20countdown.png?alt=media\&token=29841b77-2647-42ae-96fb-29b20c65ba46)

Tại phần "Hành động" của **Countdown** bạn sẽ có 2 lựa chọn về việc sử dụng **Countdown**

* Timer 1 : Điền trực tiếp thời gian vào các ô Giờ - Phút - Giây. Thời gian sẽ đếm ngược theo số bạn điền.
* Timer 2 : Tại Timer 2 bạn sẽ chọn ngày kết thúc của sự kiện, Ứng dụng sẽ tự lấy thời gian của ngày kết thúc trừ đi thời gian hiện tại và hiển thị ra số thời gian còn lại để đếm ngược.

![Timer 1](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FWE61SgYwb88CogZb9We2%2Fv%C3%AD%20d%E1%BB%A5%20countdown%201.png?alt=media\&token=5707c5f5-053f-4674-b002-01545536c9e3) ![Timer 2](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FBxDX3hLL0sCHfJyZi569%2Fv%C3%AD%20d%E1%BB%A5%20countdown%202.png?alt=media\&token=42de57c4-7210-4139-a8e2-041ca7466d9f)


# Dữ Liệu

Hướng dẫn sử dụng chức năng Dữ liệu trong Appon

Chức năng Dữ liệu là nơi tạo ra các Model có nhiệm vụ lưu trữ dữ liệu của bạn và bạn sẽ tái sử dụng dữ liệu đó ở mọi nơi trong Appon.

* Ví dụ : Khi khách hàng nhập "Họ tên" của họ vào thì bạn muốn hiển thị ra tên của họ. Để hiển thị tên của khách hàng ra thì bạn cần lưu trữ dữ liệu mà họ vừa nhập lại vào phần Dữ liệu trong Appon để sử dụng lại

![Sau khi khách hàng nhập Họ tên](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FqWOjgf2y31YMflaQUsCw%2Fv%C3%AD%20d%E1%BB%A5%20d%E1%BB%AF%20li%E1%BB%87u%202.png?alt=media\&token=3e1a8f46-eb39-4fda-a5de-53a27b223397) ![Trước khi khách hàng nhập Họ tên](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FLIcaRfM9KUzWrgmQdeVZ%2Fv%C3%AD%20d%E1%BB%A5%20d%E1%BB%AF%20li%E1%BB%87u.png?alt=media\&token=deb972bb-8e4f-401d-8fdb-359d19e330a4)

Để làm được như ví dụ trên trước tiên bạn sẽ vào phần Dữ liệu tạo 1 bảng lưu trữ dữ liệu, sau đó tạo 1 Model để lưu giữ liệu lần lượt theo thứ tự dưới đây:

![1.Chọn Dữ liệu](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FqN5OXJmhwCr04gCID0IX%2Fv%C3%AD%20d%E1%BB%A5%20d%E1%BB%AF%20li%E1%BB%87u%207.png?alt=media\&token=e3c63b58-9cf1-4341-b01c-4d1ab7b72bb8)

![2.Tạo bảng dữ liệu](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FoeCmDO4gX2QKnHNx41qi%2Fv%C3%AD%20d%E1%BB%A5%20d%E1%BB%AF%20li%E1%BB%87u%203.png?alt=media\&token=9f2c23b4-3803-49d3-9ca0-66c0f3d0fe73) ![3.Tạo 1 model lưu giữ liệu](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FBWrU51y4RGryexqrgomx%2Fv%C3%AD%20d%E1%BB%A5%20d%E1%BB%AF%20li%E1%BB%87u%204.png?alt=media\&token=655126d6-3555-4f55-8354-018bfef15474)

Sau khi khởi tạo xong các bạn sẽ quay lại trang Home và chỉnh sửa giao diện. Kéo 1 **Block Text** và 1 **Block Input** ra phần **Column** chỉnh sửa.

&#x20;Tiếp theo bạn sẽ chọn vào **Block Input**,chọn "Hành động" tìm đến phần "thiết lập dữ liệu" và ấn "Chọn" để chọn vào model vừa khởi tạo bên trên.

Sau đó chọn vào **Block Text** chọn "Hành động", phần "Thiết lập dữ liệu" ấn "Chọn" và chọn vào model vừa chọn cho **Block Input**.

![Thiết lập cho Block Input](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FrJIUcUBih8GFTplwP4un%2Fv%C3%AD%20d%E1%BB%A5%20d%E1%BB%AF%20li%E1%BB%87u%205.png?alt=media\&token=43341680-c35b-4a7b-8801-5f241b521ad6) ![Thiết lập cho Block Text](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F7yWIr2cLKx1qIFIUylJL%2Fv%C3%AD%20d%E1%BB%A5%20d%E1%BB%AF%20li%E1%BB%87u%206.png?alt=media\&token=2b43fed6-25ef-4852-9da0-7fc2188df814)

Thực hiện xong tất cả và Xuất bản(Publish) ứng dụng để xem thành quả mình vừa đạt được nhé. Chúc các bạn thành công.


# Sử dụng Thiết kế - Design


# Thiết kế cơ bản & Hiệu ứng(Animation)

Hướng dẫn chỉnh sửa Thiết kế cơ bản

Để cho App của chúng ta thêm phần sinh động và đẹp, cũng như thay đổi nhiều Font chữ khác nhau thì **Thiết kế** là nơi để chỉnh sửa toàn bộ các vấn đề đó.

Sau khi bạn đã kéo 1 **Block** ra để sử dụng, bạn click vào **Block** đó sẽ hiển thị ra thanh công cụ **Thiết kế** bên phải màn hình. Tại đây bạn có thể chỉnh sửa:

* &#x20;"Màu nền/background" bạn có thể đổi nền từ màu sắc thành nền hình ảnh.&#x20;
* "Chữ/Text" bạn có thể đổi Font(kiểu chữ), đổi màu cho chữ và chỉnh kích thước chữ, in đậm, in nghiêng, căn trái căn phải,khoảng cách giữa các chữ, khoảng cách chữ với lề,.....
* "Đường viền/Border" bạn có thể tạo đường viền cho block, bo tròn,....
* "Hiệu Ứng/Animation" tạo hiệu ứng xuất hiện cho block của bạn
* Ghim/Sticky cố định vị trí của **Block** ở vị trí trên cùng hoặc dưới cùng của App.
* Trục X - Trục Hoành - Trục ngang, Trục Y - Trục Tung - Trục Dọc: khoảng cách từ **Block** đến viền.&#x20;
* W-width độ rộng của **Block**, H-height độ cao của **Block.** Bạn cũng có thể chỉnh kích thước cho **Block** tại W-H để chính xác kích thước thay vì phải kéo **Block** bằng chuột để phóng to hay thu nhỏ.

![phần trên của thiết kế](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FbkxolmnLyfex5Boz5zkL%2Fv%C3%AD%20d%E1%BB%A5%20thi%E1%BA%BFt%20k%E1%BA%BF.png?alt=media\&token=48b46871-ac35-4563-ae29-e423f5b51424) ![phần dưới của thiết kế](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FrdygZMqQG6LV9AULHoV5%2Fv%C3%AD%20d%E1%BB%A5%20thi%E1%BA%BFt%20k%E1%BA%BF%201.png?alt=media\&token=95f3e004-000c-4289-91da-9e74c78f4614)


# Sử dụng Hành động - Action


# Sử dụng Điều kiện(Condition)

Hướng dẫn sử dụng tính năng Điều kiện/Condition

Tính năng **Điều kiện** giúp bạn "Ẩn" hoặc "Hiện" 1 Block. Tính năng này thực hiện theo điều kiện theo toán tử hoặc giá trị dữ liệu : lớn hơn, nhỏ hơn, bằng giá trị,khác giá trị, nhỏ hơn hoặc bằng và lớn hơn hoặc bằng.

Mình sẽ lấy ví dụ như sau: Khi khách hàng nhập vào họ và tên thì mình mới hiện thị ra 1 đoạn văn bản lời chào, còn nếu khách hàng chưa nhập vào tên thì mình sẽ không hiển thị đoạn văn bản đó.

* Để làm được ví dụ này các bạn cần tạo 1 **Model(Dữ liệu)** để lưu trữ thông tin khách hàng nhập và dùng nó để check **Điều kiện.**&#x20;
* Sau đó kéo một **Block Text** và một **Block Input** ra giao diện chỉnh sửa.&#x20;
* Tại **Block Input** chúng ta chọn gán dữ liệu cho **Model** vừa tạo còn đối với **Block Text** chúng ta cũng sẽ chọn **Model** dữ liệu đó để hiển thị nội dung đã điền trong **Input** kèm thêm lời chào và đặt điều kiện hiển thị.

![Tạo Model để lưu dữ liệu và đặt điều kiện](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F5v8yIfMxMJqILqPIANCW%2Fv%C3%AD%20d%E1%BB%A5%20%C4%91i%E1%BB%81u%20ki%E1%BB%87n.png?alt=media\&token=a5d67d25-bcfc-4130-9f55-8c0382c5ad3f)

![Gán giá trị cho model ở Block Input](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FlkjrPLWeExr1MRTq2fcB%2Fv%C3%AD%20d%E1%BB%A5%20%C4%91i%E1%BB%81u%20ki%E1%BB%87n%201.png?alt=media\&token=3e89c79d-2f7e-4e4c-b3da-3646229b92d4)

![Hiển thị giá trị của Model ở Block Text và đặt điều kiện hiển thị](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F7uFTIedd4aHXp6lcK9gZ%2Fv%C3%AD%20d%E1%BB%A5%20%C4%91i%E1%BB%81u%20ki%E1%BB%87n%202.png?alt=media\&token=0b89d337-7888-4fcd-b527-83d6f2ca83e9)

Tại điều kiện hiện thị mình đang để giá trị của **Model "**&#x48;ovaTen" bằng với "Nguyen" thì mới hiển thị **Block Text,** các bạn cũng có thể thử với các giá trị khác. Sau khi làm xong các bước trên, bạn hãy **Publish(xuất bản)** ứng dụng và kiểm tra thành quả mình vừa làm được.

![Khi chưa điền giá trị](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2Fa4FhCrsN2zEg5XeIqhZ6%2Fv%C3%AD%20d%E1%BB%A5%20%C4%91i%E1%BB%81u%20ki%E1%BB%87n%203.png?alt=media\&token=d3d5b977-82b2-4682-a954-9eab3e21a4ee) ![Sau khi điền giá trị](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FxhI0bVVwgutmeTHVwhIO%2Fv%C3%AD%20d%E1%BB%A5%20%C4%91i%E1%BB%81u%20ki%E1%BB%87n%204.png?alt=media\&token=5d141c98-4864-4302-a8d8-4a0d568bc985)


# Chức năng Hành động

Hướng dẫn sử dụng chức năng Hành động

**Hành động** là bạn xây dựng một chuỗi hành động khi người dùng thực hiện hành động tương tác vào ứng dụng của bạn.

**Hành động** gồm có : **Action** và **Link**.

* Action bao gồm :&#x20;

  \+ Position : Di chuyển đến vị trí của một **Block** nào đó.

  \+ Funtion : Thực thi 1 Function trên App của bạn.

  \+ API : Thực thi 1 API trên App của bạn.

  \+ Tracking : thực hiện hành động đo lường hành vi khách hàng trên App.

  \+ Model : gán giá trị mới cho 1 **Model**.

  \+ Goolge Form : thu thập thông tin khách hàng và chuyển trực thông tin tiếp về Google Sheet.

  \+ Validate : Check giá trị các **Model**, thường dùng để check giá trị các **Model** để trống.

![Tác vụ trong Action](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2Fo2tqInhLKEHuNGHaQfmJ%2Fv%C3%AD%20d%E1%BB%A5%20h%C3%A0nh%20%C4%91%E1%BB%99ng.png?alt=media\&token=b5554e34-d2c1-4d61-914e-5a910e9e4c77)

* Link bao gồm :&#x20;

  \+ Link : chuyển hướng đến 1 địa chỉ website mà bạn muốn.

  \+ Page : chuyển hướng đến 1 **Màn hình** khác trong App của bạn.

  \+ Phone : gọi điện vào số điện thoại mà bạn điền trong đó. Hỗ trợ theo mã Quốc gia ví dụ Việt Nam (+84).

  \+ Email : mở phần Mail liên hệ theo thiết bị của bạn.

![Tác vụ trong Link](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FmqSUYFSqybpGYp7S7Mdg%2Fv%C3%AD%20d%E1%BB%A5%20h%C3%A0nh%20%C4%91%E1%BB%99ng%201.png?alt=media\&token=7b40ac36-1365-4bf0-8a8a-8794a5975386)


# Thiết lập App

Để vào thiết lập App bạn bấm vào biểu tượng ![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FP96MbKDRtXjRwKuqQbEm%2Fthi%E1%BA%BFt%20l%E1%BA%ADp%20app.png?alt=media\&token=099a2ff8-597c-42b1-988e-3704cedf4773) ở góc trên bên phải màn hình.\
\- **Config** là nơi bạn cài đặt tiêu đề, mô tả,... của App.

![ Giao diện Config](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FSfArZTuJApwh2yrE6u25%2Fthi%E1%BA%BFt%20l%E1%BA%ADp%20app.png?alt=media\&token=1adb88e7-2270-4e26-a00a-67d402891b73)

\- **Header** là nơi để nhúng các thư viện.

![Giao diện Header](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FM0Hw6Zl8bQgt7QoSZnVl%2Fheader.png?alt=media\&token=6cea6804-2d3b-46c0-a15c-9e9d17dd66c5)

\- **Body** là phần chứa nội dung của trang web.

![Giao diện Body](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FawIjxjWC86H2dXVu6ANf%2Fbody.png?alt=media\&token=83ef4246-7db2-408f-b03b-bfc2c3e665c3)

\- **Function** (Hàm): sử dụng ngôn ngữ JavaScript. **Funtion** trong JavaScript là một chương trình con giúp thực thi một công việc cụ thể. là một tập hợp những đoạn mã dùng để thực hiện một nhiệm vụ nào đó. Nó có thể được gọi và tái sử dụng nhiều lần. Bạn có thể chuyển thông tin vào một hàm. Đồng thời, nó cũng có thể gửi trả thông tin trở lại. Nhiều ngôn ngữ lập trình có các hàm dựng sẵn mà người dùng chỉ cần lấy từ thư viện hàm. Ngoài ra, bạn cũng có thể tự tạo ra các hàm theo mục đích của riêng mình.

![Giao diện Function](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FkXIR8iSqt3acc6a8EDX9%2Ffunction.png?alt=media\&token=7be607aa-5514-4a4c-a882-e510d0a2f57b)

\- **Tracking** là 1 đoạn code JavaScript bạn gắn vào App của mình để theo dõi, đo lường lượng khách hàng truy cập vào App của mình, ghi nhận hành động của họ trên App.

![Giao diện Tracking](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FHL3ceuc7m8oxYwwhSfJC%2FTracking.png?alt=media\&token=1a0fcb13-e97c-48a1-adf7-bcb46a9e18cc)


# Sử dụng API

**API** là các phương thức, giao thức kết nối với các thư viện và ứng dụng khác. Nó là viết tắt của **Application Programming Interface** – giao diện lập trình ứng dụng. **API** cung cấp khả năng cung cấp khả năng truy xuất đến một tập các hàm hay dùng. Và từ đó có thể trao đổi dữ liệu giữa các ứng dụng

Hiểu nhanh về **API** để áp dụng trong **Appon**.\
Trong **Appon** phần **API** là phần tương đối khó hiểu với những bạn mới bắt đầu.\
\- Để nói 1 cách dễ hiểu. **API** là cách để bạn kết nối đến phần mềm mà bạn đang sử dụng (dĩ nhiên để có **API** thì nhà cung cấp phần mềm họ phải viết tài liệu hướng dẫn kết nối **API**). Ví dụ: bạn dùng Sapo, bạn muốn kết nối đến các sản phẩm của bạn trên Sapo thì phía Sapo đã làm sẵn tài liệu **API** để bạn có thể kết nối theo hướng dẫn của họ.\
\- Mỗi một đơn vị phần mềm họ sẽ tự định nghĩa cách thức kết nối khác nhau. Nhưng đều dựa theo 1 tiêu chuẩn chung dưới đây:\
1\. “**GET**” / “**POST**” bạn sẽ nhìn thấy 2 từ này trong quá trình đọc tài liệu. Bạn hãy hiểu đây là phương thức kết nối dạng GET hay POST. Với GET bạn hiểu nôm na là lấy dữ liệu ra, còn với POST là đưa dữ liệu vào (có chiều đọc và chiều ghi để bạn phân biệt)\
2\. Url: là đường link kết nối\
3\. Body: là dữ liệu cho phương thức POST\
4\. Param: là dữ liệu cho cả GET và POST\
5\. Header: là thiết lập cho cả GET và POST

Khi bạn đọc tài liệu của bất kỳ bên nào họ sẽ dựa theo 5 thông số bên trên, sự khác biệt là mỗi bên họ tự đặt tên cho dữ liệu của mình (giống như mỗi 1 nhà họ tự đặt tên con cái theo ý thích). Bạn chỉ cần điền đúng các thông số theo tài liệu họ đưa là bạn đã kết nối được.

* dưới đây là ví dụ về API gửi tin của BotBanHang

![thiết lập URL và Params](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FGkvvEpcFR0Gzul3aC48M%2Fv%C3%AD%20d%E1%BB%A5%20api.png?alt=media\&token=69e6b2e9-b71f-487f-ac64-741559e5a1ed)

![thiết lập Header](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F2jlUTFXDjahcLeT8qsu9%2Fv%C3%AD%20d%E1%BB%A5%20api%201.png?alt=media\&token=5fbbca03-4dd6-42c9-b600-72b0304728e2)

![Thiết lập Body](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FBdy4asjD8XZ8Xh5t02hW%2Fv%C3%AD%20d%E1%BB%A5%20api%202.png?alt=media\&token=2dcabc5a-f48d-42e3-ac7a-99fbd934ba14)

* lưu ý : trên đây chỉ là ví dụ về API của BotBanHang. Không nhất thiết API nào cũng cần có đủ 3 phần thiết lập như trên, tùy vào từng API , do từng bên lập trình khác nhau mà các thông số đưa vào sẽ khách nhau. Các bạn nên đọc kỹ tài liệu mà kỹ thuật cung cấp.


# Sử dụng Hành động Google Form

hướng dẫn sử dụng tính năng Google Form

Hành động Google Form trên Appon là tính năng giúp bạn đẩy các thông tin dữ liệu về Google sheet 1 cách đơn giản.

Mình có ví dụ như sau: Bạn tạo App tại Appon và App này có mục đích là lấy lại thông tin những khách hàng quan tâm đến sản phẩm của bạn, và khi khách hàng để lại thông tin tại Form thì thông tin của khách hàng sẽ chuyển ngay đến Google Sheet.

Để làm được ví dụ trên thì các bạn cần thực hiện theo các bước như sau:\
1\. Tạo form ở Google Form truy cập <https://docs.google.com/forms>:

* Form gồm : Họ tên, số điện thoại, địa chỉ.
* Lưu ý : Google Form phải để ở chế độ công khai và dạng trả lời ngắn
* Ấn ViewForm và copy link ViewForm

![Khởi tạo form và ấn chọn Viewform](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FttmG2i4f06lzDU1LqB1I%2Fv%C3%AD%20d%E1%BB%A5%20googleform.png?alt=media\&token=2d1a1afc-7040-4433-a158-9728828e32dc)

![Sao chép link Viewform](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2Fp3X5tFl4SFIJWafAHD0t%2Fv%C3%AD%20d%E1%BB%A5%20googleform%203.png?alt=media\&token=1bd729c0-2aef-40b1-8853-8924dbdc56f3)

2\. Đăng nhập vào Appon và thiết kế Form

* Tạo **Dữ liệu(Model)** để lưu trữ thông tin khách hàng điền
* Kéo **Block Input** và chọn **Model** lưu dữ liệu vừa tạo
* Kéo **Block Button** >> chọn "Hành đông" >> thêm hành động "Google Form" và dán link ViewForm copy ở bước 1 sau đó ấn "Get Form"

![Tạo bảng dữ liệu lưu trữ thông tin](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FNU2VzKwmDuaum6U0Zg3e%2Fv%C3%AD%20d%E1%BB%A5%20googleform%201.png?alt=media\&token=fae8bc2a-95c2-4a73-82b2-085476739c84)

![Sử dụng Input và gán dữ liệu cho các Block Input](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FL9YclTjBkRoLGCBvm949%2Fv%C3%AD%20d%E1%BB%A5%20googleform%202.png?alt=media\&token=fd876769-8160-4472-a3a9-19e22801647d)

![dán link Viewform và ấn Get form](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FLv6ESgtY2Y9sY1SttkoP%2Fv%C3%AD%20d%E1%BB%A5%20googleform%204.png?alt=media\&token=c046c119-b268-48e0-abf5-4f021d04be1d)

![chọn Data Model tương ứng](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FU1h493epZvog7YmRSRgE%2Fv%C3%AD%20d%E1%BB%A5%20googleform%205.png?alt=media\&token=57db824f-7d38-422a-8442-6bb547eb6675)

3\. Publish ứng dụng và Kiểm tra dữ liệu nhập Form về Google Sheet.

![Nhập thông tin và ấn nút Đăng ký](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F8toHONOPpHJpH47QHXcG%2Fv%C3%AD%20d%E1%BB%A5%20googleform%206.png?alt=media\&token=0d7393d8-598a-4b2f-8c60-906196d2756d)

![Kiểm tra data trên Google sheet của bạn](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F41xFw2p8aZk27KrpiFlI%2Fv%C3%AD%20d%E1%BB%A5%20googleform%207.png?alt=media\&token=d463248e-b1ff-4ee3-8365-44abd1e3527c)

Chúc các bạn thành công !


# Tích hợp Tracking / Conversion


# Tích hợp Facebook Pixel

## 1. Chọn tài khoản quảng cáo

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M4Jtbc77IbBxxC38kce%2F-M4JwC29REjOAwyxshPt%2Fimage.png?alt=media\&token=b24a21e5-089d-4012-9e24-22b90c4fcaa8)

## 2. Tạo mã Pixels

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M4Jtbc77IbBxxC38kce%2F-M4JwQI9PyqeCq2wqnbV%2Fimage.png?alt=media\&token=712fe814-b512-4461-9fc7-8455e7bdcef1)

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M4Jtbc77IbBxxC38kce%2F-M4JwuBFBa86tPYYVcbh%2Fimage.png?alt=media\&token=09d6c8e5-82e9-422c-bf9b-1539aa2046a8)

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M4Jtbc77IbBxxC38kce%2F-M4Jxva9uXKlEMKe1dP3%2Fimage.png?alt=media\&token=9cbde217-e5a7-499f-9a77-526ba42db8e2)

Sao chép lại Code Pixel

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M4Jtbc77IbBxxC38kce%2F-M4JyB-n-dm9FsIwNSbz%2Fimage.png?alt=media\&token=47a87ce2-244f-4e09-a645-3bff1986ce66)

## 3. Cài đặt Pixel cho Appon

* Truy cập **Setting**![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FP96MbKDRtXjRwKuqQbEm%2Fthi%E1%BA%BFt%20l%E1%BA%ADp%20app.png?alt=media\&token=099a2ff8-597c-42b1-988e-3704cedf4773) > **Header**
* Dán Code Pixel vừa copy ở trên vào đầu trang Header
* Sau đó các bạn có thể sử dụng Tracking bằng cách chọn sang phần **Hành động** của **Button,** hoặc của **Màn hình,**.....

![dán mã vào phần Header](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FhHIxT6VIwmCnk0IVov2V%2Fv%C3%AD%20d%E1%BB%A5%20pixel%20FB.png?alt=media\&token=a7e01f80-ea75-49fb-a790-a5a517a8a702)

![Chọn hành động Tracking](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FmCTj2jjV0YPgXIeIiNg6%2Fv%C3%AD%20d%E1%BB%A5%20pixel%20FB%201.png?alt=media\&token=15355c95-d35d-4f3b-a95b-3d5943dcfd6e) ![Thêm Tracking đo lương cụ thể](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FAZSQZrNCVNMqkY8cVrdY%2Fv%C3%AD%20d%E1%BB%A5%20pixel%20FB%202.png?alt=media\&token=1415178b-e612-4feb-ac09-f958231ef2af)


# Google Analytic

Hướng dẫn sử dụng Google Analytic

Nội dung sớm được cập nhật...


# Tích hợp Tiktok Pixel

Hướng dẫn tích hợp Tiktok Pixel

Nội dung sớm được cập nhật...


# Tích hợp Chatbot

Hướng dẫn tích hợp Chatbot


# Manychat


# Chatfuel


# Bot Bán Hàng

Hướng dẫn tích hợp Minigame, Selling page, Form thông tin,... vào Bot Bán Hàng.

## 1. Tích hợp chatbot Bot Bán Hàng

### 1.1. Đăng nhập Bot Bán Hàng

\- Truy cập: <https://page.botbanhang.vn/>

\- Chọn Fanpage cần triển khai -> **Chatbot**

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F4dnPUMfZZXFzrP1T64Ls%2Fpage.png?alt=media\&token=1fbe7d3a-826a-475f-acd8-b4c7da913524)

### 1.2. Thêm tên miền [https://app.appon.vn](https://app.appon.vn/)

\- **Thiết lập -> Thiết lập chung -> Website**: Thêm tên miền: <https://app.appon.vn/>[ ](https://app.appon.vn/)\
và **Lưu**

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FRHwpFR71ECstdoHEy3fb%2Fth%C3%AAm%20domain%20appon.png?alt=media\&token=3f97d59a-65b8-46b5-9018-de5932c42549)

### 1.3. Tạo kịch bản Chatbot

\- Chọn **Chatbot** -> **Kịch bản -> Tạo Kịch bản**

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FUauNhUoqMteB0YTdw0Jv%2Fk%E1%BB%8Bch%20b%E1%BA%A3n.png?alt=media\&token=3390e2d5-8543-449e-a318-0cfbd0cf2e4d)

\- Thiết lập kịch bản Minigame

* Tên kịch bản: **Minigame Chabot**
* Dạng tin nhắn: **Nút ấn**
* Nội dung tin nhắn mẫu:  🎉️![🎉](https://cdn.jsdelivr.net/emojione/assets/3.1/png/32/1f389.png)VÒNG QUAY MAY MẮN ️🎉️![🎉](https://cdn.jsdelivr.net/emojione/assets/3.1/png/32/1f389.png)\
  Cùng page\_name  nhận hàng ngàn quà tặng hấp dẫn.\
  ![💥](https://cdn.jsdelivr.net/emojione/assets/3.1/png/32/1f4a5.png)Ấn nút "Nhận quà" để tham gia trò chơi ![🎡](https://cdn.jsdelivr.net/emojione/assets/3.1/png/32/1f3a1.png) Vòng quay may mắn![🎡](https://cdn.jsdelivr.net/emojione/assets/3.1/png/32/1f3a1.png)  ! Cơ hội nhận được những phần quà từ {{page\_name}} &#x20;
* Tiêu đề nút: Nhận quà
* **Chức năng -> Địa chỉ Web**
* URL: Link app + ?mid={{client\_id}}
* Ví dụ link: [https://app.appon.vn/6237e61be06f7df84ac09baa/?mid={{client\_id}}](https://app.appon.vn//6237e61be06f7df84ac09baa/?mid={{client_id}})
* Tích chọn Hiển thị trong Messenger và dán URL vào dòng dưới
* Sau đó kéo ngược lên và **Lưu lại**

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2Flm2eoq6iYGnlUVFARjV6%2Fv%C3%AD%20d%E1%BB%A5%20k%E1%BA%BFt%20n%E1%BB%91i%20chatbot.jpg?alt=media\&token=dda93cb0-3a1c-4618-8ea6-c3e7d0ff9fb6)

### 1.4. Kết nối Chatbot với Minigame

\- Sao chép **Mã xác thực trang** ở chatbot **: Thiết lập** -> **Thiết lập chung**&#x20;

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FPQosLvfvMdedryXA0XBt%2Fsao%20ch%C3%A9p%20m%C3%A3%20x%C3%A1c%20th%E1%BB%B1c%20trang.png?alt=media\&token=15f2973f-3a59-455a-8545-67d3a510ce7e)

\- Dán **Mã xác thực trang** ở chatbot vào **Minigame:** Chọn **Dữ liệu** -> **Chatbot ->** **Token**

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FK2tG7APpREu1dVyKy5bi%2Fv%C3%AD%20d%E1%BB%A5%20k%E1%BA%BFt%20n%E1%BB%91i%20chatbot%201.jpg?alt=media\&token=95d100ef-b771-4c02-a23a-700350e87860)

## 2. Hoàn thành và trải nghiệm

\- Publish Minigame, sau đó quay lại **Chatbot ->** **Kịch bản** **->** Chọn kịch bản **Minigame Chatbot** vừa tạo ở trên

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F4GGAii8u9DNygGaIhKs4%2Ftr%E1%BA%A3i%20nghi%E1%BB%87m.png?alt=media\&token=7d9af1d5-4c89-4c94-bd4a-d31d27338f96)

* Ấn **ĐẾN** để trải nghiệm
* **Sao chép** link gửi bạn bè, đăng lên hội nhóm, trang cá nhân để nhiều người cùng tham gia
* Bạn cũng có thể dùng điện thoại **Quét mã** để trải nghiệm. Sử dụng mã quét cho các chiến dịch Offline: **Voucher, Card, Tờ rơi, Checkin Sự kiện, Quét mã nhận quà tại quầy,...**

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M4JsNiIsC_WjlS8wT0V%2F-M4JtG7o_NHD8YUtceFk%2Fimage.png?alt=media\&token=ef20ecb7-ddcb-45ea-a324-508f866694ff)


# Xuất bản Domain riêng

Video hướng dẫn trỏ tên miền riêng vào app.

Để trỏ **Tên miền** vào Appon trước hết bạn phải thuê phần mềm quản lý tên miền.

Bạn có thể trỏ tên miền phụ hoặc tên miền chính của bạn vào Appon như sau ấn **Publish**![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F4e5AMxWDfB5A5PbFMJsg%2Fv%C3%AD%20d%E1%BB%A5%20subdomain.png?alt=media\&token=7a7294fa-98b3-4215-b028-4ac011c72dc5)và chọn **Publish with Domain**:

* Tên miền chính(Domain) :&#x20;

  \+ Điền tên miền chính của bạn tại phần "(1) Enter your domain". Ví dụ: tranduythanh.net

  \+ Sau khi điền xong tên miền bấm Create TXT record (2)![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FZwKWQHhK47at3CIaHyJn%2Fv%C3%AD%20d%E1%BB%A5%20subdomain%205.png?alt=media\&token=7a0b7305-c126-406c-ba34-f2d606f96122)

  \+ Tiếp theo bạn mở phần mềm quản lý tên miền của bạn và tạo bản ghi mới, chúng ta sẽ tạo 2 bản ghi: \
  \* Bản ghi 1: Type : A; Name : @ (hoặc tên miền chính); Content : [54.251.167.215](http://54.251.167.215) >> bấm save\
  \* Bản ghi 2:Typle : TXT; Name @ (hoặc tên miền chính); Content : là đoạn mã bạn đã tạo ở bước 2 Create TXT Record >> bấm save

  \+ Sau khi tạo xong 2 bản ghi quay lại Appon đợi 1 chút để tên miền mới được ghi nhận và ấn **Publish**

![Bản ghi 1](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FHfno2Lq9xL4XwAuSdndz%2Fv%C3%AD%20d%E1%BB%A5%20subdomain%202.jpg?alt=media\&token=3cfbc306-a16a-4568-80ef-b149d4115feb) ![Bản ghi 2](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FSuDHYvG0HQJTMofzFZeF%2Fv%C3%AD%20d%E1%BB%A5%20subdomain%203.png?alt=media\&token=70d5257a-8020-4bdd-af64-8aeaa12b4ee3)

* Tên miền phụ(SubDomain): gần tương tự như tên miền chính

  \+ Điền tên miền phụ của bạn tại phần "(1) Enter your domain". Ví dụ: profile.tranduythanh.net

  \+ Sau khi điền xong tên miền bấm Create TXT record (2)![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FZwKWQHhK47at3CIaHyJn%2Fv%C3%AD%20d%E1%BB%A5%20subdomain%205.png?alt=media\&token=7a0b7305-c126-406c-ba34-f2d606f96122)

  \+ Tiếp theo bạn mở phần mềm quản lý tên miền của bạn và tạo bản ghi mới, chúng ta sẽ tạo 2 bản ghi: \
  \* Bản ghi 1: Type : CNAME; Name : profile(tên subdomain của bạn); Content : cname.botup.io >> bấm save\
  \* Bản ghi 2:Typle : TXT; Name @ (hoặc tên miền chính); Content : là đoạn mã bạn đã tạo ở bước 2 Create TXT Record >> bấm save

  \+ Sau khi tạo xong 2 bản ghi quay lại Appon đợi 1 chút để tên miền mới được ghi nhận và ấn **Publish**&#x20;

![Bản ghi 1](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FjxYh07FG1AKgUkB9uOy5%2Fv%C3%AD%20d%E1%BB%A5%20subdomain%204.png?alt=media\&token=51bd4fee-699f-419a-b861-534da4bfc73d) ![Bản ghi 2](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FSuDHYvG0HQJTMofzFZeF%2Fv%C3%AD%20d%E1%BB%A5%20subdomain%203.png?alt=media\&token=70d5257a-8020-4bdd-af64-8aeaa12b4ee3)


# Vòng quay may mắn

Minigame Vòng quay may mắn chắc không còn xa lạ gì với chúng ta. Tuy nhiên bạn đã bao giờ tưởng tượng bạn có thể tự tạo 1 Minigame thúc đẩy doanh số cho doanh nghiệp của mình chỉ mất 1 - 2 giờ đồng hồ? Hãy bắt đầu với bài Thiết lập cơ bản nhé!


# Thiết lập cơ bản

Tích hợp CMS,  Kết nối Google Sheet

Để thiết lập 1 Minigame Vòng quay may mắn bạn cần tiến hành 4 bước sau:

1. Khởi tạo Minigame
2. Thiết lập Cơ cấu giải thưởng
3. Thiết kế ảnh Vòng quay
4. Tạo Google Sheet thông tin khách hàng

## 1. Khởi tạo Minigame

1.1. Truy cập <https://studio.appon.vn/studio/dashboard/> đăng nhập với tài khoản Appon của bạn

1.2. Truy cập Menu **Gamificaton** sau đó click chọn "Xem tất cả" để xem toàn bộ Template của Game

![Menu Gamification](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FeCgvw3CKGjQpaGgs5JZi%2Fv%C3%AD%20d%E1%BB%A5%20gamification.png?alt=media\&token=53a6dd07-9b60-4124-8cff-331eac24bb78)

1.3. Lựa chọn mẫu vòng quay mà bạn muốn, di chuyển trỏ chuột vào đó chọn **"Tạo một bản sao"** và đặt tên cho Game của bạn

![Ấn Tạo một bản sao](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FD8CsKzfTFVPSstvciH0i%2Fv%C3%AD%20d%E1%BB%A5%20gamification%201.png?alt=media\&token=2be7e3a3-1021-4146-86ff-bdb0af35b5d4)

![Đặt tên cho Game của bạn](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FQBDHlbwzSK5cWLN2dWDA%2Fv%C3%AD%20d%E1%BB%A5%20gamification%202.png?alt=media\&token=e00bf82e-c27c-41e9-99ab-4fc7b3aa1a17)

![Hoàn thành khởi tạo game](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F7Nw5Sm6CMSrIUz2BagyY%2Fv%C3%AD%20d%E1%BB%A5%20gamification%203.png?alt=media\&token=c320e753-0ff9-403e-8d6a-86128300d131)

## 2. Thiết lập Cơ cấu giải thưởng trên Merchant

2.1. Truy cập: <https://merchant.botup.io/> đăng nhập với tài khoản **Appon**

2.2. Tạo mới doanh nghiệp của bạn

![Ở đây mình đã tạo sẵn vài doanh nghệp của mình](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FbieLmfSCYp3zInx94sNq%2Fv%C3%AD%20d%E1%BB%A5%20gamification%204.png?alt=media\&token=77936c66-50ef-4c5d-bcf3-20d402c04190)

2.3. Truy cập vào doanh nghiệp của bạn và Tạo 1 **Chiến dịch** mới.

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FXg1kBZiBWSW6qNcJQDnk%2Fv%C3%AD%20d%E1%BB%A5%20gamification%205.png?alt=media\&token=4bd691b3-e88e-43cc-8c74-4e559c6a7ce3)

Trông mỗi chiến dịch sẽ có các thông số như sau :&#x20;

* Tên chiến dịch: Nhập tên chiến dịch minigame của bạn
* Lượt quay tối đa: Số lượt chơi tối đa của mỗi người chơi
* Lượt quay mặc định: Số lượt quay ban đầu của mỗi người chơi
* Thời gian bắt đầu & Thời gian kết thúc: chọn thời gian bắt đầu và kết thúc chiến dịch của bạn

**Lưu ý:** lượt quay mặc định luôn nhỏ hơn lượt quay tối đa

* Thiết lập giải thưởng với tỷ lệ tương ứng, tổng tỷ lệ = 100% *(không thêm các phần khác).*&#x20;
* Ấn "Tạo mới" để thêm các ô phần thưởng, icon "thùng rác" để xóa phần thưởng
* Click nút **Tạo mới game** để hoàn thành

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FOh1GUG7sfMteJbSiN8HU%2Fv%C3%AD%20d%E1%BB%A5%20gamification%206.png?alt=media\&token=c04e9f9e-1eef-40ac-b5b3-e44da277788f)

![Hoàn thành tạo Chiến dịch](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FJzV3hgtykf42Nzi9Xjz6%2Fv%C3%AD%20d%E1%BB%A5%20gamification%207.png?alt=media\&token=e8a14f1c-250a-48ad-aae5-392d665225ca)

2.3 Kết nối **Merchant** với **Minigame Vòng quay**

Với cơ cấu giải thưởng vừa tạo trên **Merchant**, bạn có thể kết nối đến bất cứ game nào trên hệ thống Appon. Ví dụ: Vòng quay may mắn, Rung cây hái lộc, Đập lu,...

Bài viết này sẽ hướng dẫn các bạn kết nối **Merchant** với Minigame Vòng quay

* Click nút "**Thiết lập"** ![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F8sZwfLN9Qr3SzH3iSlQN%2Fv%C3%AD%20d%E1%BB%A5%20gamification%208.png?alt=media\&token=7b46ef0e-7d3d-4a27-b58c-7ec616a5eff5) để lấy thông tin kết nối
* Copy ID chiến dịch sau đó quay lại trang chỉnh sửa giao diện Minigame, chọn **Dữ liệu**  >> **campain >>** thay ID chiến dịch vừa sao chép vào cột "campain\_i&#x64;**".**

![sao chép id chiến dịch](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2Fzfoq2XeDsUYRToB01FPK%2Fv%C3%AD%20d%E1%BB%A5%20gamification%209.png?alt=media\&token=fe8bd8a8-d78d-4bb4-81c7-5134fd7077b2) ![thay vào Model](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2Fs7npJjmkfWVgzzGBEjSp%2Fv%C3%AD%20d%E1%BB%A5%20gamification%2010.png?alt=media\&token=f22fa515-6af7-49e8-8fe7-516f4f99154c)

Như vậy là bạn đã hoàn thành tích hợp Merchant vào Minigame&#x20;

## 3. Thiết kế ảnh vòng quay

![Kích thước bắt buộc 600x600px | Định dạng PNG](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3w8wMtO2utejIIJH8d%2Fimage1585852160533.png?alt=media\&token=19ea71d8-ec25-46ce-a0a3-42f1a20329d7)

Với phần thiết kế ảnh vòng quay bạn hoàn toàn có thể Thiết kế trên Adobe illustrator, Photoshop,... Bài viết sẽ hướng dẫn các bạn thiết kế ảnh vòng quay cực dễ với: <https://cms.botup.io/image-editor>

3.1. Truy cập <https://cms.botup.io/image-editor> đăng nhập với tài khoản Appon

3.2. Thiết kế ảnh vòng quay

**Lưu ý**: Vị trí giải thưởng ứng với vị trí trên Merchant như sau

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FyR4MgxkC79UBHoC14KoH%2Fv%C3%AD%20d%E1%BB%A5%20gamification%2012.png?alt=media\&token=89918f70-49a7-4fdc-ae36-7b252f8ee404) ![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FMo7TLR7to0zFtfqPAgec%2Fv%C3%AD%20d%E1%BB%A5%20gamification%2011.png?alt=media\&token=ce460283-0588-4a62-904c-c6864d49f45e)

* Đầu tiên click nút **Tạo ngay** màu đỏ và chờ khoảng 30s để hệ thống tải giao diện mẫu

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3wB1nQ5oXEEKKf5E-b%2Fimage.png?alt=media\&token=d892f4e8-bb04-412c-83fe-e16957aaa66b)

* Kéo và thả Mẫu bạn thích vào vùng thiết kế

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3wAmEoBR1UsOisGbRp%2Fimage.png?alt=media\&token=49dfc07b-0207-4e54-97e4-7c4cf672bb4d)

* Sửa ảnh, chữ theo phần quà của bạn

![Chỉnh sửa hình ảnh, dùng chuột kéo thả ảnh ở vị trí bạn muốn](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3wBlnJZtPMcAPj0ndP%2Fimage.png?alt=media\&token=7050cad7-ae58-44af-ad89-c99c58ee75cd)

![Chỉnh sửa chữ (tên giải thưởng)](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3wCfrdGD7iJqLNisdF%2Fimage.png?alt=media\&token=a4f1a43b-4e80-45c7-b7cc-0ac5e5f2b514)

* **Publish** hình ảnh thành link

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3wD7_o76Heu6egTxH3%2Fimage.png?alt=media\&token=b84b48a4-969e-4cb8-a9cc-69b6a7d9d7d6)

![Sao chép link ảnh sau khi Publish](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3wDW-Fv0EGBDALQchj%2Fimage.png?alt=media\&token=5dec1ad8-0fea-48f6-8f73-48f800ba8594)

Thay link ảnh vào Minigame sẽ cần thay ở 2 vị trí

1. Chọn **Dữ liệu**, dán link ảnh vừa thiết kế ở bước trên vào **cauhinhgame >> bgvongquay**.

![thay link ảnh vòng quay](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FBOfFoeEai1RqSU9B7Sz5%2Fv%C3%AD%20d%E1%BB%A5%20gamification%2013.png?alt=media\&token=ae186837-12d1-4e08-88de-1a7f9ac639d0)

&#x20; 2\. Click đúp vào ảnh vòng quay ở ngoài giao diện chỉnh sửa

![click 2 lần vào hình ảnh](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2Fd96yGv804nfs7hqnZSxh%2Fv%C3%AD%20d%E1%BB%A5%20gamification%2014.png?alt=media\&token=17300b31-0885-4ede-8d07-2231a1bbede8) ![dán link ảnh vừa thiết kế vào trong dấu ngoặc kép. (src="link\_ảnh")](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FIy37bclEot783UhtGVmP%2Fv%C3%AD%20d%E1%BB%A5%20gamification%2015.png?alt=media\&token=03ee9194-232c-4229-971e-8d64efe8ec1f)

## 4. Tạo Google Sheet thông tin khách hàng

4.1. Truy cập <https://docs.google.com/forms/> và đăng nhập tài khoản Google

4.2. Tạo Biểu mẫu khai thác thông tin

![Click để tạo biểu mẫu](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3wHmRXmdAHE3JX2RFI%2Fimage.png?alt=media\&token=af606c2c-8e76-4152-8fef-e9c574d3e917)

Tạo Biểu mẫu khai thác những thông tin bạn cần với dạng **Trả lời ngắn** (Họ tên, Số điện thoại, Địa chỉ, Phần thưởng,...)

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3wIQd3-RY2lksJO2-C%2Fimage.png?alt=media\&token=6e6b329e-a09c-4d59-b0fe-b3513e4f1bab)

Sau đó chọn Preview (Xem trước) và copy đường dẫn

![Click biểu tượng hình con mắt](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3wIgV0BzsX_SCi_waV%2Fimage.png?alt=media\&token=e5377180-e641-43f4-a378-d8fafe467b0a)

Copy lại đường dẫn có đuôi **/viewform**

**Ví dụ:** [**https://docs.google.com/forms/d/e/1FAIpQLSeSTJkvkheNv\_cA8oRXU3lSiL820Gmfl8CPgiCOO6z7Tm1JOw/viewform**](https://docs.google.com/forms/d/e/1FAIpQLSeSTJkvkheNv_cA8oRXU3lSiL820Gmfl8CPgiCOO6z7Tm1JOw/viewform)

4.3. Tạo bảng tính Câu trả lời

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3wNtKT2mYJMaN13HPD%2Fimage.png?alt=media\&token=146f3989-d3bc-4e62-82a3-6da41824b01a)

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3wO7sXwHYvtcKET8D9%2Fimage.png?alt=media\&token=1352316e-eeec-4ce4-8d4c-fef2cadf570d)

4.4. Kết nối Google Form với Minigame vòng quay

Quay lại giao diện thiết kế **Vòng quay**, chọn **Màn hình** "thongtinkhachhang" >> ấn vào nút "Đăng ký" >> và chọn sang **Hành động**. Khi đó bạn sẽ nhìn thấy hành động **Google Form** >> click vào hành động **Google Form** và dán link "Viewform" bạn vừa copy ở trên và ấn "Get form"

Sau khi đã quét được **Google Form**, bạn click chọn **Select Data** tới giá trị tương ứng

Các Data: Họ tên, Số điện thoại, Địa chỉ nằm trong bảng **Dữ liệu** "thongtinkhachhang".&#x20;

![ấn vào nút "Đăng ký" >> và chọn sang Hành động](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FxfwJjDmjWSpS7UDFtAIG%2Fv%C3%AD%20d%E1%BB%A5%20gamification%2016.png?alt=media\&token=0939a694-c194-4eeb-8f02-e25e92dbc3f8)

![Chọn vào các model tương ứng](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FLyfggfMwAlaudbOhJaDg%2Fv%C3%AD%20d%E1%BB%A5%20gamification%2017.png?alt=media\&token=e9f8da5a-c8de-49bf-b76d-b5fbe44625bc)

## 5. Hoàn thành và trải nghiệm

* Click biểu tượng **Publish** ![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F4e5AMxWDfB5A5PbFMJsg%2Fv%C3%AD%20d%E1%BB%A5%20subdomain.png?alt=media\&token=7a7294fa-98b3-4215-b028-4ac011c72dc5) sau đó chọn **Publish with Appon**

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FQXnjQcv38viKdA2oWAKq%2Fv%C3%AD%20d%E1%BB%A5%20gamification%2018.png?alt=media\&token=0baf4018-13a9-404d-8b2d-1ac75769d510)

* Click **Go to Preview** để trải nghiệm và copy link chia sẻ cho bạn bè cùng tham gia nhé

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FyfkavqNeVG2cdFchglSo%2Fv%C3%AD%20d%E1%BB%A5%20gamification%2019.png?alt=media\&token=8594c35a-88fe-4bb6-b7db-d8bb06374585)


# Tích hợp Chatbot

## 1. Tích hợp chatbot Bot Bán Hàng

### 1.1. Đăng nhập Bot Bán Hàng

\- Truy cập: <https://page.botbanhang.vn/>

\- Chọn Fanpage cần triển khai -> **Chatbot**

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F4dnPUMfZZXFzrP1T64Ls%2Fpage.png?alt=media\&token=1fbe7d3a-826a-475f-acd8-b4c7da913524)

### 1.2. Thêm tên miền [https://app.appon.vn](https://app.appon.vn/)

\- **Thiết lập -> Thiết lập chung -> Website**: Thêm tên miền: <https://app.appon.vn/>[ ](https://app.appon.vn/)\
và **Lưu**

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FRHwpFR71ECstdoHEy3fb%2Fth%C3%AAm%20domain%20appon.png?alt=media\&token=3f97d59a-65b8-46b5-9018-de5932c42549)

### 1.3. Tạo kịch bản Chatbot

\- Chọn **Chatbot** -> **Kịch bản -> Tạo Kịch bản**

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FUauNhUoqMteB0YTdw0Jv%2Fk%E1%BB%8Bch%20b%E1%BA%A3n.png?alt=media\&token=3390e2d5-8543-449e-a318-0cfbd0cf2e4d)

\- Thiết lập kịch bản Minigame

* Tên kịch bản: **Minigame Chabot**
* Dạng tin nhắn: **Nút ấn**
* Nội dung tin nhắn mẫu:  🎉️![🎉](https://cdn.jsdelivr.net/emojione/assets/3.1/png/32/1f389.png)VÒNG QUAY MAY MẮN ️🎉️![🎉](https://cdn.jsdelivr.net/emojione/assets/3.1/png/32/1f389.png)\
  Cùng page\_name  nhận hàng ngàn quà tặng hấp dẫn.\
  ![💥](https://cdn.jsdelivr.net/emojione/assets/3.1/png/32/1f4a5.png)Ấn nút "Nhận quà" để tham gia trò chơi ![🎡](https://cdn.jsdelivr.net/emojione/assets/3.1/png/32/1f3a1.png) Vòng quay may mắn![🎡](https://cdn.jsdelivr.net/emojione/assets/3.1/png/32/1f3a1.png)  ! Cơ hội nhận được những phần quà từ {{page\_name}} &#x20;
* Tiêu đề nút: Nhận quà
* **Chức năng -> Địa chỉ Web**
* URL: Link app + ?mid={{client\_id}}
* Ví dụ link: [https://app.appon.vn/6237e61be06f7df84ac09baa/?mid={{client\_id}}](https://app.appon.vn//6237e61be06f7df84ac09baa/?mid={{client_id}})
* Tích chọn Hiển thị trong Messenger và dán URL vào dòng dưới
* Sau đó kéo ngược lên và **Lưu lại**

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2Flm2eoq6iYGnlUVFARjV6%2Fv%C3%AD%20d%E1%BB%A5%20k%E1%BA%BFt%20n%E1%BB%91i%20chatbot.jpg?alt=media\&token=dda93cb0-3a1c-4618-8ea6-c3e7d0ff9fb6)

### 1.4. Kết nối Chatbot với Minigame

\- Sao chép **Mã xác thực trang** ở chatbot **: Thiết lập** -> **Thiết lập chung**&#x20;

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FPQosLvfvMdedryXA0XBt%2Fsao%20ch%C3%A9p%20m%C3%A3%20x%C3%A1c%20th%E1%BB%B1c%20trang.png?alt=media\&token=15f2973f-3a59-455a-8545-67d3a510ce7e)

\- Dán **Mã xác thực trang** ở chatbot vào **Minigame:** Chọn **Dữ liệu** -> **Chatbot ->** **Token**

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FK2tG7APpREu1dVyKy5bi%2Fv%C3%AD%20d%E1%BB%A5%20k%E1%BA%BFt%20n%E1%BB%91i%20chatbot%201.jpg?alt=media\&token=95d100ef-b771-4c02-a23a-700350e87860)

## 2. Hoàn thành và trải nghiệm

\- Publish Minigame, sau đó quay lại **Chatbot ->** **Kịch bản** **->** Chọn kịch bản **Minigame Chatbot** vừa tạo ở trên

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F4GGAii8u9DNygGaIhKs4%2Ftr%E1%BA%A3i%20nghi%E1%BB%87m.png?alt=media\&token=7d9af1d5-4c89-4c94-bd4a-d31d27338f96)

* Ấn **ĐẾN** để trải nghiệm
* **Sao chép** link gửi bạn bè, đăng lên hội nhóm, trang cá nhân để nhiều người cùng tham gia
* Bạn cũng có thể dùng điện thoại **Quét mã** để trải nghiệm. Sử dụng mã quét cho các chiến dịch Offline: **Voucher, Card, Tờ rơi, Checkin Sự kiện, Quét mã nhận quà tại quầy,...**

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M4JsNiIsC_WjlS8wT0V%2F-M4JtG7o_NHD8YUtceFk%2Fimage.png?alt=media\&token=ef20ecb7-ddcb-45ea-a324-508f866694ff)


# Tích hợp Share

Hướng dẫn tích hợp Share

Bước 1: Thay id App\
&#x20;\- Sao chép id app -> dán vào đuôi của trường current*url và thay vào trường app\_id.*<br>

![Thay id app](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FLnudY83Cnw3YcNFRoVC9%2Fshare.png?alt=media\&token=1708e1a2-2c9a-4a43-a3a4-e284da10352d)

\- Bước 2: Thay hình ảnh khi chia sẻ \
&#x20;Bạn vào trang imgur.com -> New post -> Choose Photo -> tải ảnh Banner -> đợi khi nào có chữ Upload Complete -> chuột phải -> sao chép địa chỉ hình ảnh -> dán địa chỉ hình ảnh vừa sao chép vào trường " link\_anh\_share " trong model Share.

<div align="left"><img src="https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FDDTsG7FQ5agmvnIcyS8I%2Fchia%20s%E1%BA%BB.png?alt=media&amp;token=ea523b0b-70eb-449f-9c44-48a530fd1b97" alt="Ảnh banner khi chia sẻ"> <img src="https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FcAm1x6PTFE3O0qAtfnMy%2FUntitled-1.png?alt=media&amp;token=b2b96090-4d08-42bf-976b-0738e7ed04bd" alt="tải ảnh banner lên imgur"></div>

![Dán địa chỉ hình ảnh](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FEVTmNk9fdub98lyynWLy%2F%E1%BA%A3nh%20banner.png?alt=media\&token=fea2d226-7e51-4fad-a09d-f7b3ba638d82)

Bước 3: Thay link kịch bản trong function redirect\_link\
&#x20; \- Truy cập botbanhang.vn -> chọn page -> chatbot -> kịch bản -> copy ref link -> mở Appon.vn -> mở thiết lập -> function -> redirect\_link -> dán ref link kịch bản -> lưu.

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F9oxi2WVGGIZHHBWnSMfU%2Fref%20link.png?alt=media\&token=f54a954f-4f37-431f-9e0d-2ad5f0560aeb)


# Tích hợp tạo mã giảm giá

Có 2 cách để bạn tích hợp mã giảm giá \
Cách 1: Tạo mã voucher tự động ( Merchant sẽ tự động tạo mã voucher cho bạn)\
&#x20; \- Truy cập merchant.botup.io -> đăng nhập -> doanh nghiệp -> chiến dịch -> thiết lập  -> Tạo mã voucher tự động -> có -> cập nhật

![Tạo mã voucher tự động](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FyJbjI9FhdZCwaSiGpG55%2Fvoucher%20t%E1%BB%B1%20%C4%91%E1%BB%99ng.png?alt=media\&token=31026b41-a885-4100-bf3b-3686cd5ae439)

\
Cách 2: Tích hợp voucher từ file của bạn\
&#x20; \- Bước 1: Up file voucher lên merchant\
&#x20;   Truy cập merchant.botup.io -> đăng nhập -> doanh nghiệp -> chiến dịch -> Voucher -> Upload voucher -> chọn file -> open\
&#x20; \- Bước 2:  Mở lại chiến dịch -> lấy voucher từ file upload -> có -> cập nhật.

![Upload Voucher](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FhuyfjkopJdGz3K3QHwtE%2FUpload%20voucher.png?alt=media\&token=4ee32f6a-6de7-49db-b61c-d1a8971a3fdb)

{% file src="/files/nsuBAWg1yj6iCt9Iw77W" %}


# Game khác


# Minigame dạng "Đập lu"

Phiên bản game đập lu nhận quà

Để thiết lập 1 Minigame Đập lu bạn cần tiến hành 4 bước sau:

1. Khởi tạo Minigame
2. Thiết lập Cơ cấu giải thưởng
3. Thiết kế ảnh hộp quà
4. Tạo Google Sheet thông tin khách hàng

## 1. Khởi tạo Minigame

1.1. Truy cập <https://studio.appon.vn/studio/dashboard/> đăng nhập với tài khoản Appon của bạn

1.2. Truy cập Menu **Gamificaton** sau đó click chọn "Xem tất cả" để xem toàn bộ Template của Game

![Menu Gamification](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FeCgvw3CKGjQpaGgs5JZi%2Fv%C3%AD%20d%E1%BB%A5%20gamification.png?alt=media\&token=53a6dd07-9b60-4124-8cff-331eac24bb78)

1.3. Lựa chọn mẫu đập lu mà bạn muốn, di chuyển trỏ chuột vào đó chọn **"Tạo một bản sao"** và đặt tên cho Game của bạn

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FAhI1rJtzlYTLIw6BCcDO%2F%C4%91%E1%BA%ADp%20lu.png?alt=media\&token=89d60ea1-d9fc-4ca9-9820-90f8da9fd8d1)

![Đặt tên cho Game của bạn](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FQBDHlbwzSK5cWLN2dWDA%2Fv%C3%AD%20d%E1%BB%A5%20gamification%202.png?alt=media\&token=e00bf82e-c27c-41e9-99ab-4fc7b3aa1a17)

![Khởi tạo hoàn tất](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FFwTk9I8Upcki5LkX97EF%2Fgiao%20di%E1%BB%87n%20%C4%91%E1%BA%ADp%20lu.png?alt=media\&token=a7a99029-4029-472e-b21e-e47d3178db3d)

## 2. Thiết lập Cơ cấu giải thưởng trên Merchant

2.1. Truy cập: <https://merchant.botup.io/> đăng nhập với tài khoản **Appon**

2.2. Tạo mới doanh nghiệp của bạn

![Ở đây mình đã tạo sẵn vài doanh nghệp của mình](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FbieLmfSCYp3zInx94sNq%2Fv%C3%AD%20d%E1%BB%A5%20gamification%204.png?alt=media\&token=77936c66-50ef-4c5d-bcf3-20d402c04190)

2.3. Truy cập vào doanh nghiệp của bạn và Tạo 1 **Chiến dịch** mới.

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FXg1kBZiBWSW6qNcJQDnk%2Fv%C3%AD%20d%E1%BB%A5%20gamification%205.png?alt=media\&token=4bd691b3-e88e-43cc-8c74-4e559c6a7ce3)

Trông mỗi chiến dịch sẽ có các thông số như sau :&#x20;

* Tên chiến dịch: Nhập tên chiến dịch minigame của bạn
* Lượt quay tối đa: Số lượt chơi tối đa của mỗi người chơi
* Lượt quay mặc định: Số lượt quay ban đầu của mỗi người chơi
* Thời gian bắt đầu & Thời gian kết thúc: chọn thời gian bắt đầu và kết thúc chiến dịch của bạn

**Lưu ý:** lượt quay mặc định luôn nhỏ hơn lượt quay tối đa

* Thiết lập giải thưởng với tỷ lệ tương ứng, tổng tỷ lệ = 100% *(không thêm các phần khác).*&#x20;
* Ấn "Tạo mới" để thêm các ô phần thưởng, icon "thùng rác" để xóa phần thưởng
* Click nút **Tạo mới game** để hoàn thành

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FOh1GUG7sfMteJbSiN8HU%2Fv%C3%AD%20d%E1%BB%A5%20gamification%206.png?alt=media\&token=c04e9f9e-1eef-40ac-b5b3-e44da277788f)

![Hoàn thành tạo Chiến dịch](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FJzV3hgtykf42Nzi9Xjz6%2Fv%C3%AD%20d%E1%BB%A5%20gamification%207.png?alt=media\&token=e8a14f1c-250a-48ad-aae5-392d665225ca)

2.3 Kết nối **Merchant** với **Minigame Đập lu**

Với cơ cấu giải thưởng vừa tạo trên **Merchant**, bạn có thể kết nối đến bất cứ game nào trên hệ thống Appon. Ví dụ: Vòng quay may mắn, Rung cây hái lộc, Đập lu,...

Bài viết này sẽ hướng dẫn các bạn kết nối **Merchant** với Minigame Đập lu

* Click nút "**Thiết lập"** ![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F8sZwfLN9Qr3SzH3iSlQN%2Fv%C3%AD%20d%E1%BB%A5%20gamification%208.png?alt=media\&token=7b46ef0e-7d3d-4a27-b58c-7ec616a5eff5) để lấy thông tin kết nối
* Copy ID chiến dịch sau đó quay lại trang chỉnh sửa giao diện Minigame, chọn **Dữ liệu**  >> **campain >>** thay ID chiến dịch vừa sao chép vào cột "campain\_i&#x64;**".**

![sao chép id chiến dịch](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2Fzfoq2XeDsUYRToB01FPK%2Fv%C3%AD%20d%E1%BB%A5%20gamification%209.png?alt=media\&token=fe8bd8a8-d78d-4bb4-81c7-5134fd7077b2) ![thay vào Model](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2Fs7npJjmkfWVgzzGBEjSp%2Fv%C3%AD%20d%E1%BB%A5%20gamification%2010.png?alt=media\&token=f22fa515-6af7-49e8-8fe7-516f4f99154c)

Như vậy là bạn đã hoàn thành tích hợp Merchant vào Minigame&#x20;

## 3. Thiết kế ảnh hộp quà

Để thay đổi được hình ảnh bạn nháy đúp vào ảnh hộp quà và dán đường link ảnh vào phần tô đen bên dưới. Đối với những hộp quà khác cũng làm tương tự.

![Thay ảnh hộp quà](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F5880fVh4K3P314quMANN%2F%E1%BA%A3nh%20h%E1%BB%99p%20qu%C3%A0.png?alt=media\&token=38574ac8-d260-4aab-bad8-cfbb426b09d1)

## 4. Tạo Google Sheet thông tin khách hàng

4.1. Truy cập <https://docs.google.com/forms/> và đăng nhập tài khoản Google

4.2. Tạo Biểu mẫu khai thác thông tin

![Click để tạo biểu mẫu](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3wHmRXmdAHE3JX2RFI%2Fimage.png?alt=media\&token=af606c2c-8e76-4152-8fef-e9c574d3e917)

Tạo Biểu mẫu khai thác những thông tin bạn cần với dạng **Trả lời ngắn** (Họ tên, Số điện thoại, Địa chỉ, Phần thưởng,...)

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3wIQd3-RY2lksJO2-C%2Fimage.png?alt=media\&token=6e6b329e-a09c-4d59-b0fe-b3513e4f1bab)

Sau đó chọn Preview (Xem trước) và copy đường dẫn

![Click biểu tượng hình con mắt](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3wIgV0BzsX_SCi_waV%2Fimage.png?alt=media\&token=e5377180-e641-43f4-a378-d8fafe467b0a)

Copy lại đường dẫn có đuôi **/viewform**

**Ví dụ:** [**https://docs.google.com/forms/d/e/1FAIpQLSeSTJkvkheNv\_cA8oRXU3lSiL820Gmfl8CPgiCOO6z7Tm1JOw/viewform**](https://docs.google.com/forms/d/e/1FAIpQLSeSTJkvkheNv_cA8oRXU3lSiL820Gmfl8CPgiCOO6z7Tm1JOw/viewform)

4.3. Tạo bảng tính Câu trả lời

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3wNtKT2mYJMaN13HPD%2Fimage.png?alt=media\&token=146f3989-d3bc-4e62-82a3-6da41824b01a)

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3wO7sXwHYvtcKET8D9%2Fimage.png?alt=media\&token=1352316e-eeec-4ce4-8d4c-fef2cadf570d)

4.4. Kết nối Google Form với Minigame vòng quay

Quay lại giao diện thiết kế **Vòng quay**, chọn **Màn hình** "thongtinkhachhang" >> ấn vào nút "Đăng ký" >> và chọn sang **Hành động**. Khi đó bạn sẽ nhìn thấy hành động **Google Form** >> click vào hành động **Google Form** và dán link "Viewform" bạn vừa copy ở trên và ấn "Get form"

Sau khi đã quét được **Google Form**, bạn click chọn **Select Data** tới giá trị tương ứng

Các Data: Họ tên, Số điện thoại, Địa chỉ nằm trong bảng **Dữ liệu** "thongtinkhachhang".

![Thông tin bắn về sheet](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FCLb7s1olc5BXaBT2miDy%2Fth%C3%B4ng%20tin%20%C4%91%E1%BA%ADp%20lu.png?alt=media\&token=1d2d0869-12d1-4bf8-9f01-10b24e1cdb0b)

## 5. Hoàn thành và trải nghiệm

* Click biểu tượng **Publish** ![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F4e5AMxWDfB5A5PbFMJsg%2Fv%C3%AD%20d%E1%BB%A5%20subdomain.png?alt=media\&token=7a7294fa-98b3-4215-b028-4ac011c72dc5) sau đó chọn **Publish with Appon**

![Publish](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FwhvKnApnsDeNg82YxTtC%2Fpublish.png?alt=media\&token=b7675d5e-670c-4a4b-9553-657a1eaeb743)

* Click **Go to Preview** để trải nghiệm và copy link chia sẻ cho bạn bè cùng tham gia nhé

![Go to Preview](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FMmLR1AaWZw69hcmjpSGS%2Fgo%20to%20preview.png?alt=media\&token=cbf2e2fb-99c0-4a07-836d-a29c762f50df)


# Minigame dạng "Rung cây hái lộc"

Phiên bản game rung cây hái lộc

Để thiết lập 1 Minigame Rung cây bạn cần tiến hành 4 bước sau:

1. Khởi tạo Minigame
2. Thiết lập Cơ cấu giải thưởng
3. Thiết kế hình ảnh cây và ảnh phần quà
4. Tạo Google Sheet thông tin khách hàng

## 1. Khởi tạo Minigame

1.1. Truy cập <https://studio.appon.vn/studio/dashboard/> đăng nhập với tài khoản Appon của bạn

1.2. Truy cập Menu **Gamificaton** sau đó click chọn "Xem tất cả" để xem toàn bộ Template của Game

![Menu Gamification](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FeCgvw3CKGjQpaGgs5JZi%2Fv%C3%AD%20d%E1%BB%A5%20gamification.png?alt=media\&token=53a6dd07-9b60-4124-8cff-331eac24bb78)

1.3. Lựa chọn mẫu đập lu mà bạn muốn, di chuyển trỏ chuột vào đó chọn **"Tạo một bản sao"** và đặt tên cho Game của bạn

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FVkXZW3LijYkEU5ger1CP%2Ft%C3%A0i%20li%E1%BB%87u%20t%E1%BA%A1o%20rung%20c%C3%A2y.png?alt=media\&token=7c42b3f2-b0f8-404e-a0d6-efe99d679c38)

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FWykSkw5lbuL0xTyBCdCl%2Fgiao%20di%E1%BB%87n%20rung%20c%C3%A2y.png?alt=media\&token=66ff2efa-3056-49b9-a107-581ccd1bb2be)

## 2. Thiết lập Cơ cấu giải thưởng trên Merchant

2.1. Truy cập: <https://merchant.botup.io/> đăng nhập với tài khoản **Appon**

2.2. Tạo mới doanh nghiệp của bạn

![Ở đây mình đã tạo sẵn vài doanh nghệp của mình](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FbieLmfSCYp3zInx94sNq%2Fv%C3%AD%20d%E1%BB%A5%20gamification%204.png?alt=media\&token=77936c66-50ef-4c5d-bcf3-20d402c04190)

2.3. Truy cập vào doanh nghiệp của bạn và Tạo 1 **Chiến dịch** mới.

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FXg1kBZiBWSW6qNcJQDnk%2Fv%C3%AD%20d%E1%BB%A5%20gamification%205.png?alt=media\&token=4bd691b3-e88e-43cc-8c74-4e559c6a7ce3)

Trông mỗi chiến dịch sẽ có các thông số như sau :&#x20;

* Tên chiến dịch: Nhập tên chiến dịch minigame của bạn
* Lượt quay tối đa: Số lượt chơi tối đa của mỗi người chơi
* Lượt quay mặc định: Số lượt quay ban đầu của mỗi người chơi
* Thời gian bắt đầu & Thời gian kết thúc: chọn thời gian bắt đầu và kết thúc chiến dịch của bạn

**Lưu ý:** lượt quay mặc định luôn nhỏ hơn lượt quay tối đa

* Thiết lập giải thưởng với tỷ lệ tương ứng, tổng tỷ lệ = 100% *(không thêm các phần khác).*&#x20;
* Ấn "Tạo mới" để thêm các ô phần thưởng, icon "thùng rác" để xóa phần thưởng
* Click nút **Tạo mới game** để hoàn thành

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FOh1GUG7sfMteJbSiN8HU%2Fv%C3%AD%20d%E1%BB%A5%20gamification%206.png?alt=media\&token=c04e9f9e-1eef-40ac-b5b3-e44da277788f)

![Hoàn thành tạo Chiến dịch](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FJzV3hgtykf42Nzi9Xjz6%2Fv%C3%AD%20d%E1%BB%A5%20gamification%207.png?alt=media\&token=e8a14f1c-250a-48ad-aae5-392d665225ca)

2.3 Kết nối **Merchant** với **Minigame Rung cây**

Với cơ cấu giải thưởng vừa tạo trên **Merchant**, bạn có thể kết nối đến bất cứ game nào trên hệ thống Appon. Ví dụ: Vòng quay may mắn, Rung cây hái lộc, Đập lu,...

Bài viết này sẽ hướng dẫn các bạn kết nối **Merchant** với Minigame Rung cây

* Click nút "**Thiết lập"** ![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F8sZwfLN9Qr3SzH3iSlQN%2Fv%C3%AD%20d%E1%BB%A5%20gamification%208.png?alt=media\&token=7b46ef0e-7d3d-4a27-b58c-7ec616a5eff5) để lấy thông tin kết nối
* Copy ID chiến dịch sau đó quay lại trang chỉnh sửa giao diện Minigame, chọn **Dữ liệu**  >> **campain >>** thay ID chiến dịch vừa sao chép vào cột "campain\_i&#x64;**".**

![sao chép id chiến dịch](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2Fzfoq2XeDsUYRToB01FPK%2Fv%C3%AD%20d%E1%BB%A5%20gamification%209.png?alt=media\&token=fe8bd8a8-d78d-4bb4-81c7-5134fd7077b2) ![thay vào Model](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2Fs7npJjmkfWVgzzGBEjSp%2Fv%C3%AD%20d%E1%BB%A5%20gamification%2010.png?alt=media\&token=f22fa515-6af7-49e8-8fe7-516f4f99154c)

Như vậy là bạn đã hoàn thành tích hợp Merchant vào Minigame&#x20;

## 3. Thiết kế hình ảnh cây và ảnh hộp quà

Có 2 cách để bạn có thể thay hình ảnh.

Cách 1: Là bạn có thể dán trực tiếp địa chỉ hình ảnh của bạn ở phần thiết lập -> Đường dẫn ảnh.

Cách 2: Là bạn có thể chọn những hình ảnh bạn đã tải lên appon -> thiết lập -> chọn ảnh -> chọn ảnh bạn muốn thay -> select

![Thay ảnh cây và phần quà](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2Fx7kRDv4w57CwoUEyFLA2%2Fthay%20%E1%BA%A3nh.png?alt=media\&token=eb397318-a8fb-4fd8-a4e9-1c9224f27f72)

## 4. Tạo Google Sheet thông tin khách hàng

4.1. Truy cập <https://docs.google.com/forms/> và đăng nhập tài khoản Google

4.2. Tạo Biểu mẫu khai thác thông tin

![Click để tạo biểu mẫu](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3wHmRXmdAHE3JX2RFI%2Fimage.png?alt=media\&token=af606c2c-8e76-4152-8fef-e9c574d3e917)

Tạo Biểu mẫu khai thác những thông tin bạn cần với dạng **Trả lời ngắn** (Họ tên, Số điện thoại, Địa chỉ, Phần thưởng,...)

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3wIQd3-RY2lksJO2-C%2Fimage.png?alt=media\&token=6e6b329e-a09c-4d59-b0fe-b3513e4f1bab)

Sau đó chọn Preview (Xem trước) và copy đường dẫn

![Click biểu tượng hình con mắt](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3wIgV0BzsX_SCi_waV%2Fimage.png?alt=media\&token=e5377180-e641-43f4-a378-d8fafe467b0a)

Copy lại đường dẫn có đuôi **/viewform**

**Ví dụ:** [**https://docs.google.com/forms/d/e/1FAIpQLSeSTJkvkheNv\_cA8oRXU3lSiL820Gmfl8CPgiCOO6z7Tm1JOw/viewform**](https://docs.google.com/forms/d/e/1FAIpQLSeSTJkvkheNv_cA8oRXU3lSiL820Gmfl8CPgiCOO6z7Tm1JOw/viewform)

4.3. Tạo bảng tính Câu trả lời

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3wNtKT2mYJMaN13HPD%2Fimage.png?alt=media\&token=146f3989-d3bc-4e62-82a3-6da41824b01a)

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmigXqQJLlwBF71lfdy%2F-M3w63qlemUTtBka4j8h%2F-M3wO7sXwHYvtcKET8D9%2Fimage.png?alt=media\&token=1352316e-eeec-4ce4-8d4c-fef2cadf570d)

4.4. Kết nối Google Form với Minigame vòng quay

Quay lại giao diện thiết kế **Vòng quay**, chọn **Màn hình** "thongtinkhachhang" >> ấn vào nút "Đăng ký" >> và chọn sang **Hành động**. Khi đó bạn sẽ nhìn thấy hành động **Google Form** >> click vào hành động **Google Form** và dán link "Viewform" bạn vừa copy ở trên và ấn "Get form"

Sau khi đã quét được **Google Form**, bạn click chọn **Select Data** tới giá trị tương ứng

Các Data: Họ tên, Số điện thoại, Địa chỉ nằm trong bảng **Dữ liệu** "thongtinkhachhang".

![Thông tin bắn về sheet](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FCLb7s1olc5BXaBT2miDy%2Fth%C3%B4ng%20tin%20%C4%91%E1%BA%ADp%20lu.png?alt=media\&token=1d2d0869-12d1-4bf8-9f01-10b24e1cdb0b)

## 5. Hoàn thành và trải nghiệm

* Click biểu tượng **Publish** ![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F4e5AMxWDfB5A5PbFMJsg%2Fv%C3%AD%20d%E1%BB%A5%20subdomain.png?alt=media\&token=7a7294fa-98b3-4215-b028-4ac011c72dc5) sau đó chọn **Publish with Appon**

![Publish](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FwhvKnApnsDeNg82YxTtC%2Fpublish.png?alt=media\&token=b7675d5e-670c-4a4b-9553-657a1eaeb743)

* Click **Go to Preview** để trải nghiệm và copy link chia sẻ cho bạn bè cùng tham gia nhé

![Go to Preview](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FMmLR1AaWZw69hcmjpSGS%2Fgo%20to%20preview.png?alt=media\&token=cbf2e2fb-99c0-4a07-836d-a29c762f50df)


# Hướng dẫn cơ bản


# Thiết lập Selling page và cửa hàng trên Merchant

Để thiết lập 1 **SellingPage** bạn cần tiến hành 2 bước sau:

1. Khởi tạo **SellingPage**
2. Thiết lập cửa hàng và upload sản phẩm lên Merchant

## 1. Khởi tạo Sellingpage

1.1. Truy cập <https://studio.appon.vn/studio/dashboard/> đăng nhập với tài khoản Appon của bạn

1.2. Truy cập Menu **Selling Page** sau đó click chọn "Xem tất cả" để xem toàn bộ Template

1.3. Lựa chọn mẫu vòng quay mà bạn muốn, di chuyển trỏ chuột vào đó chọn **"Tạo một bản sao"** và đặt tên cho **SelingPage** của bạn

![Chọn Template và ấn Tạo một bản sao](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FpKTzCNlrfTchZAgrkTya%2Fv%C3%AD%20d%E1%BB%A5%20sellingpage%201.png?alt=media\&token=1c321f35-89f2-4853-8e6d-500335e67b80)

![Đặt tên cho Selling Page của bạn](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FQBDHlbwzSK5cWLN2dWDA%2Fv%C3%AD%20d%E1%BB%A5%20gamification%202.png?alt=media\&token=e00bf82e-c27c-41e9-99ab-4fc7b3aa1a17)

![Hoàn thành khởi tạo SellingPage](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2Fwz8zCsLUvU5L7FYXtR3m%2Fv%C3%AD%20d%E1%BB%A5%20sellingpage%202.png?alt=media\&token=6b346b05-b61e-4e50-b7eb-154b027a0c90)

## 2. Thiết lập cửa hàng trên Merchant

2.1. Truy cập: <https://merchant.botup.io/> đăng nhập với tài khoản **Appon**

2.2. Tạo mới doanh nghiệp của bạn nếu chưa có

![Ở đây mình đã tạo sẵn vài doanh nghệp của mình](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FbieLmfSCYp3zInx94sNq%2Fv%C3%AD%20d%E1%BB%A5%20gamification%204.png?alt=media\&token=77936c66-50ef-4c5d-bcf3-20d402c04190)

2.3. Truy cập vào doanh nghiệp của bạn và Tạo mới trong phần "Selling page gần đây"

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FXg1kBZiBWSW6qNcJQDnk%2Fv%C3%AD%20d%E1%BB%A5%20gamification%205.png?alt=media\&token=4bd691b3-e88e-43cc-8c74-4e559c6a7ce3)

Điền các thông tin cơ bản như: Tên cửa hàng, Số điện thoại, Email,... và ấn Tạo mới để tạo cửa hàng.

![Điền thông tin cửa hàng](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FrMt4dVFqrfwj8mjIV5qg%2Fv%C3%AD%20d%E1%BB%A5%20sellingpage%203.png?alt=media\&token=1f5c2882-312b-4dad-b597-9655653c16a1)

![Hoàn thành tạo mới cửa hàng](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FNDZHaxrc9it8x3Pg0SIa%2Fv%C3%AD%20d%E1%BB%A5%20sellingpage%204.png?alt=media\&token=369f1d3c-3401-40d5-96e2-51f7f7d714b7)

Sau khi tạo xong cửa hàng, các bạn ấn vào cửa hàng vừa tạo để thiết lập sản phẩm. Khi bấm vào các bạn sẽ cài đặt cửa hàng của mình theo mặc định hoặc đồng bộ với các bên CRM khác.

Nếu bạn không dùng CRM nào vui lòng bấm : **Cài đặt theo mặc định**

Nếu bạn dùng CRM : vui lòng ấn Tiếp theo và làm theo hướng dẫn

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FT99S1GQGUu1tdWsbJ6mV%2Fv%C3%AD%20d%E1%BB%A5%20sellingpage%205.png?alt=media\&token=642d82d8-c69d-49b1-a470-33a1cf3f4982)

2.3 Kết nối cửa hàng **Merchant** với **SellingPage**

Để kết nối cửa hàng bạn vào SellingPage

* Click nút "**Thiết lập"** để lấy thông tin kết nối

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FwUslY3TuiVzr6XE8K5TV%2Fv%C3%AD%20d%E1%BB%A5%20sellingpage%206.png?alt=media\&token=e14fb474-fffa-4c6b-b803-946d3aa1ae9d)

* Copy **Accect Token** sau đó quay lại trang chỉnh sửa giao diện SellingPage, chọn **Dữ liệu**  >> **settingSelling >>** thay **Accect Token** vừa sao chép vào cột "Authorizatio&#x6E;**".**

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FHqTQASucin5wUrhRehmm%2Fv%C3%AD%20d%E1%BB%A5%20sellingpage%207.png?alt=media\&token=fbbc5cea-b31b-4415-882b-3a0d4d133484)

Như vậy là bạn đã hoàn thành tích hợp **Merchant** vào **SellingPage**

* Lưu ý : Sau khi hoàn thành đặt đơn hàng trên **Sellingpage**, đơn hàng đó sẽ tự động hiển thị trên **Merchant** tại mục "Đơn hàng".

## **3**. Hoàn thành và trải nghiệm

* Click biểu tượng **Publish** ![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F4e5AMxWDfB5A5PbFMJsg%2Fv%C3%AD%20d%E1%BB%A5%20subdomain.png?alt=media\&token=7a7294fa-98b3-4215-b028-4ac011c72dc5) sau đó chọn **Publish with Appon**

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FQXnjQcv38viKdA2oWAKq%2Fv%C3%AD%20d%E1%BB%A5%20gamification%2018.png?alt=media\&token=0baf4018-13a9-404d-8b2d-1ac75769d510)

* Click **Go to Preview** để trải nghiệm và copy link chia sẻ cho bạn bè cùng tham gia nhé

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FyfkavqNeVG2cdFchglSo%2Fv%C3%AD%20d%E1%BB%A5%20gamification%2019.png?alt=media\&token=8594c35a-88fe-4bb6-b7db-d8bb06374585)


# Tích hợp phần mềm bán hàng

Nếu bạn mới tạo cửa hàng vui lòng ấn "Tiếp theo" và chọn CRM mà bạn sử dụng.

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FT99S1GQGUu1tdWsbJ6mV%2Fv%C3%AD%20d%E1%BB%A5%20sellingpage%205.png?alt=media\&token=642d82d8-c69d-49b1-a470-33a1cf3f4982)

Nếu như bạn đã có cửa hàng từ trước hoặc đã cài theo mặc định thì vui lòng chọn "Thiết lập" >> "Đồng bộ sản phẩm", sau đó chọn CRM mà bạn đang sử dụng.

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FIvriFZaoqG91wYFmjbMD%2Fv%C3%AD%20d%E1%BB%A5%20%C4%91%E1%BB%93ng%20b%E1%BB%99%20s%E1%BA%A3n%20ph%E1%BA%A9m.png?alt=media\&token=b8abbe85-5025-4e7a-a671-8bd1c7cb17a1)


# Kiot Việt

Hướng dẫn đồng bộ sản phẩm từ CRM Kiot Việt về Merchant

1\. Đăng nhập vào cửa hàng của mình trên trang chủ <https://www.kiotviet.vn/>

2\. Trên màn hình Quản lý, từ menu Thiết lập (1), bạn kích chọn Thiết lập cửa hàng (2).

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FkhDMX1jxtRJ46gSNlS10%2Fv%C3%AD%20d%E1%BB%A5%20%C4%91%E1%BB%93ng%20b%E1%BB%99%20s%E1%BA%A3n%20ph%E1%BA%A9m%20kiotviet.png?alt=media\&token=726e225c-603a-4791-a672-22ea424b69f7)

3\. Bạn chọn Thiết lập kết nối API (3). Trên thông tin thiết lập kết nối bạn thao tác như sau:

4\. Kích Tạo mã (4) để tạo ra Mã bảo mật

5\. Sao chép Client ID và Mã bảo mật, sau đó Dán vào lần lượt 2 ô Client Id và Client Secret ở trang CMS

6\. Retailer chính là tên cửa hàng của bạn viết liền không dấu

7\. Nhấn Xác nhận

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FO43YXvi0IPS0IvHg2mHA%2Fv%C3%AD%20d%E1%BB%A5%20%C4%91%E1%BB%93ng%20b%E1%BB%99%20s%E1%BA%A3n%20ph%E1%BA%A9m%20kiotviet%201.png?alt=media\&token=04d12407-a064-4d39-b8e4-a7ba863b36d5)


# Nhanh.vn

Hướng dẫn đồng bộ sản phẩm với CRM Nhanh.vn

Hiện tại tài khoản API chỉ cấp cho khách hàng đã kí hợp đồng với Nhanh.vn, xin vui lòng liên hệ với nhân viên Nhanh.vn đã kí hợp đồng với bạn để được trợ giúp.


# Haravan

Hướng dẫn đồng bộ sản phẩm từ CRM Haravan về Merchant

1\. Truy cập trang <https://accounts.haravan.com> và đăng nhập tài khoản của bạn.

2\. Bấm vào biểu tượng Điều khiển ở trên cùng và chọn trang Haravan

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FKPoAXdushokVDGZdJ7hM%2Fv%C3%AD%20d%E1%BB%A5%20%C4%91%E1%BB%93ng%20b%E1%BB%99%20s%E1%BA%A3n%20ph%E1%BA%A9m%20haravan.png?alt=media\&token=1ee22d80-a6bf-4afa-8a16-d41f0f1a372a)

3\. Tại trang này, bạn hãy bấm vào Ứng dụng rồi chọn Ứng dụng riêng

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FquV6YJeE2XpP8NaovdG3%2Fv%C3%AD%20d%E1%BB%A5%20%C4%91%E1%BB%93ng%20b%E1%BB%99%20s%E1%BA%A3n%20ph%E1%BA%A9m%20haravan%201.png?alt=media\&token=dfff4df4-9077-4d56-90e9-3be47233b22c)

4\. Sao chép mã tương ứng cột ở API Key

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FBzEsCnXS44UdLAOcTMTl%2Fv%C3%AD%20d%E1%BB%A5%20%C4%91%E1%BB%93ng%20b%E1%BB%99%20s%E1%BA%A3n%20ph%E1%BA%A9m%20haravan%202.png?alt=media\&token=9737ef22-2f6b-4802-8e1a-5653043736ba)

5\. Dán vào ô API Key ở trên **Merchant** và Nhấn Xác nhận

<br>


# Sapo

Hướng dẫn đồng bộ sản phẩm từ CRM Sapo về Merchant

1\. Truy cập trang quản lý tài khoản Sapo của bạn. Ví dụ: <https://onlyjusttest.mysapo.net/admin>

2\. Chọn mục Ứng dụng (1), rồi chọn Ứng dụng riêng(2)

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FvUidPrwmuEy6cJ1xzQ8r%2Fv%C3%AD%20d%E1%BB%A5%20%C4%91%E1%BB%93ng%20b%E1%BB%99%20s%E1%BA%A3n%20ph%E1%BA%A9m%20sapo.png?alt=media\&token=40fe2383-5c03-44f7-9bbe-bb1b392e8a67)

3\. Ở cửa sổ Ứng dụng riêng, sao chép API key và API Secret ở phần Danh sách quyền

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FBOV9oFFgZPOeP2JzjSqe%2Fv%C3%AD%20d%E1%BB%A5%20%C4%91%E1%BB%93ng%20b%E1%BB%99%20s%E1%BA%A3n%20ph%E1%BA%A9m%20sapo%201.png?alt=media\&token=97c1261e-3e3e-41dd-9635-db9f4d19a887)

4\. Dán vào các ô API key, API Secret ở trang Merchant và nhập Uri

5\. Nhấn Xác nhận


# Misa

Hướng dẫn đồng bộ sản phẩm từ CRM Misa về Merchant

1\. Truy cập trang quản lý của bạn tại MISA eShop. Ví dụ: <https://againtest.mshopkeeper.vn/>.

2\. Ở cột Danh sách bên trái, hãy chọn mục API (1) và ấn Cho phép kết nối.

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FNciwbhaqiEiUKE7kPMg4%2Fv%C3%AD%20d%E1%BB%A5%20%C4%91%E1%BB%93ng%20b%E1%BB%99%20s%E1%BA%A3n%20ph%E1%BA%A9m%20misa.png?alt=media\&token=78c2493a-e7a3-4e38-b72c-adec0144d6db)

3\. Sao chép các thông tin tương ứng ở mục Thiết lập (2) sang trang Merchant.

4\. Nhấn Xác nhận.


# OnlineCRM

Hướng dẫn đồng bộ sản phẩm từ CRM OnlineCRM về Merchant

1\. Chọn một user trên CRM làm đại diện để cấp quyền cho API tạo Lead (các Lead tạo ra sẽ mặc định assign cho user này), sử dụng user quyền admin để kiểm tra access\_key của user này.&#x20;

2\. Vào màn hình thông tin profile của User làm đại diện&#x20;

3\. Kiểm tra access\_key ở cuối màn hình, copy dán sang "Access Key" trên Merchant

4\. Nhấn Xác nhận.

![](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2F7nwRwlLLOZ5YpvxgB399%2Fv%C3%AD%20d%E1%BB%A5%20%C4%91%E1%BB%93ng%20b%E1%BB%99%20s%E1%BA%A3n%20ph%E1%BA%A9m%20CRM%20online.png?alt=media\&token=db4a0394-420c-4f26-9818-836973dafd46)


# Ứng dụng Khảo sát khách hàng

Hướng dẫn tạo App khảo sát khách hàng, câu hỏi trắc nghiệm.

Ngày nay, khi mà công nghệ ngày càng phát triển thì việc thu thập thông tin online, tạo bài kiểm tra online,... càng trở nên cần thiết hơn bao giờ hết.Mình sẽ hướng dẫn bạn tạo bài kiểm tra, câu hỏi trắc nghiệm online trên Appon một cách đơn giản nhất. Cùng tham khảo ngay nhé!

1. Đầu tiên bạn hãy truy cập <https://studio.appon.vn/studio/dashboard/> đăng nhập với tài khoản Appon của bạn
2. Sau đó chọn "Tạo mới ứng dụng"

Với App trắc nghiệm hoặc câu hỏi khảo sát thì chúng ta cần dùng đến 2 **Block** chính đó là **Block Radio** và **Block Checkbox**. Nếu chưa rõ về 2 **Block** này các bạn có thể đọc hướng dẫn cơ bản: "Sử dụng khối - Block".

Sẽ có 2 phần chính trong App.

1. Câu hỏi/Tiêu đề : Sử dụng **Block Text** để ghi câu hỏi.
2. **Radio**/**Checkbox** : đối với các câu hỏi chỉ có một sự lựa chọn thì chúng ta sẽ dùng **Radio**, còn đối với câu hỏi có nhiều hơn một sự lựa chọn thì chúng ta sẽ dùng **Checkbox.**

* Hiểu đơn giản **Radio** là chỉ chọn 1 đáp án đúng(A hoặc B hoăc C....). Còn **Checkbox** là chọn nhiều đáp án đúng ( A và B và C.....)

![Ví dụ Checkbox](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2Fm7hvMTrtX7qnO5PTAi1O%2Fv%C3%AD%20d%E1%BB%A5%20app%20tr%E1%BA%AFc%20nghi%E1%BB%87m%201.png?alt=media\&token=33103521-b621-465e-b60b-7f8f5d6d6e2b) ![Ví dụ Radio](https://486755585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LmigXqQJLlwBF71lfdy%2Fuploads%2FDOsgiAekN2649NaBb5E2%2Fv%C3%AD%20d%E1%BB%A5%20app%20tr%E1%BA%AFc%20nghi%E1%BB%87m%202.png?alt=media\&token=9f84dbb3-3d7e-4205-a2a1-a43680564226)


# Tạo mã E-Voucher / Chatbot

Hướng dẫn tạo App render mã voucher điện tử.

Nội dung sớm được cập nhật...


# Javascript SDK


# Sử dụng Function


# Sử dụng CSS


# Tháng 10 / 2019

Các cập nhật BotUp trong tháng 10.

## 1.0.15 - 18/10/2019

### Sửa lỗi&#x20;

* Sửa tên Template khi tạo mới Page

### Thay đổi

* Tối ưu thiết lập API.
* Tối ưu Block Column để dàn trang, column sẽ bắt buộc.

## 1.0.14 - 15/10/2019

### Thêm

* Thêm nâng cấp App.


