# Manychat

**Bước 1:** Ở **Manychat** bạn tạo ra 2 flow: 

> **Flow 1:** Flow có chứa button bật webview cho khách hàng sử dụng. Khi khách hàng nhấn button sẽ được kết nối tới plugin **webview** trên **Botplus.io**
>
> **Flow 2:** Flow này dùng để xác nhận thông tin của khách hàng trên chatbot. Sau khi khách hàng hoàng thành thông tin trên webview và nhấn submit thì flow 2 sẽ được kích hoạt.

![ Flow in Manychat](https://i.imgur.com/pPXcOyP.png)

![Flow 1: Button View Shop](https://i.imgur.com/TNdWH0G.png)

![Flow 2: Comfirm Information](https://i.imgur.com/OIVgt0s.png)

**Bước 2:** Trên botplus.io bạn truy cập vào menu **Push data** sau đó chọn **"Creat New Platform"** và chọn **Manychat** ở menu xổ xuống. 

![Connect Manuchat Platform](https://i.imgur.com/yOHfH4h.png)

**Bước 3:** Đây là phần cấu hình kết nối của Webview với Manychat

![Connect To Manychat Platform](https://i.imgur.com/7i1CI8V.png)

> **Name**: Tên của kết nối (nên đặt có từ Manychat để dễ nhớ)
>
> **Bot Token**: Token của bot bạn tạo bên Manychat
>
> **Flow ID**: ID của flow xác nhận lại thông tin sau khi user điền xong.
>
> **Data Fields**: Các trường dữ liệu để đẩy từ bot về

*Để điền được các trường thông tin **Bot Token, Flow ID** bạn vui lòng xem bước tiếp theo*

**Bước 4:** 

Để copy Flow ID bạn truy cập vào Flow 2 vừa tạo và copy như hình (bắt đầu từ ký tự content...)

![Flow ID](https://i.imgur.com/HgOZi01.png)

Sau khi copy xong Flow ID, bạn vào **Setting**, sau đó vào **API** và copy đoạn **API Token** của Manychat và paste vào phần Bot Token nhé.

![Bot Token](https://i.imgur.com/sceBfv5.png)

**Bước 5:** Cấu hình truyền dữ liệu trên botplus.io

**5.1:** Trên Manychat truy cập vào **Settings** chọn **Fields** sau đó bạn tạo các User Field tương ứng với các thông tin xác nhận của khách hàng.

![Create User Field](https://i.imgur.com/yKF3ajR.png)

**5.2:** Ở trong bảng cấu hình phần Push Data bạn chọn Add Field để thêm các trường dữ liệu gửi sang Manychat

![](https://i.imgur.com/cU3tu2f.png)

* Chọn vào phần Control Name bạn sẽ thấy các trường dư liệu, trường này được tạo ra trong quá trình bạn xây dựng webview. Và các trường mặc định VD: Money Total, Products của phần Shop.
* Cột control Name chính là cột tên biến mà bạn thu được ở form, còn cột Attr Name chính là cột tên attribute mà bạn muốn truyền về cho bot.

**Bước 6:** Khai báo thông tin cho **Flow 2**

Nhập các tên Fields Name bạn đã nhập ở bước 5 vào mục confirm Data

![Confirm Data](https://i.imgur.com/v23Quw4.png)

**Bước 7:** Cấu hình URL cho webview

Bạn chọn vào Menu **URL Address** (1) và chọn **User free domain** 

***Lưu ý:*** 

* Bạn có thể chỉnh các mục trong free domain để phù hợp nhu cầu của bạn. VD: **shop.botplus.asia/shopthoitrang**
* Bạn có thể sử dụng Use own domain để sử dụng domain riêng của bạn VD **Shopthoitrang.vn**

**Bạn ấn Update sau đó chọn vào mục 3 để copy link dành cho Manychat** (link trong phần URL phía trên sử dụng khi bạn muốn chạy web mà ko cần nhúng vào chatbot)

![](https://i.imgur.com/5zeGcjL.png)

**Bước 8:** Kết nối link của shop vào button.

Ở **Flow 1** chọn **Add button** (có thể sử dụng thẻ Gallerry hoặc thẻ Media cũng được)

![](https://i.imgur.com/n4yv60b.png)

Bạn nhập tên button (VD: Shopping) sau đó chọn tab **Open website** và dán đường dẫn copy **ở bước 7** vào.

![](https://i.imgur.com/A1RGU1E.png)

* Lưu ý: Nếu field name của bạn bị lỗi sẽ bị chuyển thành "Invalid var" thì lúc đó bạn chỉnh sửa lại field name cho đúng là để hệ thống nhận diện nhé.

**Bước 9:** Test Demo

Sau khi hoàn thiện các bước ở trên bạn chọn publish và ấn preview để test bot nhé.

![](https://i.imgur.com/kgj76vG.png)

Messenger sẽ hiển thị tin nhắn và button để mở webview.

![Test Demo](https://i.imgur.com/fRri1UH.png)

Chọn View Shop và bắt đầu trải nghiệm mua sắm online thôi nào.

![](https://i.imgur.com/wo9HUhL.jpg)

Tiếp đến bạn điền đầy đủ thông tin vào mục Thông tin khách hàng

Bot sẽ xác nhận lại thông tin bạn vừa đặt hàng:

![](https://i.imgur.com/rk7p5De.png)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tailieu.botplus.io/webview/push-data/manychat.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.