---
sourceType: api-reference
sourceTypeMatchedRule: api-prefix
slug: MA/api/widgets/showFunctionButtonWidget
title: showFunctionButtonWidget
---
```ts
import { showFunctionButtonWidget } from "zmp-sdk";
```

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](/docs/OA/tin-nhan/cac-loai-tin-khac/gui-tin-nhan-miniapp-den-nguoi-dung).

![Widget FunctionButton](/assets/MA/img/api/widget/function_button_widget.png)

## Ví dụ

Hiển thị Widget Function Button:

```ts showLineNumbers
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](/docs/MA/api/errorCode).

## Tham số

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

| Property | Type | Required | Description |
|---|---|---|---|
| id | `string` | Yes | ID của element, nơi cần hiển thị widget. |
| type | `"ORDER"` | Yes | Loại nút, hiện tại chỉ hỗ trợ giá trị: `ORDER`. |
| 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"` | Yes | Chuỗi hiển thị trong button. Phải là một trong các giá trị được cho phép: |
| fontSize | `string` | No | Kích thước font chữ. Giá trị nhỏ nhất là 14px. (default: "16px") |
| color | `string` | No | Màu chủ đạo của widget. Giá trị phải là chuỗi hex. (default: "#0068FF") |
| textColor | `string` | No | Màu chữ trong button. Giá trị phải là chuỗi hex. (default: "#FFFFFF") |
| borderRadius | `string` | No | Bo góc (bo tròn các góc của button). (default: "48px") |
| onDataReceived | `(messageToken: string) => void` | No | 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` | No | 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. |