← wszystkie artykuły
// artykuł

Webhook od strony WWW do Slacka – jak zrobić

2026-04-27

Webhook od strony WWW do Slacka – jak zrobić? TL;DR

Chcesz, żeby Twoja strona WWW „rozmawiała” ze Slackiem? Da się to zrobić za pomocą tzw. webhooka. W skrócie: strona internetowa wysyła specjalnie sformatowaną wiadomość (najczęściej JSON) na unikalny adres URL Slacka, a ten publikuje ją w wybranym kanale. To proste, choć wymaga odrobiny konfiguracji i kodu.

Zapomnij o chaotycznych mailach z powiadomieniami. Wyobraź sobie, że każde nowe zamówienie na Allegro, wiadomość z formularza kontaktowego, a nawet krytyczny błąd na stronie, natychmiast trafia jako czytelna wiadomość do odpowiedniego kanału na Slacku. Zamiast przekopywać się przez skrzynkę pocztową, masz wszystko w jednym miejscu, dostępne dla Twojego zespołu. Brzmi dobrze? To czytaj dalej.

Czym jest webhook i dlaczego warto integrować go ze Slackiem?

Webhook to mechanizm, który pozwala aplikacjom komunikować się ze sobą w czasie rzeczywistym. Można go wyobrazić sobie jako telefoniczny dzwonek: kiedy wydarzy się coś ważnego (np. ktoś wypełni formularz na stronie), Twoja strona „dzwoni” do Slacka, przekazując mu odpowiednie dane.

Integracja strony WWW ze Slackiem za pomocą webhooków to strzał w dziesiątkę dla każdego, kto ceni sobie sprawną komunikację i automatyzację. Niezależnie od tego, czy prowadzisz mały sklep internetowy, zarządzasz zespołem freelancerów, czy rozwijasz startup, szybki dostęp do kluczowych informacji jest bezcenny. Pozwala to na:

Jak przygotować Slacka na przyjęcie danych z WWW?

Zanim Twoja strona zacznie wysyłać wiadomości, musisz przygotować Slacka, by był w stanie je odebrać. Do tego służy funkcja Incoming Webhooks.

Krok 1: Utwórz aplikację Slacka (lub dodaj funkcję do istniejącej)

  1. Przejdź na stronę api.slack.com/apps i kliknij „Create New App”. Możesz też wybrać „From an app manifest” lub dodać funkcję do istniejącej aplikacji, jeśli taką już posiadasz.
  2. Wybierz „From scratch”. Podaj nazwę aplikacji (np. „Powiadomienia ze Strony”) i wybierz swój obszar roboczy Slacka.

Krok 2: Aktywuj Incoming Webhooks

  1. Po utworzeniu aplikacji, w panelu nawigacyjnym po lewej stronie znajdź sekcję „Features” i wybierz „Incoming Webhooks”.
  2. Przełącz opcję „Activate Incoming Webhooks” na „On”.
  3. Przewiń stronę w dół i kliknij „Add New Webhook to Workspace”.
  4. Zostaniesz poproszony o wybranie kanału, do którego będą trafiać powiadomienia. Wybierz odpowiedni kanał (np. #zamowienia, #kontakt, #bledy) i kliknij „Allow”.

Krok 3: Skopiuj adres URL Webhooka

Po dodaniu webhooka do obszaru roboczego, zobaczysz unikalny adres URL. Będzie on wyglądał mniej więcej tak: https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX.

To jest klucz do Twojej integracji! Skopiuj ten adres i przechowuj go bezpiecznie. Nigdy, ale to przenigdy, nie umieszczaj go bezpośrednio w kodzie frontendowym (HTML/JavaScript) swojej strony.

Co strona WWW musi wysłać do Slacka? (Format danych)

Slack oczekuje, że dane zostaną przesłane w formacie JSON (JavaScript Object Notation). Najprostsza wiadomość to po prostu tekst, ale możesz też wysyłać znacznie bogatsze komunikaty, używając tzw. blocks.

Podstawowa wiadomość tekstowa

Minimalna struktura JSON wygląda tak:

{
  "text": "Witajcie! To jest wiadomość z mojej strony WWW."
}

Taki komunikat spowoduje, że w wybranym kanale Slacka pojawi się tekst „Witajcie! To jest wiadomość z mojej strony WWW.”.

Bogatsze wiadomości z użyciem Blocks

Slack Blocks to potężne narzędzie do tworzenia wizualnie atrakcyjnych i funkcjonalnych wiadomości. Pozwalają na dodawanie nagłówków, pól z danymi, przycisków, obrazków i wiele innych.

Przykład wiadomości o nowym zamówieniu:

{
  "blocks": [
    {
      "type": "header",
      "text": {
        "type": "plain_text",
        "text": "🔔 Nowe zamówienie w sklepie!",
        "emoji": true
      }
    },
    {
      "type": "section",
      "fields": [
        {
          "type": "mrkdwn",
          "text": "*Numer zamówienia:*
#12345"
        },
        {
          "type": "mrkdwn",
          "text": "*Kwota:*
123.45 PLN"
        },
        {
          "type": "mrkdwn",
          "text": "*Klient:*
Jan Kowalski"
        },
        {
          "type": "mrkdwn",
          "text": "*Email:*
[email protected]"
        }
      ]
    },
    {
      "type": "actions",
      "elements": [
        {
          "type": "button",
          "text": {
            "type": "plain_text",
            "text": "Zobacz zamówienie",
            "emoji": true
          },
          "style": "primary",
          "url": "https://twojasklep.pl/admin/zamowienie/12345"
        }
      ]
    }
  ]
}

Więcej o Slack Blocks możesz znaleźć w oficjalnej dokumentacji Block Kit.

Jak strona WWW wysyła dane do Slacka? (Implementacja techniczna)

Teraz przejdźmy do części, w której Twoja strona faktycznie wykonuje robotę.

Ważna uwaga bezpieczeństwa: Backend przede wszystkim!

Jak wspomnieliśmy wcześniej, nigdy nie umieszczaj adresu URL webhooka Slacka bezpośrednio w kodzie JavaScript po stronie klienta (frontendzie). Dlaczego? Ponieważ każdy, kto odwiedzi Twoją stronę, mógłby go zobaczyć i użyć do spamowania Twojego kanału Slacka, a w skrajnych przypadkach nawet do ataków DDoS.

Prawidłowe podejście to wysyłanie danych z przeglądarki do Twojego własnego serwera (backendu), a dopiero stamtąd, bezpiecznie, do Slacka. Twój backend działa jako pośrednik i strażnik.

Przykład implementacji (PHP)

Załóżmy, że masz formularz kontaktowy. Kiedy użytkownik go wypełnia i wysyła, dane trafiają do skryptu PHP na Twoim serwerze. Ten skrypt przetwarza dane i wysyła je do Slacka.

<?php

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Odbierz dane z formularza (upewnij się, że są walidowane i czyszczone!)
    $name = filter_input(INPUT_POST, 'name', FILTER_SANITIZE_STRING);
    $email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL);
    $message = filter_input(INPUT_POST, 'message', FILTER_SANITIZE_STRING);

    // Adres URL webhooka Slacka (powinien być przechowywany bezpiecznie, np. w zmiennych środowiskowych!)
    $slackWebhookUrl = 'https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX';

    // Przygotuj payload JSON dla Slacka
    $slackMessage = [
        'blocks' => [
            [
                'type' => 'header',
                'text' => [
                    'type' => 'plain_text',
                    'text' => '📧 Nowa wiadomość z formularza kontaktowego!',
                    'emoji' => true
                ]
            ],
            [
                'type' => 'section',
                'fields' => [
                    [
                        'type' => 'mrkdwn',
                        'text' => "*Imię:*
{$name}"
                    ],
                    [
                        'type' => 'mrkdwn',
                        'text' => "*Email:*
{$email}"
                    ]
                ]
            ],
            [
                'type' => 'section',
                'text' => [
                    'type' => 'mrkdwn',
                    'text' => "*Wiadomość:*
{$message}"
                ]
            ]
        ]
    ];

    $ch = curl_init($slackWebhookUrl);
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($slackMessage));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, [
        'Content-Type: application/json',
        'Content-Length: ' . strlen(json_encode($slackMessage))
    ]);

    $result = curl_exec($ch);
    $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    if ($httpCode === 200) {
        // Sukces! Slack otrzymał wiadomość.
        echo "<p>Wiadomość została wysłana.</p>";
    } else {
        // Błąd wysyłania do Slacka. Zaloguj to!
        error_log("Błąd wysyłania do Slacka: " . $result . " (HTTP Code: " . $httpCode . ")");
        echo "<p>Wystąpił błąd podczas wysyłania wiadomości.</p>";
    }
} else {
    echo "<p>Ta strona obsługuje tylko żądania POST.</p>";
}

?>

Podobne rozwiązania można zaimplementować w Node.js, Pythonie, Ruby czy innych językach backendowych.

Przykładowe scenariusze wykorzystania webhooka WWW do Slacka

Możliwości są praktycznie nieograniczone. Oto kilka praktycznych przykładów, które często implementujemy w SISL:

Takie rozwiązania, które automatyzują proste, powtarzalne czynności, oszczędzają czas i pieniądze. Zamiast ręcznie sprawdzać maile czy panele administracyjne, masz wszystko na wyciągnięcie ręki.

Dobre praktyki i o czym pamiętać

Aby Twój webhook działał sprawnie i bezproblemowo, warto pamiętać o kilku rzeczach:

W SISL często pomagamy naszym klientom nie tylko w budowie stron, ale i w ich integracji z różnymi zewnętrznymi usługami, w tym ze Slackiem. Wiemy, że sprawne przepływy informacji to podstawa efektywnego działania małej i średniej firmy.

Podsumowanie

Webhook od strony WWW do Slacka to proste i niezwykle skuteczne narzędzie do automatyzacji powiadomień i usprawnienia komunikacji w zespole. Choć wymaga podstawowej wiedzy programistycznej i świadomości kwestii bezpieczeństwa, korzyści płynące z jego wdrożenia szybko się zwracają.

Od natychmiastowych powiadomień o nowych zamówieniach w e-commerce (jak to, co oferuje Allegro czy Pyszne.pl dla swoich partnerów), przez alerty o błędach, aż po zgłoszenia z formularzy – integracja ze Slackiem zmienia sposób pracy. Jeśli czujesz, że takie rozwiązanie mogłoby usprawnić działanie Twojej firmy, ale brakuje Ci czasu lub wiedzy na jego wdrożenie, napisz do nas. Chętnie pomożemy Ci to ogarnąć.

Masz podobny problem?

Boutique studio web devu z Polski — strony, sklepy WooCommerce / Magento, custom aplikacje webowe i landingi. Zobacz nad czym pracowaliśmy.

Zobacz realizacje SISL →

// powiazane artykuly