---
title: Slack Integration
slug: bubble/slack-integration
description: Slack OAuth: See how you can add Slack send message functionality to your Bubble.io app
docTags: 
createdAt: 2021-01-09T12:08:26.000Z
---

The Pathfix [Slack Integration Plugin](https://bubble.io/plugin/slack-connector-1610513742546x296251631289499650) enables message sending capabilities from your Bubble app to your user's Slack Workspace. The plugin will handle OAuth configs + tokens and calls the relevant Slack API automatically. No configurations required to get the plugin working

This documentation will show setup guide and a few example use cases.



### Setup

The plugin is available in the Bubble Plugin store.&#x20;

IMPORTANT: You need to install the [Pathfix OAuth Connector](https://docs.pathfix.com/bubble/pathfix-oauth-connector) first before installing this plugin

- Click on **[Add Plugin](https://bubble.io/plugin/slack-connector-1610513742546x296251631289499650)** in the plugin section of your Bubble editor
- Pick the Slack Connector plugin **by Pathfix Inc.** and install it ([click here to access the plugin](https://bubble.io/plugin/slack-connector-1610513742546x296251631289499650))
- Under `x-partner-key (shared headers)`, add your Pathfix x-partner-key from the Keys section of your Pathfix account&#x20;



::Image[]{src="https://api.archbee.com/api/presign/E6H_--BmYJWG_yGaOUOxt/LBovONYjOTeyZdSFA-jLe_image.png" size="90" caption="Image: Partner Key" position="center" showCaption="true"}



- Navigate to the Design section and select the `Pathfix Connector` element and **enable Slack** from the list of providers&#x20;



::Image[]{src="https://api.archbee.com/api/presign/E6H_--BmYJWG_yGaOUOxt/knSCKq4qT2ZpI42sH1vWk_image.png" size="74" caption="Image: enable the provider" position="center" showCaption="true"}



Once installed, there are no additional configurations required to get the Plugin to work. All actions are immediately available, you can setup your workflow in Bubble to add message sending capabilities.&#x20;

The Connect button will automatically be added to your page that contains the Pathfix Connector Design Element.  No additional settings are required

You can add dropdown, text etc elements to pull in Slack Channels using the plugin and setup Workflows to send messages or notifications to your user's Slack channel of choice.&#x20;



### Sample Setup

Here are a few sample screenshots and use-cases that show the setup to pull data or push messages to your User's Slack Workspace.&#x20;



Get List of channels for the connected user:

::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/lhbBCiR-cE78TuLr-0f_b_image.png" size="80" width="1287" height="1190" caption="Image: Get Slack Channels" position="center" showCaption="true"}



Dropdown element for listing Channel names:

::Image[]{src="https://api.archbee.com/api/presign/E6H_--BmYJWG_yGaOUOxt/Nt5IZ3b4WGcumYdrisO24_image.png" size="46" caption="Image: Dropdown Channels" position="center" showCaption="true"}



Add a Text and Button element and enable sending capabilities directly from your app with a simple workflow. Sample:&#x20;



::Image[]{src="https://api.archbee.com/api/presign/E6H_--BmYJWG_yGaOUOxt/iEo0wrK9zs-mQPDy3Fesy_image.png" size="88" caption="Image: Workflow" position="center" showCaption="true"}



### Setup notification workflow

You can setup notifications workflows  to your users channels for certain actions that happen in their app. Here is a sample workflow:&#x20;

![](https://archbee-doc-uploads.s3.amazonaws.com/E6H_--BmYJWG_yGaOUOxt/gbNwUZtz8lTQIeIF66Ovj_image.png "Image: Notification")



You can also setup workflows to send DM notifications to all users that have authorized your app in their Slack. Simple replace the channel name with **&#x7B;&#x7B;authed\_user.id}}**



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/gtQsM7e4Pdnad7oSexSdO_image.png" size="76" width="844" height="494" caption="Image: Notify auth'd users" position="center" showCaption="true"}



Additionally, the Slack plugin (version 3.1.0) also gives you the following additional setting options:

- **channel\_types**
  - You can choose to show specific channel types for users including **private\_channels**, **public\_channel**, **im** and **mpim** (aka multiparty im/group im)
- **exclude\_archive**
  - Exclude archived channels from being shown to your users. By default, this is excluded. To include archived channels, change the value to **false**



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/a3iXJJ83KaqSjdty965hC_image.png" size="46" width="544" height="886" caption="Image: channel type and archive setting" position="center" showCaption="true"}



### Send DM to User in workspace

You can send a direct message for the authorized user to any of the users in the Slack workspace. To do this, you will first need to fetch the list of users for your customer to choose from.&#x20;



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/j8j92Irmec0UVabonJYTb_image.png" size="82" width="1118" height="946" caption="Image: Select team member" position="center" showCaption="true"}



Next, add a button to Send the message (you can customize the button to dynamically pick up the name from the previous dropdown selection):&#x20;



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/VNXszuhfOegRT4xEPMgqc_image.png" size="82" width="1095" height="1000" caption="Image: Send message button" position="center" showCaption="true"}



Finally, add a workflow to trigger when the Send button is clicked. Replace the **channel&#x20;**&#x66;ield to dynamically pick up the ID from the **Select team member** Dropdown:



![](https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/c5mPcl52GnwUAjIcu8Fji_image.png "Image: Send dm to users workflow")





### Video Walkthrough

See how you can add Slackbot functionality to your Bubble app (note: we are constantly adding APIs to the plugin based on requests and modify them depending on the provider, due to which the video may not include all APIs and actions).



::embed[]{url="https://youtu.be/UBy_yVcUO3M"}



### Whitelabel

The plugin works with a *Pathfix ClientID and ClientSecret*. This means that when your user goes through the OAuth process to grant access, they will see the request **by Pathfix**.&#x20;

You can use your own ClientID and ClientSecret in the plugin and whitelabel it.&#x20;

Follow this document to [Whitelabel Your Connectors](docId\:ocSQR2_7_pK9DoES9TueU)&#x20;



### Works with

Bubble.io



