Webhooks
Streamlabs Integration

Streamlabs Integration

Streamlabs bietet eine Schnittstelle (API) für eingehende Spenden von Drittanbietern an - zum Beispiel von ImproFans. D.h. Spenden, die über ImproFans getätigt werden, können auch live über Streamlabs angezeigt werden.

Im Folgenden wird gezeigt, wie man über verschiedene Plattformen unseren Webhook einrichtet.

Via Pipedream

Pipedream ist eine (kostenlose) Plattform zur Automatisierung von Web-Events, die es dir ermöglicht, ohne großen Aufwand unsere Webhooks für Spendenbenachrichtigungen empfangen und an Streamlabs weiterzugeben.

  1. Logge dich bei Pipedream ein und öffne die Projektübersicht.
  2. Erstelle einen neuen Workflow, indem du oben rechts auf New Workflow klickst: image
  3. Gib einen Namen für das Projekt des Workflows an (bspw. ImproFans Webhook) und klicke auf Create project and continue: image
    ℹ️
    Ein Pipedream-Projekt kann mehrere Workflows enthalten.
  4. Gib nun einen Namen für den eigentlichen Workflow an (bspw. Streamlabs) und klicke auf Create Workflow: image
  5. Füg’ nun einen Trigger für den Webhook hinzu. Der Trigger gibt dir den Webhook-Link, den du später bei ImproFans hinzufügen musst. Klicke dazu auf den blauen Add Trigger-Button: image
  6. Wähle hierzu HTTP / Webhook aus: image
  7. … und danach New Requests: image
  8. Bestätige das Hinzufügen des Triggers, indem du auf Save and continue klickst: image
  9. Kopiere nun den Link in der rot markierten Box: image
  10. Logge dich in deinen ImproFans-Account ein und öffne die Webhook-Übersicht. Füge den Link vom vorherigen Schritt nun hier ein und drücke anschließend auf Webhook hinzufügen: image
  11. Zurück zu Pipedream. Klicke auf das +-Symbol, um eine neue Action hinzuzufügen - in diesem Falle den Code für die StreamElements-Verknüpfung: image
  12. Gib hierzu in der Suche für Actions Streamlabs (1) ein, drücke die Eingabetaste und klicke anschließend auf den Button Streamlabs (2): image
  13. Danach klickst du auf den Button Use any Streamlabs API in Node.js: image
  14. Vergib für die Action Namens streamlabs einen neuen Namen, indem du draufklickst. Benenne die Action in streamlabs_tip um: image
  15. Lösche den vorhandenen Standardcode aus dem Textfeld (rotes Rechteck im Bild) und füge dort anschließend den Code unter dem Bild ein: image
    import axios from "axios"

export default defineComponent({
  props: {
    streamlabs: {
      type: "app",
      app: "streamlabs",
    }
  },
  async run({steps, $}) {
    return await axios.post(
      `https://streamlabs.com/api/v1.0/donations`, // v1.0 vs v2.0 API endpoint uses different authentication system
      {
        name: steps.trigger.event.body.data.name ?? 'Anonymous',
        message: steps.trigger.event.body.data.message,
        identifier: steps.trigger.event.body.data.donor_id ?? '00000000-0000-0000-0000-000000000000',
        amount: steps.trigger.event.body.data.amount,
        currency: steps.trigger.event.body.data.currency,
        skip_alert: "no",
        access_token: this.streamlabs.$auth.oauth_access_token
      }
    );
  },
})
  16. Verbinde nun dein Streamlabs-Konto mit Pipedream, indem du das Menü Connect a Streamlabs account öffnest und auf Connect new account klickst. Danach öffnet sich ein separates Fenster indem du dazu aufgefordert wirst, dich bei Streamlabs anzumelden und Pipedream Zugriff auf die Streamlabs API deines Streamlabs-Kontos zu geben: image
  17. Klicke nun auf Deploy, um den Workflow zu starten, sodass du unsere Webhook-Events empfangen kannst: image

Jetzt bist du startklar, um Spendenbenachrichtigungen bei Streamlabs zu empfangen.

StreamElements Integration