# Giới thiệu Botplus.io code by ❤️️ # Tạo Webview Để tạo 1 Webview, bạn vui lòng làm theo các bước sau: > 1. Chọn Webview trên thanh menu botplus.io > 2. Chọn phần Types để chọn loại webview bạn muốn sử dụng. > 3. Sau khi chọn xong loại Webview của bạn, nhấn Active trên webview đó để tạo Webview. ![Create Webview](/files/OB0bs7iF7b0MvDIrShgl) Có nhiều loại Webview bạn có thể tạo trên Botplus, hãy lựa chọn phù hợp với nhu cầu của bạn. ![Webview Types](/files/tYhMAH4RCy6OTfbLASDn) Sau khi ấn vào active thì hệ thống sẽ list ra các giao diện (template) của webview cho bạn lựa chọn. Đối với mỗi loại webview sẽ có các giao diện khác nhau (trong hình là các giao diện của webview Pro Shop) Chọn 1 giao diện và nhấn **Active** để bắt đầu sử dụng. ![Proshop1.0 Template](/files/JqPUQ6GMzka2d9wibdCU) # Các Loại Webview Botplus.io hỗ trợ đa dạng các loại webview cho nhiều mục đích sử dụng khác nhau. #### 1: [Form builder](/webview/cac-loai-webview/form-builder): > **Giúp tạo ra Form thu thập thông tin, Landing page...** > > * Form Lấy thông tin khách hàng. > * Survey thu thập ý kiến. > * Form đặt lịch, mua hàng... > * Lading page giới thiệu sản phẩm ..... #### 2: [Proshop 1.0](/webview/cac-loai-webview/proshop-1.0): > **Plugin Proshop giúp tạo ra Shop bán hàng online nâng cao trải nghiệm mua hàng.** > > * Tạo danh mục sản phẩm > * Đăng nhiều sản phẩm vào danh mục > * Tạo sản phẩm theo thuộc tính (màu sắc, size, combo..) > * Đặt hàng, xem giỏ hàng > * Lấy thông tin đặt hàng ..... #### 3: [Table Ranking](/webview/cac-loai-webview/table-ranking): > **Plugin Table Ranking giúp bạn tạo ra một bảng xếp hạng cho người chơi khi tham gia các mini game đua top.** > > * Top Share Viral > * Top mua hàng > * Top điểm chơi game(Lucky Spinner, Shoot Game, Touch Fly...) #### 4: [Loyalty](/webview/cac-loai-webview/loyalty): #### 5: [Share Facebook](/webview/cac-loai-webview/share-facebook): # Form builder Đây là giao diện cấu hình của webview **Form builder** bao gồm 4 phần cơ bản > 1: Các menu chức năng chính > > 2: Khu vực quản lý các trường (field) của form > > 3: Khu vực cấu hình của trường (field) > > 4: Giao diện preview sau khi cấu hình xong 1 form. ![Form Builder](/files/91xmKiIcPG7J99pqYTaC) # Cấu hình các Field Dưới đây là giao diện cấu hình của trang xây dựng form > 1: Là các menu chức năng chính > > 2: Là khu vực để thêm các Field (trường) của form (VD text, button, img...) > > 3: Là khu vực cấu hình các Field (trường) > > 4: Là khu vực xem trước (preview) form. ![](/files/91xmKiIcPG7J99pqYTaC) ## 1- Thẻ Content Thẻ Content dùng để hiển thị nội dung cho khách hàng. VD: Hiển thị văn bản, file ảnh, video, bảng, thiết kế như 1 Landipage... ![Content Card](https://i.imgur.com/mJrxuzc.png) > **Lưu ý** *ở phần này bạn cũng có thể chèn ảnh hoặc video, nhưng để cho không bị vỡ thì bạn cấu hình chiều rộng là 100%* ![](https://i.imgur.com/USIMHmJ.png) ## 2- Thẻ Input Thẻ Input dùng để thu thập thông tin khách hàng. > **Title**: Tiêu đề của thẻ. > > **Control Name:** Tên biến dùng để lưu thông tin khách hàng đã nhập. > > **Default Value:** Giá trị mặc định sẽ được điền sẵn trong ô. > > **Placeholder:** Hiển thị mờ ở phía dưới ô. > > **Control Type:** Loại dữ liệu yêu cầu khách hàng nhập vào (Text, Number, Email, Url, Password, Hidden) > > **Type Note:** Hiển thị thông báo khi khách hàng không nhập đúng loại dữ liệu yêu cầu bên trên. > > **Required:** Chọn Yes để bắt buộc khách hàng điền thông tin, No để không bắt buộc. > > **Required Note:** Thông báo nếu khách hàng để trống dữ liệu (không nhập dữ liệu) ![Input Card](https://i.imgur.com/jHfNmoQ.png) ## 3- Thẻ Textarea Là thẻ để khách hàng nhập các nội dung dài như là ghi chú. > **Title**: Tiêu đề của thẻ. > > **Control Name:** Tên biến dùng để lưu thông tin khách hàng đã nhập. > > **Default Value:** Giá trị mặc định sẽ được điền sẵn trong ô. > > **Placeholder:** Hiển thị mờ ở phía dưới ô. > > **Required:** Chọn Yes để bắt buộc khách hàng điền thông tin, No để không bắt buộc. > > **Required Note:** Thông báo nếu khách hàng để trống dữ liệu (không nhập dữ liệu) ![Textarea Card](https://i.imgur.com/dKxNrH1.png) ## 4- Thẻ Select Thẻ này dùng để tạo ra tùy chọn dạng xổ xuống. > **Title**: Tiêu đề của ô sellect > > **Control Name:** Tên biến dùng để lưu thông tin khách hàng đã chọn > > **Options**: Các tùy chọn tạo sẵn cho khách hàng > > **Default Value**: Giá trị mặc định được chọn sẵn cho khách hàng > > **Required**: Có yêu cầu bắt buộc phải chọn hay không > > **Required Note**: Thông báo nếu khách hàng để trống (không chọn dữ liệu) ![Select Card](https://i.imgur.com/HTs8bzi.png) Lưu ý cách nhập dữ liệu ở phần Options, có 2 giá trị là Value và Name > Nếu như các bạn nhập ở đây là mình **Value** thôi thì giá trị này sẽ được hiển thị đồng thời được set vào giá trị cho biến > > Nếu như các bạn nhập ở đây là **Value | Name** thì **Name** sẽ dùng để hiển thị trên webview, còn **Value** sẽ được dùng để set giá trị cho biến. ![](https://i.imgur.com/8YQ1ruP.png) ## 5- Thẻ checkbox Thẻ checkbox dùng để lấy ý kiến lựa chọn của khách hàng(có hoặc không). > **Text**: Nội dung hiển thị của thẻ. > > **Control Name**: Tên biến dùng để lưu thông tin khách hàng đã chọn. > > **Required:** Chọn Yes để bắt buộc khách hàng điền thông tin, No để không bắt buộc. > > **Required Note:** Thông báo nếu khách hàng để trống dữ liệu (không nhập dữ liệu) ![Checkbox Card](https://i.imgur.com/Bf5nESa.png) Lưu Ý: Cách nhập dữ liệu ở phần Text, có 2 giá trị là Value và Text (Value |Text) > **Text**: Giá trị hiển thị lên trên form. > > **Value**: Giá trị được lưu vào **Control Name** khi khách hàng lựa chọn. Trong trường hợp không cài đặt **Value** thì **Control Name** sẽ lưu giá trị là **Text** được cài đặt. ![Checkbox Card](https://i.imgur.com/BjwRjnG.png) ## 6- Thẻ Radio > **Control Name**: Tên biến dùng để lưu thông tin khách hàng đã chọn > > **Options**: Các tùy chọn cho khách hàng. > > **Default Value**: Giá trị mặc định được chọn sẵn cho khách hàng > > **Required:** Chọn Yes để bắt buộc khách hàng điền thông tin, No để không bắt buộc. > > **Required Note:** Thông báo nếu khách hàng để trống dữ liệu (không nhập dữ liệu) ![Radio Card](https://i.imgur.com/3IF8ubA.png) ## 7- Thẻ Date Thẻ Date dùng cho khách hàng lựa chọn thời gian(Ngày, Tháng, Năm). > **Title**: Tiêu đề của thẻ > > **Control Name:** Tên biến dùng để lưu ngày tháng khách hàng đã nhập > > **Date Format**: Định dạng ngày tháng (Bạnc có thể cấu hình định dạng ngày tháng mong muốn vd: dd/mm/yyyy) > > **Placeholder**: Ghi chú hiển thị mờ phía dưới ô. > > **Required:** Chọn Yes để bắt buộc khách hàng điền thông tin, No để không bắt buộc. > > **Required Note:** Thông báo nếu khách hàng để trống dữ liệu (không nhập dữ liệu) ![Date Card](https://i.imgur.com/3YIbHtH.png) ## 8- Thẻ Time Thẻ Time sử dụng để khách hàng điền thông tin thời gian (giờ:phút) > **Title**: Tiêu đề của thẻ. > > **Control Name:** Tên biến dùng để lưu thông tin khách hàng đã nhập. > > **Placeholder**: Ghi chú hiển thị mờ phía dưới ô. > > **Required:** Chọn Yes để bắt buộc khách hàng điền thông tin, No để không bắt buộc. > > **Required Note:** Thông báo nếu khách hàng để trống dữ liệu (không nhập dữ liệu) ![Time Card](https://i.imgur.com/7KONOUZ.png) ## 9- Thẻ Location Thẻ Location giúp bạn tạo trường địa giới hành chính cho khách hàng lựa chọn giúp lấy thông tin địa chỉ của khách hàng. Hiển tại thẻ chỉ hỗ trợ địa giới tại Việt Nam. > **Location**: Chọn quốc gia (hiện tại đang chỉ hỗ trợ VN nếu bạn cần quốc gia khác có thể gửi dữ liệu địa giới bên mình sẽ update) > > **Level**: Bạn cần sử dụng tới cấp độ nào Tỉnh - Tỉnh Huyện - Tỉnh Huyện Xã > > **Province Title**: Tiêu đề của ô nhập tỉnh/tp > > **District Title**: Tiêu đề của ô nhập huyện/quận > > **Ward Title**: Tiêu đề của ô nhập phường/xã > > **Control Name**: Biến lưu Tỉnh Huyện Xã tương ứng. > > **Required:** Chọn Yes để bắt buộc khách hàng điền thông tin, No để không bắt buộc. > > **Required Note:** Thông báo nếu khách hàng để trống dữ liệu (không nhập dữ liệu) ![](https://i.imgur.com/MzcwclA.png) ## 10- Thẻ Form Submit Thẻ Form Submit dùng để submit và gửi thông tin của form đến nền tảng khác được kết nối trong Push data. > **Reset Name**: Tên nút reset (Nút bấm này có chức năng xóa hết dữ liệu đã nhập) > > **Submit Name**: Tên nút submit (Nút này có chắc năng gửi các thông tin khách hàng đã nhập trên form) ![Form](https://i.imgur.com/bgV44a4.png) # Form config Đây là khu vực cấu hình chung cho form > **Form Name**: Tên của form > > **Form** **Color**: Màu của form > > **Cache Form**: Bạn có muốn lưu trữ lại thông tin nếu khách hàng mở lại form lần sau. > > * Don't cache: Không lưu dữ liệu > * Cache before and after submit: Lư dữ liệu trước và sau khi submit form > * Cache and reset after submit: Lưu dữ liệu và xóa sau khi submit form. When submit done: Gọi các sự kiện khi khách hàng ấn vào nút gửi thông tin (submit) > **JavaScript**: Cài đặt mã nhúng vào form (Sử dụng cho nhà phát triển sâu) > > **Show Notification**: Hiển thị thông báo (VD: đã thành công) > > **Close Messenger Webview**: Tính năng này khi bạn sử dụng form trong chatbot khi khách hàng ấn gửi thông tin thì form (popup) sẽ tự động đóng lại. > > **Redirect to URL**: Chuyển tiếp tới 1 website khác sau khi khách hàng ấn gửi thông tin (ko sài đc trên messenger bot) ![Form Config](https://i.imgur.com/0D9xK3P.png) # Proshop 1.0 Đây là giao diện cấu hình của webview **Proshop** bao gồm 3 phần cơ bản. > 1. Các menu chức năng chính > 2. Khu vực cấu hình tương ứng với các menu. > 3. Giao diện **Preview** khi cấu hình **Proshop** ![](https://i.imgur.com/xiQGQGM.png) # Shop Config Giao diện menu **Shop Config** > **Page name**: tên của shop > > **Color**: màu của shop > > **Logo**: logo của shop > > **Footer**: nội dung phía cuối trang của shop (VD copyright by botplus.io) hoặc có thể chuyên sâu hơn tạo các link dẫn tới các trang ![Shop Config](https://i.imgur.com/SGd0FB2.png) > **Home screen**: Cấu hình hiển thị trang chủ của shop > > * All Products: hiển thị toàn bộ sản phẩm ra ngoài trang chủ > * Catalogies Only: chỉ hiển thị danh mục sản phẩm ra ngoài trang chủ. > * Tab Catatalogies - All Products: Hiển thị danh mục sản phẩm phía trên dạng tab và tất cả sản phẩm phía dưới. > * List Catalogies - All Products: Hiển thị dang mục sản phẩm phái trên và tất cả sản phẩm phía dưới (khách với dạng Tab ở trên đó là khi vào 1 danh mục thì các danh mục sẽ biến mất) > * List Catalogies - Root Products: Hển thị danh mục sản phẩm phía trên và các sản phẩm không thuộc danh mục nào phía dưới. ![](https://i.imgur.com/R8DXUc2.png) > **When click "Order"**: Cấu hình trạng thái sau khi khách hàng Order xong. > > * Go to FORM: Chuyển tiếp tới form đăng ký thông tin sau khi Order. > * Trigger Event: Chạy 1 trigger được cài đặt sau khi khách Order. ![](https://i.imgur.com/CvKpJb4.png) 3 sự kiện của Trigger Event: > **JavaScript:** Chạy đoạn mã được nhúng vào Proshop. > > **Show Notification**: hiển thị thông báo (VD order đã thành công) > > **Close Messenger Webview**: Đóng cửa sổ webview (nếu bạn nhúng vào chatbot và ko muốn khách nhập form thông tin thì nên chọn cái này) > > **Redirect to URL**: chuyển tiếp sang 1 đường dẫn khác. ![](https://i.imgur.com/eZVuZs8.png) **Localization**: Cấu hình ngôn ngữ cho shop > **Products**: Tên sản phẩm (VD: Món, Chiếc, Sản phẩm...) > > **Currency**: tiền tệ (VD $, €, vnđ....) và After là vị trí hiển thị của tiền tệ trước hay sau số tiền (VD: $15 hoặc 15$) > > **Cart**: giỏ hàng > > **Order**: đặt hàng ![](https://i.imgur.com/K7shrhi.png) # Danh mục & sản phẩm Để thêm danh mục sản phẩm bạn vui lòng chọn vào Product catalogies (1) và Create New Catalogies (2) để tạo. Có 3 phần của 1 danh mục: > 1: Tên danh mục > > 2: Hình ảnh danh mục (nên chọn các ảnh nhẹ để tốc độ load trang sẽ là nhanh nhất) > > 3: Ghi chú danh mục (VD: đây là các món ăn cực mát) ![](https://i.imgur.com/1SqA4y1.png) Để thêm sản phẩm bạn vui lòng chọn vào List Products (1) và Creat new Product (3). Ở đây bạn cũng có thể lọc sản phẩm mình đã thêm theo danh mục sản phẩm (2) ![](https://i.imgur.com/eEZB47T.png) Màn hình thêm một sản phẩm mới: > **Product Name**: Tên sản phẩm > > **Rating**: đánh giá về sản phẩm (1 sao, 2 sao... 5 sao ) > > **Catalogies**: danh mục sản phẩm (có thể chọn nhiều) > > **Cover Image**: ảnh bìa sản phẩm > > **Other image**: thêm ảnh khác ![](https://i.imgur.com/5gXiDq7.png) # Table Ranking Để tạo 1 **Table Ranking** bạn làm theo các bước như sau: 1. Chọn **Webview** 2. Chọn **Types** 3. Ở phần **Table Ranking,** bạn chọn tiếp Active để tạo 1 **Table Ranking** ![](https://i.imgur.com/fysBMva.png) # Table Ranking Config Phần này bạn sẽ cấu hình cho **Table Ranking** > **Title:** Tên của bảng xếp hạng > > **Logo:** Logo của bảng xếp hạng. Bạn có thể để Logo thương hiệu của mình. > > **Style Color:** Màu của bảng > > **Total User Visiable:** Số người được hiển thị trên 1 bảng xếp hạng > > **Total 1 Page**: Số người hiển thị trên 1 trang của bảng xếp hạng ### **Score Config** **Score Config:** là thông tin truyền điểm cho bảng xếp hạng > **Name:** Tên điểm được tính. VD: điểm, lượt share, lượt tag,.... > > **Key:** Attribute truyền điểm lên > > **IMG:** Ảnh của điểm (Nếu có giá trị **IMG** thì sẽ thay thế cho giá trị của **Name)** > > **Sort:** Sắp xếp theo lựa chọn (Mặc định từ cao xuống thấp) ### **Medal Config** **Medal Config** là phần thông tin cho số thứ tự của Bảng xếp hạng > **Name:** Tên của danh hiệu > > **IMG:** Hình ảnh của danh hiệu (VD: Huy chương vàng cho vị trí thứ nhất, huy chương bạc cho vị trí thứ 2,.....) > > * Phần này sẽ sắp xếp theo tứ tự từ đầu và bắt đầu từ trang thứ nhất ![Table Ranking](https://i.imgur.com/ylOuL0J.png) Sau khi đã điền hết thông tin của Bảng xếp hạng, bạn chọn **Update** để bảng xếp hạng được cập nhật nhé! # Connection Để kết nối với nền tảng chatbot, bạn cần chú ý đến những điều sau > 1. **Secret:** Mã bảo mật. Bạn có thể điền bất kỳ text gì vào phần này > 2. Bạn chọn nền tảng chatbot mà bạn muốn connect ở đây > 3. Sau khi điền mã **Secret** và chọn **Update** thì hệ thống sẽ tạo ra 1 đoạn mã Json để giúp kết nối đến Smaxbot ![Connection](https://i.imgur.com/8nKt7hA.png) ### **TEST** **B1:** Ở bên Smax.bot bạn tạo 1 block bao gồm các thẻ: **Set attribute, Json API, Text.** ![](/files/-MSb-Hl4Dtik1dTpAexy) **B2:** Nhập nội dung cho các thẻ * **Set attribute:** Ở thẻ này bạn tạo 1 biến với giá trị là 1 số để có thể truyền điểm ![](/files/-MSb1KfoYJ6b8m6w_Vhz) * **Json API:** > 1: Các bạn chọn giao thức là "Post" > > 2: Phần này các bạn quay lại phần **Connection** (phía trên) ấn vào nút Copy màu xanh lá cây và dán vào. > > 3: Chọn tab Json > > 4: Quay lại phần **Connection** copy đoạn json mà hệ thống tự sinh ra dán vào. ![](/files/-MSb1iG-2_YmCwh4LRM1) * **Text:** Sau khi điền đoạn text thì bạn chọn thêm 1 button ![](/files/-MSb40cYv1GLE1YcXHPY) > 1. Bạn điền tên cho button đó > 2. Chọn URL. Bạn copy đoạn url ở phần **Connection** (không bao gồm mã **Secret**) và chèn thêm ?userId={{messenger user id}} (phần này giúp hiện thứ tự của người xem trên bảng xếp hạng) > 3. Sau đó bạn chọn PopUp > 4. Ở phần khung dưới bạn chọn add domain vào whitelist nhé! ![](/files/-MSb4UnzewpNsngHB1Lf) **B3:** Bạn test xem bot chạy có mượt không nhé! ![](/files/-MSb7NNGB_14zQOO827K) ![](/files/-MSb7HDmypiJmjITYEqM) # Loyalty # Share Facebook # Tính Năng Mở Rộng # Fomo Để sử dụng tính năng fomo trên webview của botplus, bạn truy cập vào 1 webview (có hỗ trợ Fomo) và click vào menu Fomo như hình dưới. Ở phần 3 các bạn lần lượt điền các thông điệp mà bạn muốn fomo (lưu ý bạn cần phải bật button ![](https://bot.vn/uploads/hoc-chatbot/2021_10/image_46.png) lên nhé. ![](https://i.imgur.com/kk4mPwA.png) Chỉ cần như vậy bạn đã thấy Fomo đã hiển thị ở góc dưới của webview rồi. ![](https://i.imgur.com/7Er7WK2.png) Để thêm được dữ liệu hàng loạt từ file excel bạn click vào button "Export file excel" để tải file mẫu về ![](https://i.imgur.com/RdictYU.png) Điền thêm nội dung vào file excel mẫu ![](https://i.imgur.com/3diXQ0m.png) Sau đó chọn "Inmport from Excel" để nhập dữ liệu từ file excel lên hệ thống ![](https://i.imgur.com/0SoDQdg.png) Để cấu hình cho cơ chế hiển thị fomo các bạn có thể truy cập vào icon Setting > **Start After:** Fomo sẽ xuất hiện sau bao lâu từ khi khách hàng vào webview\ > **Display:** mỗi nội dung Fomo sẽ hiển thị trong bao lâu\ > **Delay:** Sau bao lâu sẽ hiển thị nội dung tiếp theo (hệ thống sẽ random trong khoảng bạn đã chọn để tạo cảm giác thật hơn.\ > **Order:** Bạn muốn nội dung hiển thị theo tứ tự đã nhập (từ trên xuống) hay là ngẫu nhiên\ > **Position:** Vị trí Fomo hiển thị trong webview ![](https://i.imgur.com/V8lq0qF.png) # Seo Phần này sẽ giúp cho các bạn khi chia sẻ webview của mình lên messenger, zalo... hoặc hiển thị trên kết quả tìm kiếm của google sẽ có 1 kết quả đẹp hơn.\ Đây là hình ảnh thumb mình chia sẻ link của botplus webview qua messenger. (rất không đẹp và nội dung giống spam) ![](https://i.imgur.com/8FtmSdv.png) Bây giờ để chỉnh sửa nội dung cho thân thiện mình sẽ truy cập vào Menu ![](https://i.imgur.com/8K0EnEo.png) Điền các nội dung mà mình muốn hiển thị ![](https://i.imgur.com/bKjBKFQ.png) Tuy nhiên lúc này để các nền tảng hỗ trợ lại link mới thì mình cần phải vào các trình debug link (nếu không hệ thống vẫn chưa nhận dạng nội dung mới) > Với facebook và messegner bạn truy cập vào link: \ > Với Zalo bạn truy cập vào link: Hoặc bạn có thể vào google gõ: "Tên nền tảng debug link" VD (facebook debug link, Zalo Debug link) Lúc này bạn sẽ dán link mà bạn muốn làm mới lại nội dung thumb (ở đây bạn đang sử dụng botplus.io webview vì vậy bạn cần vào menu URL Address để copy link cần làm mới. ![](https://i.imgur.com/L4LnXAz.png) Sau đó bạn dán link vào mục (1) và click vào mục (2) để xem thumb hiện tại, bạn click vào mục (3) để hệ thống cập nhật lại thông tin mới. ![](https://i.imgur.com/n8Wuvav.png) Bạn thấy đấy nội dung bây giờ đã đẹp hơn nhiều rồi ![](https://i.imgur.com/JyQW8Pf.png) # Tracking # Javascript - CSS # Tích Hợp Chatbot # API # Google Sheet **Bước 1:** Để lưu dữ liệu của form vào google sheet bạn chọn menu **Push data** và chọn **Google Sheet** ở nút bấn **Create New Platform** ![](/files/-MF5S68lWXcNXaJZ3jjq) **Bước 2:** Nhập tên của kết nối sau đó ấn vào nút Sign in with Google để kết nối với tài khoản google của bạn. (lưu ý phải nhập tên trước mới ấn kết nối được) ![](/files/-MF5TE87DHcJ3SlckprB) **Bước 3**: Sau đó sẽ hiện ra 1 cửa sổ, bạn chọn email mà mình muốn kết nối, và ấn vào cho phép ![](/files/-MF5TwmWajJK4VeDGPr-) ![](/files/-MF5UmYQ1cQfiPlTJOcp) **Bước 4:** Bạn truy cập vào đường dẫn để vào trang quản lý google sheet. Bạn click vào avatar góc phải trên cùng màn hình xem có đúng là email mà mình đã phân quyền ở bước trên không (cái này rất nhiều bạn hay bị lỗi) ![](/files/-MF5VI77hqWp_BLvSC-x) OK nếu đúng rồi thì bạn tạo 1 bảng tính mới để lưu dữ liệu ![](/files/-MF5VR0uM-j_GEExCowa) **Bước 5:** Nhập tên form (VD: thông tin user) và tạo ra 2 cột dữ liệu là Họ và Tên, Số Điện Thoại (cái này tùy vào dữ liệu và cách đặt tên của bạn. Sau đó bạn copy cái link ở ô số (1) ***Lưu ý:** Không được để trống cột A nếu để trống thì dữ liệu mới về sẽ bị đè lên dữ liệu cũ.* ![](/files/-MF5YA-76bG7EcrshK_w) **Bước 6:** Dán link vừa copy ở bước 5 vào ô số 1, hệ thống sẽ kết nối với file sheet và hiển thị tên của file sheet ở ô số 1 luôn. (nếu ko đc vui lòng check lại bước 5) Chọn tab Trang tính ở ô số 2. Sau đó chọn vào Add Feild ở ô số 3. ![](/files/-MF5ZqcXCP-_K0D9Q2Uh) **Bước 7:** ở ô số 1 bạn chọn các cột Excel tương ứng trong bảng mới tạo. Còn ô số 2 thì chọn trường dữ liệu tương ứng trong form mà bạn đã xây dựng trên botplus.io Nhớ tích vào ô Active và chọn Submit để lưu cấu hình. ![](/files/-MF5_Qvwdx4G-V9xsSMH) **Bước 8:** Giao diện hiển thị như bên dưới là đã thành công. Việc còn lại là bạn nhập thử dữ liệu vào ô bên phải và ấn Submit xem dữ liệu đã đẩy sang Google Sheet ok chưa. ![](/files/-MF5atyZdeteLuwunpMO) # SmaxBot **Bước 1:** Ở Smaxbot bạn tạo ra 2 block: > **Shop Demo:** Block dùng để chứa button bật lên webview cho khách hàng trên messenger. Ở đây mình đang test trên Webview là Proshop nên mình đặt tên là Shop Demo các bạn cũng có thể đặt tên tùy theo ý thích. > > **Confirm Info:** Block này dùng để xác nhận lại thông tin sau khi khách hàng hoàn thành thông tin trên webview. ![Block Shop Demo](/files/-MF_7qd3ErGZALvc1xqz) ![Block Confirm Info](/files/-MF_DJ8gF0aCxhpSEyeE) **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 **SmaxBot** ở menu xổ xuống. ![](/files/-MF5bZ6tgd8zRgJ5ESqZ) **Bước 3:** Đây là phần cấu hình kết nối của Webview với SmaxBot > **Name**: Tên của kết nối (nên đặt có từ Smaxbot để dễ nhớ) > > **BotID**: ID của bot bạn tạo bên Smaxbot > > **Bot Token**: Token của bot bạn tạo bên Smaxbot > > **Block ID**: ID của block 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 ID, Bot Token, Block ID** bạn vui lòng xem bước tiếp theo* ![](/files/-MF_21OgMqxNo6WcQnY1) **Bước 4:** Để copy Block ID bạn copy phần số như hình 1 (phía sau ký tự ?id=) Sau đó bạn tắt Block Confirm Info đi và click vào số 2 để copy Bot ID, số 3 để copy Bot Token Copy xong bạn quay lại bước 3 để điền thông tin vào form cấu hình. ![](/files/-MF_ElZFTGyebYjQRMNd) **Bước 5:** Cấu hình truyền dữ liệu trên botplus.io Ở 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 SmaxBot ![](/files/-MF__dqOL8tyKGuNe_Dp) 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 form. Và các trường mặc định VD: Money Total, Products của phần Shop. ![](/files/-MF_adKtcdF9-uLpYpiV) 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. ![](/files/-MF_b37glMVhDtzntHop) **Bước 6:** Khai báo thông tin cho block **Confirm Info** Nhập các tên Attribute Name bạn đã nhập ở bước 5 vào mục confirm Data ![](/files/-MF_cO7PwUUH8vmGqB1n) **Lưu ý:** đối với số tiền bạn có thể thêm hàm \[=SEPRATOR(*{{tongtien}}*)] thay vì *{{tongtien}}* thì số tiền sẽ hiển thị 1,000,000 thay vì 1000000 ![](/files/-MF_deINGpTs6vfZN41k) **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 để cho đẹp 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 Smaxbot** (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) ![](/files/-MF_ezr8voWhKBRP-6S0) **Bước 8:** Kết nối link của shop vào button. Ở block của Shop demo bạn chọn **Add new button** (có thể sử dụng thẻ Gallerr hoặc thẻ Media cũng được) ![](/files/-MF_e-Es-326tYAjGu4L) Bạn nhập tên button (VD: Shopping) sau đó chọn tab **URL** và dán đường dẫn copy **ở bước 7** vào. Click chuột ra ngoài bạn sẽ thấy 1 dòng là ***Add *** into..... Bạn click vào mục đích để add domain vào with list để webview có thể bật được dạng popup ở messenger. ![](/files/-MF_gQ1WGX3PgNoCluLZ) **Bước 9:** Test thử Tạo ra ref link để test thử xem bot hoạt động OK không (xem cách tạo reflink [ở đây](https://bot.vn/hoc-chatbot/tips-chatbot/huong-dan-tao-reflink-cho-block-32.html) ) ![](/files/-MF_iHxISv1KPGNZ3voH) Messenger sẽ hiển thị tin nhắn và button để mở webview ![](/files/-MF_ib59W4oifrMRjanC) Bạn mở webview ra và mua thử những thứ mình thích ![](/files/-MF_is96R6AhaPk0t3LY) Tiếp đến bạn điền đầy đủ thông tin vào mục Order ![](/files/-MF_j7n8F2i20D-MYvUn) Bot sẽ xác nhận lại thông tin bạn vừa đặt hàng: ![](/files/-MF_jGCC6R0RITfVVwyv) # Chatfuel ***đang cập nhật.....*** # Silferbots **Bước 1:** Ở **Silferbots** bạn tạo ra 2 flow: > **Moi xem menu:** Flow dùng để chứa button bật lên webview cho khách hàng trên messenger. Ở đây mình đang test trên Webview là Proshop nên mình đặt tên là Moi xem menu các bạn cũng có thể đặt tên tùy theo ý thích. > > **TTKH:** Flow này dùng để xác nhận lại thông tin sau khi khách hàng hoàn thành thông tin trên webview. ![Flow chứa button trỏ về webview](/files/-MQui9zoIALenJCTAUpy) ![Flow xác nhận thông tin khách hàng](/files/-MQuj7Mn7YG6v7h0KetX) **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 **Silferbots** ở menu xổ xuống. ![](/files/-MQukRw35c0HkHJPs_i4) **Bước 3:** Đây là phần cấu hình kết nối của Webview với Silferbots > **Name**: Tên của kết nối (nên đặt có từ Silferbots để dễ nhớ) > > **Bot Token**: Token của bot bạn tạo bên Silferbots > > **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* ![](/files/-MQulGRgx8pCA0-GF_Ut) **Bước 4:** Để copy Flow ID bạn copy phần số như hình 1 (bắt đầu từ ký tự content...) ![](/files/-MQummukGgrJxuuG7EXd) Sau khi copy xong Flow ID, bạn vào Setting, sau đó vào API và copy đoạn API Token của Silferbots và paste vào phần Bot Token nhé. ![](/files/-MQunNloEr1IcfboHuu-) **Bước 5:** Cấu hình truyền dữ liệu trên botplus.io Ở 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 Silferbots ![](/files/-MF__dqOL8tyKGuNe_Dp) 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 form. Và các trường mặc định VD: Money Total, Products của phần Shop. ![](/files/-MF_adKtcdF9-uLpYpiV) 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. ![](/files/-MQuncZUWANSEDJD1T99) **Bước 6:** Khai báo thông tin cho Flow **TTKH** Nhập các tên Field Name bạn đã nhập ở bước 5 vào mục confirm Data ![](/files/-MQunxOBe0ud6X7fkT8-) **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 để cho đẹp 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 Silferbots** (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) ![](/files/-MQuoVFeOpUwDUQE7gPb) **Bước 8:** Kết nối link của shop vào button. Ở Flow của Moi xem menu bạn chọn **Add button** (có thể sử dụng thẻ Gallerry hoặc thẻ Media cũng được) ![](/files/-MQuorR20d0HFgY7GYUK) 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. ![](/files/-MQupQ0NyHGegUoKXxQV) * 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 thử Sau khi hoàn thiện các bước ở trên bạn chọn publish và ấn preview để test bot nhé. ![](/files/-MQuqBF37EB_VsfHPxPH) Messenger sẽ hiển thị tin nhắn và button để mở webview ![](/files/-MQuqzfBkBUoIc_ASfaI) Bạn mở webview ra và mua thử những thứ mình thích ![](/files/-MQurB0lllmR70dZVk0D) Tiếp đến bạn điền đầy đủ thông tin vào mục Thông tin khách hàng ![](/files/-MQurSFd_lQ2jFO_8LAI) Bot sẽ xác nhận lại thông tin bạn vừa đặt hàng: ![](/files/-MQurb11q_TrUb2X8ZpY) # 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) # Kết nối tên miền riêng Botplus.io cho phép các bạn kết nối tên miền riêng của mình. Đối với việc sử dụng chung tên miền dễ gây ra rủi ro nếu một bên nào đó vi phạm và bị khóa domain thì sẽ ảnh hưởng tới các plugin của bạn và chiến dịch bạn đang chạy. Để cấu hình domain riêng cho webview của mình bạn truy cập vào **Menu URL Address**, chọn **Use Own Domain** và bắt đầu cấu hình thêm tên miền của bạn. ![](https://i.imgur.com/W7FEola.png) Tiếp theo bạn chọn vào mục New Domain để thêm tên miền mới. ![](https://i.imgur.com/RW9pZbL.png) Ở đây phần cấu hình domain mặc định bạn có thể lưu ý mục và cấu hình các thông số sau: > 1: Tên sub domain VD shop.botplus.asia\ > 2: Khu vực chứa webview của bạn (botplus.asia- Châu Á, botplus.de- Đức(Châu Âu), botplus.us- Mỹ)\ > 3: Phần đuôi domain VD: shop.botplus.asia/**datmuaiphone13** Tiếp đến bạn nhập domain của bạn (là domain chính dạng yourdomain.com hoặc subdomain dạng sub.yourdomain.com đều được) Sau đó bạn chọn Location (nơi đặt webview của bạn) Hệ thống sẽ yêu cầu bạn cấu hình CNAME của domain về dns\_sg.botplus.io (lưu ý mỗi location sẽ có 1 DNS khác nhau bạn làm theo ghi chú hiển thị phía dưới là được) Sau đó bạn click vào Submit ![](https://i.imgur.com/W3QjYyh.png) Tiếp theo bạn phải truy cập vào ứng dụng quản lý tên miền của mình và trỏ nó về CNAME bên trên (lưu ý mỗi location sẽ có 1 CNAME) > Nếu các bạn trỏ domain dạng bot.vn (hoặc hehe.com) thì chỗ Name sẽ điền là bot.vn > > Còn trỏ dạng sub test.bot.vn thì bạn chỉ cần ghi là test Ở đây mình sẽ trỏ CNAME cho domain test2.bot.vn (bạn nào không biết trỏ có thể nhờ bên cung cấp domain hỗ trợ nhé) ![](https://i.imgur.com/7Xa3txk.png) Sau đó bạn đợi tầm 5-10 phút tùy hệ thống DNS, mấy cái ở VN thì hơi lâu. Rồi chọn vào button **Verify.**\ Nếu hệ thống chưa xác thực và cần thêm thời gian thì sẽ hiển thị là **Pending**, việc của bạn là phải chờ đợi. ![](https://i.imgur.com/589XK4K.png) Hệ thống nếu đang check sẽ hiên thị là Pending còn nếu OK rồi thì sẽ hiển thị dấu tích. Sẽ có những trường hợp không thành công thì sẽ trở về trạng tháy Verify và lúc nào b cần kiểm tra lại CNAME của mình đã trỏ đúng chưa? ![](/files/-MN1X2kUnVE6qIrgI2lF) Như vậy là bạn có thể sử dụng được domain của mình rồi. Chỗ path... nếu bạn muốn sử dụng dạng thì bạn điền là shop còn nếu chỉ muốn sài dạng thì bỏ qua. ![](/files/-MN1Xh6K6bAhS1ULvTQK) Như vậy chúng ta đã thực hiện cấu hình thành công domain riêng cho webview của mình. # Tạo Custom Image Custom Image là 1 plugin trên botplus.io giúp bạn tạo hình ảnh voucher, vé sự kiện, thẻ thanh viên cá nhân hóa cho khách hàng. Để tạo 1 custom IMG bạn chọn vào menu **CUSTOM IMAGE** sau đó chọn **Template** Lựa chọn template mình thích và chọn **Active** hoặc **Preview** để xem qua giao diện. ![](/files/WLLLeeskoFlDul5G8nuA) ### Giao diện của một màn hình trang Custom IMG bao gồm 4 phần chính. > 1: Dùng để quản lý các Layer (Ảnh, Chữ, QRcode, Barcode) > > 2: Dùng để cấu hình cho từng Layer chi tiết. > > 3: Dùng để Preview giao diện khi cấu hình. > > 4: Dùng để cấu hình kết nối với các ứng dụng khác (VD: Chatbot...) ![Custom Image](/files/twyEVxKidr4MluukuCbp) # Cấu hình các Layer ## 1- Text Layer Text layer là thẻ nội dung, các bạn có thể nhập text hoặc thuộc tính của khách hàng > VD: Xin chào {{full name}}, chúc bạn 1 ngày tốt lành. > > VD: {{sodienthoai}} ![](https://i.imgur.com/UQPWhma.png) Các bạn có thể cấu hình font chữ, và size, màu sắc của chữ. Phần left và top là tọa độ của vị trí layer khi các bạn kéo thả layer trên màn thiết kế. ![](https://i.imgur.com/Y7lQLGq.png) Các bạn cũng có thể cấu hình vị trí của nội dung, lưu ý để vị trí có tác dụng bạn phải cấu hình "Khung" của nội dung ở mục Width và Height, để nội dung sẽ căn ở trong cái khung này. ## 2- Image Layer Image Layer giúp bạn có update ảnh vào file thiết kế, botplus cho phép bạn up ảnh trực tiếp từ máy tính. ![Image Layer](https://i.imgur.com/L0GTqry.png) Bạn có thể tùy chỉnh Style của ảnh là thường hay hình tròn. có thể tạo border (viền) và border color cho ảnh. ![Style Image](https://i.imgur.com/Kpf7S3d.png) Trường hợp ảnh là 1 biến (VD các bạn truyền lên avatar của user) Ở phần value (1) bạn sẽ nhập tên biến (attribute) mà hệ thống chatbot sẽ truyền lên (lưu ý ở các nền tảng chatbot khác nhau các tên biến này có thể khác nhau) Phần Holder Value (2) là chỗ bạn update 1 ảnh "giả" lên, dùng để hình dung khi ảnh thật hiển thị nó sẽ như thế nào. Phần (3) chính là vị trí sau này ảnh thật sẽ hiển thị. ![](https://i.imgur.com/kckDA3M.png) ## 3- QRcode Layer QR code Layer: Giúp bạn tạo ra 1 qr code, bạn có thể khai báo value là 1 giá trị cụ thể (ABCXXX) ![](https://i.imgur.com/ibHyW22.png) Hoặc 1 biến được truyền lên VD {{MaKhachHang}} ![](https://i.imgur.com/k8fXs15.png) ## 4- Barcode Layer Barcode Layer giúp bạn tạo ra 1 barcode (mã vạch), bạn có thể khai báo value là 1 giá trị cụ thể (ABCXXX) ![](https://i.imgur.com/QhdhpBw.png) Hoặc 1 biến được truyền lên VD {{MaKhachHang}} ![](https://i.imgur.com/gT8wlUw.png) # Tích Hợp Chatbot **Bước 1:** Để có thể tích hợp với Smaxbot, các bạn chọn vào connect ![](https://i.imgur.com/ALP3oYk.png) **Bước 2** Đây là trang dùng để cấu hình kết nối: > 1: Các bạn nhập vào 1 đoạn text bất kỳ dùng làm mã bảo mật. > > 2: Chọn nền tảng kết nối là Smax.bot > > 3: Nhập tên attribute mà ảnh sau khi tạo ra sẽ gán link vào attribute này > > 4: Dựa vào các biến (attribute) mà các bạn đã nhập ở mục layer hệ thống sẽ tự động tạo ra 1 đoạn json nhỏ. ![](/files/-MEawcqWGmYAxtDx75Sw) **Bước 3:** Trên Smaxbot bạn có thể tạo ra 2 block. 1 block là Test Voucher và 1 block là Export Voucher (các bạn có thể đặt tên theo ý của mình) ![](/files/-MEauVIt1M99QIxFxb1K) **Bước 4:** Nhập nội dung của block Test Voucher và tạo ra 1 button dẫn sang block Export Voucher ![](/files/-MEauPIVvsI6opGYGTK6) **Bước 5:** Ở block Export Voucher các bạn tạo ra 2 thẻ: 1 là Json API và 2 là Thẻ IMG (hoặc có thể là gallery) > 1: Các bạn chọn giao thức là "Post" > > 2: Phần này các bạn quay lại **Bước 2** (phía trên) ấn vào nút Copy màu xanh lá cây và dán vào. > > 3: Chọn tab Json > > 4: Quay lại **Bước 2** copy đoạn json mà hệ thống tự sinh ra dán vào. > > 5: Quay lại bước 2 copy attribute Name đã khai báo dán vào. (lưu ý ở đây phải thêm dấu {{linkIMG}} ![](/files/-MEay95hiOLuKySyAMHm) **Bước 6:** Test xem bot chạy có mượt không (lưu ý thời gian xuất ảnh sẽ hơi lâu nên các bạn có thể bổ sung thêm thẻ typing ở giữa thẻ Json và thẻ IMG để khách khỏi sốt ruột. ![](/files/-MEazbRNIy15W3EcOGI_) # Smaxbot **Bước 1:** Để có thể tích hợp với Smaxbot, các bạn chọn vào connect. ![](https://gblobscdn.gitbook.com/assets%2F-MEaaUrhLPMFKdZZnpZc%2F-MEas8sdgUnr_lUyBhBZ%2F-MEav-ZWWLI58dWMtl_-%2Fimage.png?alt=media\&token=e4260fcf-b14b-4fc7-a613-36a20367d106) ​‌ **Bước 2:** Đây là trang dùng để cấu hình kết nối > 1: Các bạn nhập vào 1 đoạn text bất kỳ dùng làm mã bảo mật. > > 2: Chọn nền tảng kết nối là Smax.bot > > 3: Nhập tên attribute mà ảnh sau khi tạo ra sẽ gán link vào attribute này vào bot > > 4: Dựa vào các biến (attribute) mà các bạn đã nhập ở mục layer hệ thống sẽ tự động tạo ra 1 đoạn json nhỏ. ​‌ ![](https://gblobscdn.gitbook.com/assets%2F-MEaaUrhLPMFKdZZnpZc%2F-MEas8sdgUnr_lUyBhBZ%2F-MEawcqWGmYAxtDx75Sw%2Fimage.png?alt=media\&token=759f6404-9874-4598-bc28-724fa9cfec5a) **Bước 3:** Trên Smaxbot bạn có thể tạo ra 2 block. 1 block là Test Voucher và 1 block là Export Voucher (các bạn có thể đặt tên theo ý của mình)‌ ![](https://gblobscdn.gitbook.com/assets%2F-MEaaUrhLPMFKdZZnpZc%2F-MEas8sdgUnr_lUyBhBZ%2F-MEauVIt1M99QIxFxb1K%2Fimage.png?alt=media\&token=52b7a9fc-acbf-4f77-afeb-a35c87668baa) **Bước 4:** Nhập nội dung của block Test Voucher và tạo ra 1 button dẫn sang block Export Voucher‌ ![](https://gblobscdn.gitbook.com/assets%2F-MEaaUrhLPMFKdZZnpZc%2F-MEas8sdgUnr_lUyBhBZ%2F-MEauPIVvsI6opGYGTK6%2Fimage.png?alt=media\&token=1406edb2-6e18-4fcc-965f-269932715057) **Bước 5:** Ở block Export Voucher các bạn tạo ra 2 thẻ: 1 là Json API và 2 là Thẻ IMG (hoặc có thể là gallery) > 1: Các bạn chọn giao thức là "Post" > > 2: Phần này các bạn quay lại **Bước 2** (phía trên) ấn vào nút Copy màu xanh lá cây và dán vào. > > 3: Chọn tab Json > > 4: Quay lại **Bước 2** copy đoạn json mà hệ thống tự sinh ra dán vào. > > 5: Quay lại bước 2 copy attribute Name đã khai báo dán vào. (lưu ý ở đây phải thêm dấu {{linkIMG}} ‌ ![](https://gblobscdn.gitbook.com/assets%2F-MEaaUrhLPMFKdZZnpZc%2F-MEas8sdgUnr_lUyBhBZ%2F-MEay95hiOLuKySyAMHm%2Fimage.png?alt=media\&token=d60a0164-bbae-4953-aefa-8a5639249be9) **Bước 6:** Bạn test xem bot chạy có mượt không (lưu ý thời gian xuất ảnh sẽ hơi lâu nên các bạn có thể bổ sung thêm thẻ typing ở giữa thẻ Json và thẻ IMG để khách khỏi sốt ruột ). ![](https://gblobscdn.gitbook.com/assets%2F-MEaaUrhLPMFKdZZnpZc%2F-MEas8sdgUnr_lUyBhBZ%2F-MEazbRNIy15W3EcOGI_%2Fimage.png?alt=media\&token=6da711ae-6d9a-4474-898a-789fc555461b) # Chatfuel **Bước 1:** Để có thể tích hợp với Chatfuel, các bạn chọn vào connect ![](https://gblobscdn.gitbook.com/assets%2F-MEaaUrhLPMFKdZZnpZc%2F-MEas8sdgUnr_lUyBhBZ%2F-MEav-ZWWLI58dWMtl_-%2Fimage.png?alt=media\&token=e4260fcf-b14b-4fc7-a613-36a20367d106) ​‌ **Bước 2** Đây là trang dùng để cấu hình kết nối: > 1: Các bạn nhập vào 1 đoạn text bất kỳ dùng làm mã bảo mật. > > 2: Chọn nền tảng kết nối là Chatfuel > > 3: Nhập tên attribute mà ảnh sau khi tạo ra sẽ gán link vào attribute này vào bot (ko cần điền cũng được) > > 4: Dựa vào các biến (attribute) mà các bạn đã nhập ở mục layer hệ thống sẽ tự động tạo ra 1 đoạn json nhỏ. > > 5: Lựa chọn actieon là send Image để khi bot gọi API thì sẽ gửi cho user 1 cái ảnh. ![](/files/-MEvh7H0HJbJZhK0U7oI) **Bước 3:** Ở chatfuel tạo ra 1 block và các thẻ tính năng (chủ yếu quan trọng nhất là thẻ API còn 2 thẻ Text kia thì để hiển thị nội dung thôi) ![](/files/-MEviybKguvh9n-N2kry) **Bước 4:** Cấu hình thẻ Json > 1: Chọn là POST > > 2: Sau khi điền xong mã Secret ở Bước 2 phía trên, ấn vào nút copy màu xanh lá cây và dán vào. > > 3: Chọn JSON > > 4: Copy ô số 4 ở Bước 2 phía trên và dán vào. ![](/files/-MEviSGwnsrLTZVnHqr6) Bước 5: Ok rồi giờ thì bạn test xem bot chạy có mượt không (lưu ý thời gian xuất ảnh sẽ hơi lâu nên các bạn có thể bổ sung thêm thẻ typing ở giữa thẻ Json và thẻ IMG để khách khỏi sốt ruột. ) ![](/files/-MEvkJ9kp4ycjUO_QU1f) # Silferbots **Bước 1:** Để có thể tích hợp với Silferbots, các bạn chọn vào connect ![](/files/-MQprv7XwoPp02F6eS-W) ​‌ **Bước 2** Đây là trang dùng để cấu hình kết nối: > 1: Các bạn nhập vào 1 đoạn text bất kỳ dùng làm mã bảo mật. > > 2: Chọn nền tảng kết nối là Silferbots > > 3: Nhập tên attribute mà ảnh sau khi tạo ra sẽ gán link vào attribute này vào bot > > 4: Lựa chọn actieon là send Image để khi bot gọi API thì sẽ gửi cho user 1 cái ảnh. > > 5: Dựa vào các biến (attribute) mà các bạn đã nhập ở mục layer hệ thống sẽ tự động tạo ra 1 đoạn json nhỏ. ![](/files/-MQq580sc3e-y80BBU0C) **Bước 3:** Ở Silferbots tạo ra 1 block và các thẻ tính năng (chủ yếu quan trọng nhất là thẻ API còn thẻ Text kia thì để hiển thị nội dung thôi) * Ngoài ra ở phần field hiển thị ảnh, bạn cũng cần phải add field này vào trước khi chèn field vào nhé! Nếu không thì ảnh sẽ không thể hiển thị vì field không tồn tại. (Field để dạng text nhé) ![](/files/-MQqCTM_HiVyAinzD6rW) **Bước 4:** Cấu hình thẻ Json > 1: Chọn là POST > > 2: Sau khi điền xong mã Secret ở Bước 2 phía trên, ấn vào nút copy màu xanh lá cây và dán vào. > > 3: Chọn Body > > 4: Chọn tiếp JSON > > 5: Copy ô số 4 ở Bước 2 phía trên và dán vào. ![](/files/-MQqCnQosKjgjcKu_mp-) **Bước 5:** Ok rồi giờ thì bạn test xem bot chạy có mượt không (lưu ý thời gian xuất ảnh sẽ hơi lâu nên các bạn có thể bổ sung thêm thẻ typing ở giữa thẻ Json và thẻ IMG để khách khỏi sốt ruột. ) ![](/files/-MQqDNQaidw6rt_WFAmX) # Manychat **Bước 1:** Để có thể tích hợp với Manychat, các bạn chọn vào connect ![](https://i.imgur.com/uckY0Px.png) **Bước 2** Đây là trang dùng để cấu hình kết nối: > 1: Các bạn nhập vào 1 đoạn mã bất kỳ dùng làm mã bảo mật. > > 2: Chọn nền tảng kết nối là Manychat > > 3: Nhập tên Custom Field sử dụng bên Manychat. Đây là Custom Field sẽ lưu link ảnh được tạo bằng plugin. > > 4: Action: Chọn action phù hợp mà bạn muốn sử dụng. Mình chọn Send Image để send trực tiếp ảnh cho khách hàng. > > 5: Json kết nối dùng để kết nối truyền dữ liệu từ Manychat tới plugin trên botplus.io ![Conect With Manychat](https://i.imgur.com/U2ap9XV.png) **Bước 3:** Ở Manychat tạo ra 1 block và các thẻ tính năng bao gồm 1 thẻ Text hiển thị nội dung với khách hàng và 1 thẻ Dynamic để kết nối. ![](https://i.imgur.com/ObOiy4Z.png) **Bước 4:** Cấu hình thẻ Dynamic Sau khi cài đặt connection trên botplus.io xong, bạn nhấn Update để lưu cấu hình và chọn Copy để tự copy API đã tạo kèm mã bảo mật. Sau khi copy mã bạn vào Dynamic trên Manychat và dán vào phần Request URL. ![Copy API và dán vào thẻ Dynamic ](https://i.imgur.com/4bAGJHP.png) Sau khi copy link API xong bạn quay lại plugin trên botplus và copy phần Json API để kết nối. ![](https://i.imgur.com/auAATiF.png) Quay lại thẻ Dynamic và tiếp tục cài đặt theo hướng dẫn bên dưới. > 1: Request Type: Chọn cấu hình POST > > 2: Chọn Body > > 3: Dán nội dung vừa copy trên plugin vào Request Body và nhấn Save để lưu cài đặt. ![](https://i.imgur.com/zoxHejK.png) **Bước 5:** Sau khi cài đặt xong bạn Public Fowl và test thử bot vừa cài đặt. ![](https://i.imgur.com/xJwT3IQ.png) Sau khi nhấn Preview bot sẽ gửi 1 nội dung kèm hình ảnh được tạo cá nhân hóa cho khách hàng. ![](https://i.imgur.com/4otIp5n.png) # Tạo Bot Game Để tạo 1 Bot game, bạn vui lòng làm theo các bước sau: > * Chọn BOT GAME trên thanh menu Botplus.io > * Chọn phần Types để chọn loại bot game bạn muốn sử dụng. > * Sau khi chọn xong loại bạn nhấn Active trên bot game đó để tạo bot game. ![](https://i.imgur.com/l5HPewo.png) Sau khi ấn vào active thì hệ thống sẽ list ra các giao diện (template) của bot game cho bạn lựa chọn. Đối với mỗi loại bot game sẽ có các giao diện khác nhau (trong hình là các giao diện của bot game Lucky Spinner) Chọn 1 giao diện và nhấn **Active** để bắt đầu sử dụng. ![](https://i.imgur.com/sSMO68R.png) # Các Loại Bot Game # Lucky Spinner ## Tạo mini game vòng quay may mắn > 1\. Để tạo 1 mini game vòng quay may mắn bạn chọn **Bot Game**, chọn **Types** và chọn **Active** ở phần **Lucky Spinner**. ![](/files/-MMJaXsdM-lpKEzp5TZT) > 2\. Sau khi ấn vào active thì hệ thống sẽ list ra các giao diện (template) của Lucky spinner cho bạn lựa chọn. Chọn 1 giao diện và nhấn **Active** để bắt đầu sử dụng. ![Lucky Spinner Template](https://i.imgur.com/sSMO68R.png) # CONFIG # Spinner config Sau khi vào phần config Lucky Spin, bạn sẽ thấy phần này sẽ có 10 mục chính bao gồm: Dưới đây là giao diện cấu hình của trang xây dựng form > 1. When click “receive”: là hành động sau khi khách ấn nhận quà hay “receive” > 2. Show “Again” button: Hiện/ ẩn nút “Again” hay quay tiếp > 3. Text Turn Remain: Thông báo lượt quay còn lại của khách hàng được truyền bằng biến {TURN\_NUMBER} > 4. Title receive: Phần chúc mừng khách hàng > 5. Description Receive: Phần thông báo phần quà khách đã trúng > 6. Buttion Receive Gift: Button để khách ấn vào nhận quà > 7. Button Again: Button để khách ấn vào để quay tiếp ( Nếu bạn đã ẩn button quay tiếp thì bỏ qua phần này) > 8. Title Notification: Phần thông báo nếu khách đã hết lượt chơi > 9. Icon Notification: Hình ảnh cho 8. > 10. Style global: Màu của pop-up thông báo. ![](/files/-MMPF6i8WDFN6x4aMmB0) # Spinner design Thiết kế vòng quay may mắn sẽ có những element sau: * 1\. **Background**: Hình nền của vòng quay may mắn * 2\. **Banner**: Banner của vòng quay may mắn * 3\. **Arrow**: Mũi tên của vòng quay * 4\. **Button Spin**: Nút bấm để quay * 5\. **Button Left**: Nút bấm bên trái * 6\. **Button Right**: Nút bấm bên phải * 7\. **Spinner Cover Type**: Cover của vòng quay > Bạn có thể up ảnh cover của vòng quay khi chọn Spinner Cover Image hoặc chọn Spinner Cover Custom thì sẽ có 2 trường là Spinner Cover Size và Spinner Cover Color ![](/files/-MMPFG7BMzjFHV6PjJMb) > • Spinner Cover Size: Kích cỡ của Cover > > • Spinner Cover Color: Màu của Cover * 8\. **Spinner Cover**: Hình cover của vòng quay * 9\. **Spinner Type**: Phần này bạn có thể chọn Spinner Custom hoặc Spinner Image * 10\. **Spinner Image**: Hình ảnh của vòng quay * 11\. **Spin Sound**: Âm thanh khi khách hàng quay ( độ dài của file này là 10s) * 12\. **Show Gift Sound**: Âm thanh chúc mừng khách hàng ![](/files/-MMPFLHINAp9BKX1XhK1) * **Wheel layout number**: Số ô phần quà trong vòng quay ![](/files/-MMPFO6Ei8-dtUGLgjXY) * Nếu 9. Bạn chọn Spinner Custom thì ở trường **Wheel layout number** sẽ có thêm phần **Wheel layout design**. Bạn có thể chọn màu cho các ô phần quà. ![](/files/-MMPG1g-L5EjnTQ6T1OG) **List Gift** (Số phần quà nhiều nhất, phụ thuộc vào số ô phần quà bạn chọn ở trên) * Gift name: Tên phần quà * Gift image: Ảnh phần quà (phần này sẽ hiển thị khi khách hàng quay trúng phần quà) * Gift rate: Tỷ lệ quay trúng phần quà * Quantity: Số lượng phần quà * Won: Số người đã quay trúng phần quà * Remain: Số phần quà còn lại (Nếu số quà nhỏ hơn bằng 0 thì sẽ không quay được vào phần quà đó nữa) ![](/files/-MMPFSEDTJ5cx7cLoWjq) **\*Note:** Ở phần này sau mỗi thay đổi plug-in sẽ tự động được update. ## # Spinner content * **Content Button Left:** Content của button bên trái * **Content Button Right:** Content của button bên phải Phần này bạn có thể điền thông tin theo tùy ý mình! ![](/files/-MMPGBJpCebcXG82Ix2O) # Shoot Game # Touch Fly # SEO & SOCIAL # SEO # Tracking # Javascript - CSS # CONNECTION # Push data # Smaxbot **Bước 1:** Bạn tạo 2 block trên Smax trong đó 1 block sẽ bao gồm vòng quay may mắn và 1 block sẽ trả thông tin của khách hàng từ vòng quay may mắn về. ![Block Vòng quay may mắn](/files/-MMTICUr5CG8yonAauTX) ![Block trả thông tin](/files/-MMTulyKUYv-HrmZSqob) **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 **SmaxBot** ở menu xổ xuống. ![](/files/-MMTIy05lgVeKjlUPGQf) **Bước 3:** Đây là phần cấu hình kết nối của Lucky Spinner với SmaxBot > **Name**: Tên của kết nối (nên đặt có từ Smaxbot để dễ nhớ) > > **BotID**: ID của bot bạn tạo bên Smaxbot > > **Bot Token**: Token của bot bạn tạo bên Smaxbot > > **Block ID**: ID của block 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 ID, Bot Token, Block ID** bạn vui lòng xem bước tiếp theo* ![](/files/-MMTJ6mCxFkdT5lk70a7) **Bước 4:** Để copy Block ID bạn copy phần số như hình 1 (phía sau ký tự ?id=) Sau đó bạn tắt Block VQMM đi và click vào số 2 để copy Bot ID, số 3 để copy Bot Token Copy xong bạn quay lại bước 3 để điền thông tin vào form cấu hình ![](/files/-MMTLOclLU0yxgmA3Ozy) **Bước 5:** Cấu hình truyền dữ liệu trên botplus.io Ở 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 SmaxBot ![](/files/-MF__dqOL8tyKGuNe_Dp) 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 form. Và các trường mặc định VD: Gift\_id, Gift\_name, .... ![](/files/-MMTgzOuFrVgHkHAkEW-) 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. ![](/files/-MMTuv4SLp-x-mYaXZ1K) **Bước 6:** Khai báo thông tin cho block **ConfirmTT** Nhập các tên Attribute Name bạn đã nhập ở bước 5 vào mục confirm Data ![](/files/-MMYUwTWIdsLwIRugnY6) **Bước 7:** Cấu hình URL cho lucky spinner 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 để cho đẹp VD: **botiosmax.botplus.asia/vqmm** * You can use "Use own domain" to use your own domain Eg: **luckyspinnertest.vn** **Bạn ấn Update sau đó chọn vào mục 3 để copy link dành cho Smaxbot** (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) ![](/files/-MMTkA9ykVR1U5PZHwXO) **Bước 8:** Truyền lượt quay lên vòng quay ![Block VQMM](/files/-MMToqIaqzBXZZ_3UYok) > 1\. Ở block của Vòng quay may mắn demo bạn chọn **Json API** chọn post > > 2\. Bạn copy đoạn url ở bước 7 và đừng quên bao gồm cả mã secret nhé! > > 3\. Tiếp theo bạn có thể chọn Json hoặc Params > > * Nếu bạn chọn Json thì bạn có thể chèn đoạn mã như dưới hình. Trong đó "turnNumber" là lượt quay của vòng quay may mắn. > * Nếu bạn chọn Params thì bạn thêm turnNumber vào phần name và thêm số vòng quay vào value nhé. ![](/files/-MMTregALFKgj4_2-jz1) **Bước 9:** Kết nối link của luckyspinner vào button. Ở phần text trong block VQMM bạn chọn **Add new button** (có thể sử dụng thẻ Gallerry hoặc thẻ Media cũng được) ![](/files/-MMTsaoeeVgoeXcrg2br) Bạn nhập tên button (VD: Quay ngay) sau đó chọn tab **URL** và dán đường dẫn copy **ở bước 7** vào. Click chuột ra ngoài bạn sẽ thấy 1 dòng là ***Add *** into..... Bạn click vào, mục đích để add domain vào with list để webview có thể bật được dạng popup ở messenger. ![](/files/-MMTt5GINNtnSatvB6Rd) **Bước 10:** Test thử Tạo ra ref link để test thử xem bot hoạt động OK không (xem cách tạo reflink [ở đây](https://bot.vn/hoc-chatbot/tips-chatbot/huong-dan-tao-reflink-cho-block-32.html) ) ![](/files/-MMU-inPa5MtCo0XS-dq) Messenger sẽ hiển thị tin nhắn và button để mở botgame ![](/files/-MMU02Us7eZWek4KoAx8) Bạn mở plug-in ra và quay thử vòng quay để xem vận may của mình nhé ![](/files/-MMU3F7is63J1wvRz_Pe) Tiếp đến bạn điền đầy đủ thông tin vào mục thông tin khách hàng nhé ![](/files/-MMU3_fQoyuoqG-xxjRV) Bot sẽ thông báo phần quà, lượt quay còn lại cũng như thông tin của bạn. ![](/files/-MMU4hdwuLVoaEBUuy1Z) # Smaxbot **Bước 1:** Bạn tạo 2 block trên Smax trong đó 1 block sẽ bao gồm vòng quay may mắn và 1 block sẽ trả thông tin của khách hàng từ vòng quay may mắn về. # Chatfuel # Manychat ### **Bước 1:** Tạo Flow trên Manychat Ở **Manychat** bạn tạo ra 2 flow: > **Flow 1:** Flow có chứa button bật bot game cho khách hàng chơi Mini Game. Khi khách hàng nhấn button sẽ được kết nối tới plugin **Bot Game** 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 chơi xong mini game bot sẽ gửi xác nhận vào flow này. ![Flow in Manychat](https://i.imgur.com/n0X9giF.png) Trong Flow 1 bạn tạo 1 thẻ **Dynamic** để kết nối với plugin **Bot game** và 1 thẻ **Galary** có chứa **Button Play.** ![Flow 1](https://i.imgur.com/bHucnHL.png) ![Flow 2](https://i.imgur.com/tdij2pJ.png) ### **Bước 2:** Kết nối plugin với Manychat 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. ![](https://i.imgur.com/Htkb3A9.png) Đây là giao diện kết nối Manychat trên plugin. ![Connect 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 3: Cấu hình kết nối*** Để 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/EwgeOF5.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é. ![](https://i.imgur.com/sceBfv5.png) ### **Bước 4:** Cấu hình truyền dữ liệu trên botplus.io **4.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/aVFip2A.png) **4.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/v2oMlEH.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. Nhấn Active và Submit để lưu cấu hình kết nối. ### **Bước 5:** Khai báo thông tin cho **Flow 2** Nhập các tên Fields Name bạn đã nhập ở bước 4 vào flow ConfirmMiniGame ![Flow 2](https://i.imgur.com/tdij2pJ.png) ### **Bước 6:** 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 với nhu cầu của bạn VD: **game.botplus.asia/minigame** * Bạn có thể sử dụng Use own domain để sử dụng domain riêng của bạn. [Kết nối tên miền riêng](/webview/ket-noi-ten-mien-rieng) ![](https://i.imgur.com/ku0C8Mu.png) Bạn nhập vào 1 đoạn mã bất kỳ dùng làm mã bảo mật vào **mục số 3**. **Bạn ấn Update sau đó chọn vào mục 4 để 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) ### **Bước 7:** Kết nối link Bot Game vào Button và truyền dữ liệu lượt chơi lên bot game. **7.1: Tryền lượt chơi lên botgame** Ở **Flow 1** bạn tạo 1 thẻ Dynamic ở trên cùng. Bật thẻ Dynamic và cấu hình thẻ như bên dưới. ![Cấu hình Dynamic Card](https://i.imgur.com/untyk6T.png) > 1. Request Type: Chọn cấu hình POST > 2. Dán mã vừa copy trên Plugin Botplus.io vào phần Request URL của thẻ Dynamic trên Manychat. > 3. Nhấn +Request Header và thêm giá trị **Elm-Secret** vào phần Key. Trong phần value bạn copy mã **Secret** vừa tạo trên plugin ở **bước 6** và dán mã đó vào phần **value** Chuyển sang tab **Body** và co đoạn bên dưới dán vào **Request Body** ``` { "userId": "{{user_id}}", "turnNumber": "1" } ``` Giá trị số 1 bên trên là số lượt quay truyền lên cho người chơi, bạn có thể sửa giá trị đó là một số khác tùy theo giá trị lượt chơi mà bạn muốn truyền. Bạn có thể truyền 1 **User Field** là giá trị số lượt chơi cho khách hàng. ![](https://i.imgur.com/OJjeXBy.png) Sau khi câu hình xong bạn nhấn Save để lưu lại cấu hình thẻ. **7.2: Kết nối link vào button.** Tạo thẻ Gallery hoặc thẻ Text để hiển thị nội dung cho khách hàng. Chọn **Add button** để tạo button kết nối. Bạn nhập tên button (VD: Play) sau đó chọn tab **Open website** và dán đường dẫn copy **ở bước 6** vào. ![](https://i.imgur.com/z4fLMaK.png) Nhấn Done và kịch bản chatbot vừa tạo. # Chatrace # URL Address # DATA # Tạo Một Table Plugin Table là một plugin trên Botplus.io dùng để lưu trữ thông tin khách hàng giống một google sheet chuyên dụng cho lưu trữ data. Bạn có thể thao tác tương tự các tính năng thêm, sửa, xóa... Để tạo 1 **Table,** bạn chọn **TABLE** ở trên thanh menu rồi chọn **New Table.** ![Create New Table.](/files/L1BaKmfAy53gEpkhqjPy) ### Giao diện của 1 Table sẽ có 4 phần chính > 1\. Quản lý cột. > > 2\. Thêm cột, thêm hàng cho bảng. > > 3\. Thanh công cụ. > > 4\. Cấu hình để kết nối với các ứng dụng khác (VD: chatbot,...). ![Table](/files/QtCPP7WgCY2ut8TjrA8X) # Cấu hình của Table ### 1. Manage fields Bạn có thể chỉnh sửa các cột bằng cách di chuyển cột hoặc ẩn cột trong bảng đi. ![Manage Fields](https://im3.ezgif.com/tmp/ezgif-3-a907e27e1e.gif) ### 2. Thêm cột Tính năng này giúp bạn thêm 1 cột vào trong bảng. 1 cột sẽ bao gồm các thông tin: > 1\. Field Name: Đây là tên của cột. > > 2\. Field Key: Biến giá trị của cột (giống như attribute). > > 3\. Field Type: Định dạng thông tin của cột. Sau khi chọn đủ 3 thông tin của cột thì bạn chỉ cần ấn nút Save là tạo được 1 cột trong bảng rồi. ![Add Column](/files/0a8ggblttAH6Y3harLCF) Còn để thêm hàng thì bạn chỉ cần ấn thêm, bảng sẽ tự thêm giá trị của cột ứng với hàng đó nhé. **Lưu ý:** * Khi bạn ẩn cột đi thì biến ở cột đó vẫn có thể được truyền về bot. * Khi kết nối bot với Table để lưu data, data mới sẽ được mặc định thêm vào dòng cuối cùng. ### 3. Thanh công cụ **3.1:** Nút Reload data. Tính năng này giúp bạn reload thông tin mới nhất để hiển thị lên **TABLE**. ![](/files/HL1OeCIlMSx2OBNrWtsS) **3.2:** Nút Import Data, Export Data giúp bạn thêm hoặc xuất data bằng file excel ![](/files/ylUM3WkWUanx19kqO4I0) # Tích Hợp Chatbot **Bước 1:** Để kết nối với nền tảng chatbot, bạn chọn vào **CONNECT** ![Connect Table](/files/AdTDVMlqJBFvnEtfG8eI) **Bước 2:** Đây là giao diện kết nối nền tảng > 1: Các bạn nhập vào 1 đoạn text bất kỳ dùng làm mã bảo mật. > > 2: Chọn nền tảng kết nối mà bạn muốn kết nối với **Table** > > 3: Chọn update để lưu cấu hình kết nối của bạn. ![](/files/k2CjOxpQJ9NaRPt5aerY) **Bước 3:** Trên Smax.bot bạn tạo ra 1 block bao gồm các thẻ * User input: dùng để lấy thông tin dòng có trong cột cần lấy về. VD: ở đây mình sẽ lấy biến name trong cột Họ và tên. ![](/files/-MMoc8yj4spTsYCY8ZL2) * Json API: dùng để lấy thông tin về. Bạn copy đoạn mã Json từ botIO về và bỏ đi những hàng không cần lấy làm điều kiện ![](/files/-MMocF5ZldBtGOD0kE3Z) * Text: Kiểm tra thông tin đã được truyền. Ở phần này bạn thêm vào những biến trong hàng mà bạn cần kiểm tra. ![](/files/-MMoe0k-ZOXg5TlmMYgt) **Bước 4:** Test Table Sau khi đã setup xong bạn tạo 1 ref link hoặc ấn vào icon messenger để test nhé! ![](/files/-MModDzoAw5ezR2eNxRt) Bot sẽ hỏi bạn thông tin hàng mà bạn cần tìm trong đó có chứa thông biến name ![](/files/-MMsFoPiWJzP6kw1Wr0q) Sau khi bạn điền thông tin có trong Table thì nhưng thông tin khác sẽ được bot trả về. ![](/files/-MMsG0QCQG1taEIirmJ2) # Các tính năng khác #### Ngoài find thông tin khách hàng ra, bạn cũng có thể thêm/ chỉnh sửa thông tin của khách hang thông qua Smax.bot. ## 1. Thêm thông tin. ## 2. Chỉnh sử thông tin. # Thêm thông tin vào bảng **Bước 1:** Giống như phần tìm thông tin trong Table. Bạn tạo 1 block có các elements gồm: * User input: Dùng để lấy thông tin khách hàng ( bạn cũng có thể dùng form thông tin) * Json API: Dùng để truyền thông tin khách hàng từ bot lên Table ![](/files/-MMsUFAo0NYu1eFlo3bP) **Bước 2:** Lấy thông tin khách hàng Bạn đặt một số câu hỏi để lấy thông tin của khách hàng. VD: tên, số điện thoại, ... ![](/files/-MMsUtbLOM27i89JjwQ5) **Bước 3:** Cấu hình Json > 1\. Bạn chọn giao thức POST > > 2\. Post API url bạn copy từ bên Connect Table > > 3\. Chọn Json > > 4\. Bạn copy đoạn mã Json ở bên Table. > > * Chuyển hành động của bot từ findRow sang newRow ( để thêm hàng vào bảng) > * Phần dưới là những Field sẽ được thêm vào trong hàng đó. VD: name và phoneno,... ![](/files/-MMsVhA_kyN-ADMAVrvu) **Bước 4:** Test Table Bạn tạo 1 ref link hoặc ấn vào icon messenger để bot gửi tin nhắn cho bạn nhé ![](/files/-MMsYkEIMMmW-SIXBb2F) Bot sẽ nhắn tin cho bạn để lấy thông tin sau đó bạn cung cấp thông tin nhé ![](/files/-MMsZ_Ls7k4MdYs7qfvH) Bạn vào Table và chọn reload data để cập nhật thông tin table nhé ![](/files/-MMs_SYIMneo4Uzz9jeH) # Chỉnh sửa thông tin **Bước 1:** Giống như phần tìm thông tin trong Table. Bạn tạo 1 block có các elements gồm: * User input: Dùng để lấy thông tin khách hàng ( bạn cũng có thể dùng form thông tin) * Json API: Dùng để truyền thông tin khách hàng từ bot lên Table ![](/files/-MMsUFAo0NYu1eFlo3bP) **Bước 2:** Lấy thông tin khách hàng Bạn đặt một số câu hỏi để lấy thông tin của khách hàng. VD: tên, số điện thoại, ... ![](/files/-MMsUtbLOM27i89JjwQ5) **Bước 3:** Cấu hình Json > 1\. Bạn chọn giao thức POST > > 2\. Post API url bạn copy từ bên Connect Table > > 3\. Chọn Json > > 4\. Bạn copy đoạn mã Json ở bên Table. > > Trước tiên bạn muốn updateRow thì bạn cần findRow trước. Vì thế, ở đây mình sẽ dùng findRow để tìm được hàng cần update thông tin trước, sau đó sẽ updateRow nhé. ![](/files/-MMt7-la0yQ1UQzR_SIg) **Bước 4:** Test Table Bạn tạo 1 ref link hoặc ấn vào icon messenger để bot gửi tin nhắn cho bạn nhé ![](/files/-MMt8hyMaCmIju4qB0Lj) Bot sẽ nhắn tin cho bạn để lấy thông tin sau đó bạn cung cấp thông tin nhé ![](/files/-MMt8U3aPk-RJOGMcNpG) Bạn vào Table và chọn reload data để cập nhật thông tin table nhé ![](/files/-MMs_SYIMneo4Uzz9jeH) Sau khi ấn reload data thì số điện thoại ở hàng có biến name là "NTH" đã được update! ![](/files/-MMt952B4bzHB1iGV8YH) # Smax.bot # Chatfuel # Chatrace # Manychat # Tạo Email Để tạo một email bạn truy cập vào menu Email, chọn template và click active ở Template mà mình muốn sử dụng. ![](/files/-MJkJnQq-lbidClLDnAz) ### Ở giao diện email các bạn sẽ có * Tiêu đề email * Content của email * Block trong email * Body email ![](/files/-MLqObtnDw2lN7iixMPR) # Cấu hình content email ### Content của email bao gồm các element gồm: ![](/files/-MLqHv_0lvaZjLGTW0rb) 1\. **Columns**: Lựa chọn số cột trong 1 block (tối đa có thể chọn được 4 cột trong 1 block) 2\. **Button**: là một công cụ tích hợp để người dùng có thể thêm các nút vào thiết kế của bạn. Công cụ này được hỗ trợ cho cả hai chế độ hiển thị: email và trang web. 3\. **Divider**: là một công cụ được tích hợp sẵn để người dùng có thể thêm dải phân cách vào thiết kế của mình. Công cụ này được hỗ trợ cho cả hai chế độ hiển thị: email và trang web. 4\. **HTML**: là một công cụ được tích hợp sẵn để người dùng có thể thêm HTML tùy chỉnh vào thiết kế của bạn. 5\. **Image**: là một công cụ tích hợp để người dùng có thể thêm hình ảnh vào thiết kế của bạn. Công cụ này được hỗ trợ cho cả hai chế độ hiển thị: email và trang web. 6\. **Menu**: dùng để tạo menu điều hướng khách hàng. 7\. **Text**: bạn có thể thêm văn bản theo thiết kế của mình. # Cấu hình body email ### Ở phần body bạn có thể chỉnh sửa phần nền cũng như font chữ của văn bản. ![](/files/-MLqJSGYmH_Ao1FnAk3d) 1\. **Background color**: giúp thay đổi màu của nền email. 2\. **Content width:** thay đổi chiều rộng của email (Mặc định với desktop là 600px và 480px với mobile). 3\. **Font Family**: thay đổi font chữ của văn bản. 4\. **Color**: màu của đường link 5\. **Underline**: gạch chân cho những đường link # Cấu hình SMTP ### **Cách để cài đặt SMTP email** ![](/files/-MLzXjX0UFlET0_p8yJH) 1. Name: Bạn điền tên của SMTP (tên này có thể tùy theo ý bạn) 2. Service: chọn nhà cung cấp mail. Ở phần này có Gmail và AWS bạn có thể chọn nhà cung cấp cho mình. 3. Host: bạn chọn host để gửi tin nhắn tự động (mặc định sẽ là smtp.gmail.com sử dụng cho service là gmail) 4. Port: phần này bạn chọn cổng port theo giao thức mật mã nhé (TLS, SSL, StartTLS) 5. From address: email gửi tin nhắn 6. Username: Tên đăng nhập emai 7. Password: Mật khẩu đăng nhập email. Nếu bạn dùng bảo mật 2 bước thì làm theo hướng dẫn dưới đây để lấy app password nhé # Lấy app password ### Cách để lấy app password khi bạn đang để bảo mật 2 lớp 1. Bạn vào tài khoản google và vào phần bảo mật 2. Kéo xuống dưới và chọn app password ![](/files/-MLzcksKgOlbPvgYhdwf) 3\. Phần chọn app thì bạn chọn app thì bạn chọn là other (custom name). ![](/files/-MLzcBEVSfF3uaf2OX9P) Như ở đây mình đã tạo sẵn 1 app password tên là “Email smtp” (tên này bạn có để đặt bất kỳ lsao để dễ nhớ là được). ![](/files/-MLzcDloyppOiKSGDEMi) 4\. Bạn copy mã này vào phần password là được nhé # Tích hợp chatbot 1. Ở phần này bạn chọn connect. 2. Dưới là những nền tảng chatbot được hỗ trợ kết nối với botIO. ![](/files/-MLznwU2vxQMbe-23FhL) # Smax.bot **Bước 1:** Để có thể tích hợp với Smaxbot, các bạn chọn vào connect. ![](/files/-MLzqSE_dXL1eFZ9ZjOW) **Bước 2:** Đây là trang dùng để cấu hình kết nối > 1: Các bạn nhập vào 1 đoạn text bất kỳ dùng làm mã bảo mật. > > 2: Chọn nền tảng kết nối là Smax.bot > > 3: Phần này bạn có thể bỏ qua hoặc khi chạy vào bot sẽ trả lại 1 block > > 4: Dựa vào các biến (attribute) mà các bạn đã nhập ở mục layer hệ thống sẽ tự động tạo ra 1 đoạn json nhỏ. ![](/files/-MLzvJdR6IrwnKsOJuU9) **Bước 3:** Trên Smaxbot bạn có thể tạo ra 2 block. 1 block là Test Email và 1 block là NhanEmail (các bạn có thể đặt tên theo ý của mình)‌. ![](/files/-MM-0jBLEh4hqZG-nMqn) **Bước 4:** Nhập nội dung của block Test Voucher và tạo ra 1 button dẫn sang block NhanEmail‌. ![](/files/-MM-15cvAtS0ch07fS1R) **Bước 5:** Ở block NhanEmail các bạn tạo ra 1 thẻ Json API. > 1: Các bạn chọn giao thức là "Post" > > 2: Phần này các bạn quay lại **Bước 2** (phía trên) ấn vào nút Copy xanh lá cây rồi dán vào > > 3: Chọn tab Json > > 4: Copy bạn mã Json bên email rồi dán vào bot ![](/files/-MM-2kwei8OxVxuPhB-q) **Bước 6:** Bạn hãy vào email của mình check xem bot đã gửi email đến cho mình chưa nhé. ![](/files/-MM-3Lw4_AQaajfInaY0) # Chatfuel **Bước 1:** Để có thể tích hợp với Chatfuel, các bạn chọn vào connect. ![](/files/-MLzqSE_dXL1eFZ9ZjOW) **Bước 2:** Đây là trang dùng để cấu hình kết nối > 1: Các bạn nhập vào 1 đoạn text bất kỳ dùng làm mã bảo mật. > > 2: Chọn nền tảng kết nối là Chatfuel > > 3: Phần này bạn có thể bỏ qua hoặc khi chạy vào bot sẽ trả lại 1 block > > 4: Dựa vào các biến (attribute) mà các bạn đã nhập ở mục layer hệ thống sẽ tự động tạo ra 1 đoạn json nhỏ. ![](/files/-MM-g7gopxPgCYV1nfyM) **Bước 3:** Ở chatfuel tạo ra 1 block và các thẻ tính năng gồm có thẻ json API . ![](/files/-MMJJ6YZjN0pkRMW3qSd) **Bước 4:** Cấu hình thẻ Json > 1: Chọn là POST > > 2: Sau khi điền xong mã Secret ở Bước 2 phía trên, ấn vào nút copy màu xanh lá cây và dán vào. > > 3: Chọn JSON > > 4: Copy ô số 4 ở Bước 2 phía trên và dán vào. ![](/files/-MMJM9coSIL1CgZ8MAMq) **Bước 5:** Bạn hãy vào email của mình check xem bot đã gửi email đến cho mình chưa nhé. ![](/files/-MM-3Lw4_AQaajfInaY0) # Manychat **Bước 1:** Để có thể tích hợp với Manychat, các bạn chọn vào connect. ![](/files/-MLzqSE_dXL1eFZ9ZjOW) **Bước 2:** Đây là trang dùng để cấu hình kết nối > 1: Các bạn nhập vào 1 đoạn text bất kỳ dùng làm mã bảo mật. > > 2: Chọn nền tảng kết nối là Manychat > > 3: Phần này bạn có thể bỏ qua hoặc khi chạy vào bot sẽ trả lại 1 block > > 4: Dựa vào các biến (attribute) mà các bạn đã nhập ở mục layer hệ thống sẽ tự động tạo ra 1 đoạn json nhỏ. ![](/files/-MM-gOrKoEP4fC7PzQXs) **Bước 3:** Trên Manychat bạn tạo 1 flow bao gồm các thẻ tính năng trong đó phải có thẻ +Dynamic. ![](/files/-MMJMruhiPibCRiJCIti) **Bước 4:** Cấu hình thẻ dynamic. > 1: Chọn là POST > > 2: Sau khi điền xong mã Secret ở Bước 2 phía trên, ấn vào nút copy màu xanh lá cây và dán vào. > > 3: Chọn Body > > 4: Copy ô số 4 ở Bước 2 phía trên và dán vào. > > \*Lưu ý: Bạn cần chắc chắn thêm field thông tin khách hàng thì mới đẩy được thông tin về email nhé ![](/files/-MMJNz7cWeIP1lojGz63) **Bước 5:** Bạn hãy vào email của mình check xem bot đã gửi email đến cho mình chưa nhé. ![](/files/-MM-3Lw4_AQaajfInaY0) # Chatrace **Bước 1:** Để có thể tích hợp với Chatrace, các bạn chọn vào connect. ![](/files/-MLzqSE_dXL1eFZ9ZjOW) **Bước 2:** Đây là trang dùng để cấu hình kết nối > 1\. Các bạn nhập vào 1 đoạn text bất kỳ dùng làm mã bảo mật. > > 2\. Chọn nền tảng kết nối là Chatrace > > 3\. Nhập tên field mà sau khi email được tạo ra sẽ gán link vào field này > > 4\. Phần này bạn có thể bỏ qua hoặc khi chạy vào bot sẽ trả lại 1 block > > 5\. Dựa vào các biến (attribute) mà các bạn đã nhập ở mục layer hệ thống sẽ tự động tạo ra 1 đoạn json nhỏ. ![](/files/-MM-hc-8UTviBGp1Mb8M) **Bước 3:** Trên Chatrace bạn tạo 1 flow bao gồm các thẻ tính năng trong đó phải có thẻ +Request. ![](/files/-MMJPdyVOqFPgoGpGyN6) **Bước 4:** Cấu hình thẻ Request. > 1: Chọn là POST > > 2: Sau khi điền xong mã Secret ở Bước 2 phía trên, ấn vào nút copy màu xanh lá cây và dán vào. > > 3: Chọn Body > > 4: Chọn JSON > > 5: Copy ô số 4 ở Bước 2 phía trên và dán vào. > > \*Lưu ý: Bạn cần chắc chắn thêm field thông tin khách hàng thì mới đẩy được thông tin về email nhé ![](/files/-MMJRCO0SvWgONobVdr1) **Bước 5:** Bạn hãy vào email của mình check xem bot đã gửi email đến cho mình chưa nhé. ![](/files/-MM-3Lw4_AQaajfInaY0)