|
| 1 | +# Zoom Rivet for JavaScript |
| 2 | + |
| 3 | +Zoom Rivet is a comprehensive toolkit built to help developers quickly integrate and manage server-side applications within the Zoom ecosystem. This tool currently supports Node.js, offering core functionalities like authentication, API wrappers, and event subscriptions, enabling developers to focus on business logic instead of infrastructure. |
| 4 | + |
| 5 | +## Getting started |
| 6 | + |
| 7 | +### Installation |
| 8 | + |
| 9 | +In your Node.js application, install the Zoom Rivet package: |
| 10 | + |
| 11 | +``` |
| 12 | +$ npm install @zoom/rivet |
| 13 | +``` |
| 14 | + |
| 15 | +### Initialization |
| 16 | + |
| 17 | +You can import and initialize the client from any [supported module](https://developers.zoom.us/docs/rivet/#modules) using the pattern for the Chatbot module in the code snippet below. |
| 18 | + |
| 19 | +In a new entrypoint file called `index.js`, add the following code, replacing `CLIENT_ID`, `CLIENT_SECRET`, and `WEBHOOK_SECRET_TOKEN` with your [Marketplace app](https://marketplace.zoom.us) credentials: |
| 20 | + |
| 21 | +```javascript |
| 22 | +import { ChatbotClient } from "@zoom/rivet/chatbot"; |
| 23 | + |
| 24 | +(async () => { |
| 25 | + const chatbotClient = new ChatbotClient({ |
| 26 | + clientId: "CLIENT_ID", |
| 27 | + clientSecret: "CLIENT_SECRET", |
| 28 | + webhooksSecretToken: "WEBHOOK_SECRET_TOKEN" |
| 29 | + }); |
| 30 | + |
| 31 | + // Zoom Rivet code goes here! |
| 32 | + |
| 33 | + const server = await chatbotClient.start(); |
| 34 | + console.log(`Zoom Rivet Events Server running on: ${JSON.stringify(server.address())}`); |
| 35 | +})(); |
| 36 | +``` |
| 37 | + |
| 38 | +Save your `index.js` file and run the following command to start your local development server: |
| 39 | + |
| 40 | +``` |
| 41 | +$ node index.js |
| 42 | +``` |
| 43 | + |
| 44 | +### Expose local development server |
| 45 | + |
| 46 | +Now that your app runs on your local machine, let's use [ngrok](https://ngrok.com/) to allow Zoom to reach your server through webhook: |
| 47 | + |
| 48 | +``` |
| 49 | +$ ngrok http 8080 |
| 50 | +``` |
| 51 | + |
| 52 | +## Basic Concepts |
| 53 | + |
| 54 | +To use Zoom Rivet effectively, you should understand three important concepts: authentication, listening to events, and using the Web API. |
| 55 | + |
| 56 | +### Authentication |
| 57 | + |
| 58 | +Zoom Rivet handles authentication for developers. All you have to do is provide your app's `ClientId` and `ClientSecret`. See the matrix in the table below to better how authentication works in each Rivet module: |
| 59 | + |
| 60 | +| Module | Auth Type | |
| 61 | +| --------- | -------------------------------------------------------------------------------------------------------------------- | |
| 62 | +| Team Chat | [OAuth](https://developers.zoom.us/docs/team-chat-apps/installation-and-authentication/#authentication) | |
| 63 | +| Chatbot | [Client Credentials](https://developers.zoom.us/docs/team-chat-apps/installation-and-authentication/#authentication) | |
| 64 | +| Users | [OAuth](https://developers.zoom.us/docs/team-chat-apps/installation-and-authentication/#authentication) | |
| 65 | +| Video SDK | [JWT](https://developers.zoom.us/docs/video-sdk/auth/) | |
| 66 | + |
| 67 | +### Listening to Events |
| 68 | + |
| 69 | +To listen to events sent to your app, you can use the `event()` method in the `webEventConsumer` property. This method can be used to listen to any supported Zoom webhook event, like a slash command shown below. |
| 70 | + |
| 71 | +This method receives a required parameter of `string`, which filters out webhook events that do not match. |
| 72 | + |
| 73 | +```javascript |
| 74 | +chatbotClient.webEventConsumer.event("bot_notification", (response) => { |
| 75 | + const payload = response.payload; |
| 76 | + console.log(payload); |
| 77 | +}); |
| 78 | +``` |
| 79 | + |
| 80 | +### Using the Web API |
| 81 | + |
| 82 | +You can call any of the supported Zoom APIs using their respective methods in the `endpoints` namespace of the module's client. |
| 83 | + |
| 84 | +See the following example of the `sendChatbotMessage()` API from the Chatbot module: |
| 85 | + |
| 86 | +```javascript |
| 87 | +const reqBody = { |
| 88 | + robot_jid: payload.robotJid, |
| 89 | + account_id: payload.accountId, |
| 90 | + to_jid: payload.toJid, |
| 91 | + user_jid: payload.userJid, |
| 92 | + content: { |
| 93 | + head: { |
| 94 | + text: "I am a header", |
| 95 | + sub_head: { |
| 96 | + text: "I am a sub header" |
| 97 | + } |
| 98 | + }, |
| 99 | + body: [ |
| 100 | + { |
| 101 | + type: "message", |
| 102 | + text: "I am a message with text" |
| 103 | + } |
| 104 | + ] |
| 105 | + } |
| 106 | +}; |
| 107 | + |
| 108 | +chatbotClient.endpoints.messages.sendChatbotMessage({ body: reqBody }).then((response) => { |
| 109 | + console.log("SENT MESSAGE", response.data); |
| 110 | +}); |
| 111 | +``` |
| 112 | + |
| 113 | +### Event shortcuts |
| 114 | + |
| 115 | +Rivet provides built-in shortcuts that enable you to execute complex processes in just a few lines of code. |
| 116 | + |
| 117 | +#### Chatbot |
| 118 | + |
| 119 | +##### `onSlashCommand()` |
| 120 | + |
| 121 | +Your app can use the `onSlashCommand()` method to listen to incoming slash command requests. |
| 122 | +Use the `say()` method to respond to slash commands. It accepts a string or [App Card JSON](https://developers.zoom.us//docs/team-chat-apps/customizing-messages/). |
| 123 | + |
| 124 | +```javascript |
| 125 | +chatbotClient.webEventConsumer.onSlashCommand("SLASH_COMMAND", async ({ say, payload }) => { |
| 126 | + console.log(payload); |
| 127 | + await say("Hello World!"); |
| 128 | +}); |
| 129 | +``` |
| 130 | + |
| 131 | +##### `onButtonClick()` |
| 132 | + |
| 133 | +Your app can listen to button clicks and respond using the `onButtonClick()` method. This method takes in a string, which filters button action values. |
| 134 | +You can respond with the `say()` function, which accepts a string or [App Card JSON](https://developers.zoom.us//docs/team-chat-apps/customizing-messages/). |
| 135 | + |
| 136 | +```javascript |
| 137 | +chatbotClient.webEventConsumer.onButtonClick("BUTTON_VALUE", async ({ say, payload }) => { |
| 138 | + console.log(payload); |
| 139 | + await say("Hello World!"); |
| 140 | +}); |
| 141 | +``` |
| 142 | + |
| 143 | +#### Team Chat |
| 144 | + |
| 145 | +##### `onChannelMessagePosted()` |
| 146 | + |
| 147 | +You can use the `onChannelMessagePosted()` method to listen to messages that your app can receive. |
| 148 | +You can use the `reply()` method to respond to slash commands. It accepts a string or App Card JSON. |
| 149 | + |
| 150 | +```javascript |
| 151 | +teamchatClient.webEventConsumer.onChannelMessagePosted("KEYWORD", async ({ reply, payload }) => { |
| 152 | + console.log(payload); |
| 153 | + await reply("Hello World!"); |
| 154 | +}); |
| 155 | +``` |
| 156 | + |
| 157 | +**For the full list of features and additional guides, see our [Zoom Rivet docs](https://developers.zoom.us/docs/rivet).** |
| 158 | + |
| 159 | +## Sample Apps |
| 160 | + |
| 161 | +- [Zoom Rivet for JavaScript sample app](https://github.com/zoom/rivet-javascript-sample) |
| 162 | + |
| 163 | +## Need help? |
| 164 | + |
| 165 | +If you're looking for help, try [Developer Support](https://developers.zoom.us/support/) or our [Developer Forum](https://devforum.zoom.us/). Priority support is also available with [Premier Developer Support](https://explore.zoom.us/en/support-plans/developer/) plans. |
0 commit comments