diff --git a/docs/tutorials/connectors.mdx b/docs/tutorials/connectors.mdx index 28ba027..a4fbfd4 100644 --- a/docs/tutorials/connectors.mdx +++ b/docs/tutorials/connectors.mdx @@ -1,7 +1,141 @@ --- -title: Configuring connectors +title: Configuring the Slack connector --- :::note Prerequisites This guide assumes your familiar with the basics of [event types](../event-types), the [App Portal](../app-portal) and [Connectors](../connectors). -::: \ No newline at end of file +::: + +[Connectors](https://docs.svix.com/connectors) make it easy for your customers to link your webhooks to popular services like Slack, Hubspot, or Microsoft Teams in just a few clicks—no code or new backend infrastructure required. + +With the Slack connector, you can offer your users an easy-to-use way of integrating your webhooks with Slack. + +[[[WITH CONNECTOR, WITHOUT CONNECTOR]]] + + +## Creating a Slack connector + +1. Go to the [Connectors page](https://dashboard.svix.com/connectors) and click on the "Configure Connector" button. + +2. Add a description. This will be displayed to the user in the App Portal. + +3. Select the event types this connector will support. You can choose specific event types that make sense for Slack, or select all of them. + +4. Write the transformation code. This is the code that will be used to transform the webhook payload into a format that the Slack Incoming Webhooks API uses. + +## Writing the connector transformation + +Transformations allow the modification of certain webhook properties in-flight using Javascript code. The transformation is the key component that makes your connector work. + +For the Slack connector, the transformation should make sure the webhook payload is formatted for the [Slack Incoming Webhooks API](https://api.slack.com/messaging/webhooks#posting_with_webhooks), for each of the event types you support (step 3). + +For example, let's say you have two event types, `invoice.created` and `invoice.paid`, with the following schemas: + +```json +{ + "invoice.created": { + "properties": { + "amount": { + "type": "number" + }, + "name": { + "type": "string" + } + } + } +} +``` + +```json +{ + "invoice.paid": { + "properties": { + "invoice_id": { + "type": "string" + }, + "amount": { + "type": "number" + } + } + } +} +``` + +Your transformation should `switch` on the `webhook.eventType` to determine how to use the payload and transform it for the Slack API. + +```js +/** + * @param webhook the webhook object + * @param webhook.method destination method. Allowed values: "POST", "PUT" + * @param webhook.url current destination address + * @param webhook.eventType current webhook Event Type + * @param webhook.payload JSON payload + * @param webhook.cancel whether to cancel dispatch of the given webhook + */ +function handler(webhook) { + switch (webhook.eventType) { + case "invoice.created": + webhook.payload = { + text: `New invoice created: ${webhook.payload.amount}` + }; + break; + case "invoice.paid": + // You can also use advanced formatting options (see https://api.slack.com/messaging/webhooks#advanced_message_formatting) + webhook.payload = { + text: `Invoice paid: ${webhook.payload.invoice_id}`, + blocks: [ + { + type: "section", + text: { + type: "mrkdwn", + text: `Invoice paid: ${webhook.payload.invoice_id}` + } + }, + { + type: "button", + text: { + type: "plain_text", + text: "View in dashboard" + }, + url: `https://dashboard.invoices.com/invoices/${webhook.payload.invoice_id}` + } + ] + }; + break; + } + return webhook; +} +``` + +Your customers will be able to modify the transformation code if they want to, but, ideally, if your connector is useful enough, they won't need to change it. + +## Testing the Slack connector + +Now that you've created your Slack connector, you can test it out in the App Portal. + +[Create a sample application](asdf) and use the 'Preview App Portal' button in the Svix Dashboard. + +In the App Portal, the new connector will be visible when creating a new endpoint. + +[[[SCREENSHOT]]] + +TIP: your connector should work without any changes, so just click create and test it + +[[[[SCREENSHOT - TEST ENDPOINT]]]] + +[[[SCREENSHOT - SEE SLACK MESSAGE!]]] + +And that's it! In just a few clicks, your users will be able to connect their Slack account and start receiving notifications from your webhook events. + +The only thing we did was write the transformation, select the event types the connector supports, and Svix did the rest. + + + +.... + +Adding more connectors +.... + +Read more about connectors: +.... +