formbricks/apps/docs/app/developer-docs/integrations/slack/page.mdx

import { MdxImage } from "@/components/MdxImage";

import AddSlackBot1 from "./images/add-slack-bot-1.webp";
import AddSlackBot2 from "./images/add-slack-bot-2.webp";
import AddSlackBot3 from "./images/add-slack-bot-3.webp";
import AddSlackBot4 from "./images/add-slack-bot-4.webp";
import ConnectWithSlack from "./images/connect-with-slack.webp";
import DeleteConnection from "./images/delete-connection.webp";
import IntegrationsTab from "./images/integrations-tab.webp";
import LinkSurveyWithChannel from "./images/link-survey-with-channel.webp";
import LinkWithQuestions from "./images/link-with-questions.webp";
import ListLinkedSurveys from "./images/list-linked-surveys.webp";
import SlackAuth from "./images/slack-auth.webp";
import SlackConnected from "./images/slack-connected.webp";

export const metadata = {
  title: "Slack",
  description:
    "The slack integration allows you to automatically send responses to a Slack channel of your choice.",
};

#### Integrations

# Slack

The slack integration allows you to automatically send responses to a Slack channel of your choice.

<Note>
  If you are on a self-hosted instance, you will need to configure this integration separately. Please follow
  the guides [here](/self-hosting/integrations) to configure integrations on your self-hosted instance.
</Note>

## Formbricks Cloud

1. Go to the Integrations tab in your [Formbricks Cloud dashboard](https://app.formbricks.com/) and click on the "Connect" button under Slack integration.

<MdxImage
  src={IntegrationsTab}
  alt="Formbricks Integrations Tab"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

2. Now click on the "Connect with Slack" button to authenticate yourself with Slack.

<MdxImage
  src={ConnectWithSlack}
  alt="Connect Formbricks with your Slack Workspace"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

3. You will now be taken to the Slack OAuth page where you can select the Slack channel you want to link with Formbricks and click on the "Allow" button.

<MdxImage
  src={SlackAuth}
  alt="Slack OAuth Page"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

4. Once you have selected the account and completed the authentication process, you will be taken back to Formbricks Cloud and see the connected status as below:

<MdxImage
  src={SlackConnected}
  alt="Formbricks is now connected with Slack"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

<Note>
  Before the next step, make sure that you have a Formbricks Survey with at least one question and a Slack
  channel in the Slack workspace you integrated.
</Note>

5. In order to make your channel available in channel dropdown, you need to add formbricks integration bot to the channel you want to link. You can do this by going to channel settings -> Integrations -> Add apps -> Search for "Formbricks" -> Select the bot -> Add.

<MdxImage
  src={AddSlackBot1}
  alt="Click on three dot at top right of the channel"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>
<MdxImage
  src={AddSlackBot2}
  alt="Select Edit Settings"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>
<MdxImage
  src={AddSlackBot3}
  alt="Navigate to Integrations"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>
<MdxImage
  src={AddSlackBot4}
  alt="Add Formbricks Bot"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

6. Now click on the "Link channel" button to link a Slack channel with Formbricks and a modal will open up.

<MdxImage
  src={LinkSurveyWithChannel}
  alt="Link Formbricks with a Slack Channel"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

7. Select the channel you want to link with Formbricks and the Survey. On doing so, you will be asked to select the questions' responses you want to feed in the Slack channel. Select the questions and click on the "Link Channel" button.

<MdxImage
  src={LinkWithQuestions}
  alt="Select question to link with Slack Channel"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

8. On submitting, the modal will close and you will see the linked Slack channel in the list of linked Slack channels.

<MdxImage
  src={ListLinkedSurveys}
  alt="List of linked Slack Channels"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

Congratulations! You have successfully linked a Slack channel with Formbricks. Now whenever a response is submitted for the linked survey, it will be automatically sent to the linked Slack channel.

## Setup in self-hosted Formbricks

Enabling the Slack Integration in a self-hosted environment requires a setup using slack workspace account and changing the environment variables of your Formbricks instance.

<Note>
  If you are running Formbricks locally:
  
  You need to use `https` instead of `http` for the redirect URI. 
  - You can update the `go` script in your `apps/web/package.json` to include the `--experimental-https` flag. The
  command will look like: <br />
    ```bash
      "go": next dev --experimental-https -p 3000
    ```

- You also need to update the .env file in the `apps/web` directory to include the `WEBAPP_URL` as `https://localhost:3000` instead of `http://localhost:3000`.

- You also need to run the terminal in admin mode to run the `go` script(to acquire the SSL certificate). You can do this by running the terminal as an administrator or using the `sudo` command in Unix-based systems.

</Note>

1. Create a Slack workspace if you don't have one already.
2. Go to the [Your apps](https://api.slack.com/apps) page and **Create New App**.
3. Click on **From Scratch** and provide the **App Name** and select your workspace in **Pick a workspace to develop your app in:** dropdown. Click on **Create App**.
4. Go to the **OAuth & Permissions** tab on the sidebar and add the following **Bot Token Scopes**:

   - `channels:read`
   - `groups:read`
   - `chat:write`
   - `chat:write.public`
   - `chat:write.customize`

5. Add the **Redirect URLs** under **OAuth & Permissions** tab. You can add the following URLs:

   - If you are running formbricks locally, you can enter `https://localhost:3000/api/v1/integrations/slack/callback`.
   - Or, you can enter `https://<your-public-facing-url>/api/v1/integrations/slack/callback`

6. Now, click on **Install to Workspace** and **Allow** the permissions.
7. Go to the **Basic Information** tab on the sidebar and copy the **Client ID** and **Client Secret**. Copy them and set them as the environment variables in your Formbricks instance as:

- `SLACK_CLIENT_ID` - OAuth Client ID
- `SLACK_CLIENT_SECRET` - OAuth Client Secret

8. Now, you need to enable the public distribution of your app. Go to the **Basic Information** tab and click on the **Manage distribution** button and click on the "Distribute App".
9. Scroll down to the **Share your app with other workspaces** section, complete the checklist and click on the **Activate public distribution** button.

### By now, your environment variables should include the below ones:

- `SLACK_CLIENT_ID`
- `SLACK_CLIENT_SECRET`

Voila! You have successfully enabled the Slack integration in your self-hosted Formbricks instance. Now you can follow the steps mentioned in the [Formbricks Cloud](#formbricks-cloud) section to link a Slack workspace with Formbricks.

## Remove Integration with Slack Workspace

To remove the integration with Slack Workspace,

1. Visit the Integrations tab in your Formbricks Cloud dashboard.
2. Select "Manage" button in the Slack card.
3. Click on the "Delete Integration" button.
4. It will now ask for a confirmation to remove the integration. Click on the "Delete" button to remove the integration. You can always come back and connect again with the same Slack Workspace.

<MdxImage
  src={DeleteConnection}
  alt="Delete Slack Integration with Formbricks"
  quality="100"
  className="max-w-full rounded-lg sm:max-w-3xl"
/>

Still struggling or something not working as expected? [Join our Github Discussions](https://github.com/formbricks/formbricks/discussions) and we'd be glad to assist you!