Chuyển tới nội dung chính

showFunctionButtonWidget

Bắt đầu hỗ trợ ở phiên bản:

  • SDK: 2.39.0
import { showFunctionButtonWidget } from "zmp-sdk/apis";

Widget Function Button: Khi người dùng nhấn vào button này, Mini App sẽ nhận được 1 message token (có giá trị trong 7 ngày) để gửi tin nhắn tới người dùng. Chi tiết hướng dẫn gửi tin nhắn thông qua message token tham khảo tại đây.

Widget FunctionButton

Ví dụ

Hiển thị Widget Function Button:

import React, { useEffect } from "react";
import { showFunctionButtonWidget } from "zmp-sdk/apis";

function HomePage() {
useEffect(() => {
showFunctionButtonWidget({
id: "orderButton",
type: "ORDER",
text: "Đặt hàng",
color: "#0068FF",
textColor: "#FFFFFF",
borderRadius: "48px",
onDataReceived: (messageToken) => {
console.log(messageToken);
},
onError: (error) => {
console.error("onError:", error);
},
});
}, []);

return (
<>
...
<div id="orderButton" />
...
</>
);
}

export default HomePage;
Xem hướng dẫn xử lý lỗi và bảng mô tả chi tiết mã lỗi tại đây.

Tham số

Truyền tham số vào API dưới dạng object chứa các thuộc tính:

NameTypeDefaultDescription
borderRadiusstring"48px"

Bo góc (bo tròn các góc của button).

colorstring"#0068FF"

Màu chủ đạo của widget. Giá trị phải là chuỗi hex.

fontSizestring"16px"

Kích thước font chữ. Giá trị nhỏ nhất là 14px.

idstring

ID của element, nơi cần hiển thị widget.

text"Thanh toán" |"Đặt món" |"Đặt xe" |"Đặt hàng" |"Mua vé" |"Booking" |"Đặt chỗ" |"Tạo đơn hàng" |"Đặt trước" |"Mua hàng" |"Đặt lịch" |"Tra cứu" |"Kiểm tra"

Chuỗi hiển thị trong button. Phải là một trong các giá trị được cho phép:

textColorstring"#FFFFFF"

Màu chữ trong button. Giá trị phải là chuỗi hex.

type"ORDER"

Loại nút, hiện tại chỉ hỗ trợ giá trị: ORDER.

onDataReceived(messageToken: string) => void

Callback được gọi khi người dùng nhấn vào widget. Callback này chứa messageToken là một token được dùng để gửi tin nhắn tới người dùng. Có giá trị trong 7 ngày.

onError(error: string) => void

Callback được gọi khi có lỗi xảy ra khi người dùng nhấn vào widget. Callback này chứa error là thông tin về lỗi.

showFunctionButtonWidget

zi-chevron-up
miniapp-logo

Khám phá