# Slash commands and UI elements

<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

In this section, you’ll configure a slash command in the Zoom App Marketplace and use the App Card Builder Kit to design interactive UI elements. These enhancements allow users to trigger your chatbot using a command and receive structured messages with buttons for feedback or interaction.

By the end of this section, you’ll have:

-   A slash command configured to invoke your chatbot in Chat.
-   An interactive message layout created using the App Card Builder Kit.
-   An updated `sendChatMessage` function that sends a UI-rich response.

---

## Configure a slash command

Set up a slash command to allow users to trigger the chatbot from Chat.

1. Navigate to the **Zoom App Marketplace**.
2. Select your app.
3. In the sidebar, go to **Surface** → **Team Chat Subscription**.
4. Toggle **Slash Command** and enter `zwc` (or a command of your choice).

**Example:**
![](/img/tutorial-slash01.png)

---

## Create UI elements with Card Builder

Use the [Zoom App Card Builder Kit](https://marketplace.zoom.us/docs/guides/chatbots/card-builder) to design structured messages and interactive components like buttons.

1. Open the **App Card Builder Kit**.
2. In the **Actions** panel, select **Feedback Buttons**.
3. Customize the card layout and preview the message.
4. Copy the generated JSON and update your chatbot message payload.

**Example:**

![](/img/tutorial-appcardbuilder.png)

---

## Update chatbot message payload

To include UI elements like feedback buttons in your chatbot response, update the `body` object in your `sendChatMessage` function.

This pattern combines slash commands and interactive cards to create a more engaging Chat experience—making your chatbot feel intuitive, responsive, and visually aligned with modern collaboration workflows.

### File Path

`utils/zoom-api.js`

### Code Snippet

```javascript
/**
 * Sends a UI-rich message with feedback buttons to Zoom Team Chat
 * @param {string} toJid - Recipient JID (user or channel)
 * @param {string} message - Message text content
 */
const body = {
    account_id: "YOUR_ACCOUNT_ID",
    robot_jid: "YOUR_ROBOT_JID",
    to_jid: "YOUR_JID",
    user_jid: "YOUR_USER_ID",
    content: {
        head: {
            text: "Hello World",
            style: { bold: true },
        },
        body: [
            {
                type: "message",
                text: message,
            },
            {
                type: "actions",
                items: [
                    {
                        text: "Thumbsup",
                        value: "thumbsup",
                        style: "Thumbsup",
                    },
                    {
                        text: "Thumbsdown",
                        value: "thumbsdown",
                        style: "Thumbsdown",
                    },
                ],
            },
        ],
    },
};
```