# Webhook

Webhooks offer a powerful way to automate reactions to specific events on the blockchain, enhancing the functionality and interactivity of applications. In the context of Subs, webhooks can be utilized to monitor subscription events and any custom actions that are pivotal to subscription management and analytics.

<figure><img src="https://1911528868-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMi4ivT4S6SjuAElL2Iuo%2Fuploads%2FkiwbvY4j7dJC5QgsE1Af%2FBlog%20Web3%20Webhooks.png?alt=media&#x26;token=a45ef680-d914-4d36-89f9-ec46524578ec" alt=""><figcaption><p>Blockchain webhook system</p></figcaption></figure>

### What are Webhooks ?

Webhooks, in essence, are automated messages sent from apps when something happens. They have URLs, making them web-accessible for receiving data immediately. Unlike typical APIs where you need to poll for data frequently, webhooks deliver data as it happens, ensuring real-time updates.

### Why Use Webhooks with Subs ?

Integrating webhooks into your Subs-powered application allows for real-time monitoring and handling of subscription lifecycle [events](https://app.gitbook.com/o/2LDgtDSXVsqfC1CZiwUe/s/Mi4ivT4S6SjuAElL2Iuo/~/changes/74/developer-docs/webhook/events), payment confirmations, and any custom blockchain events that you define within your subscription logic. This enables automated workflows, such as:

* **Notifications:** Alerting users or administrators about subscription renewals, cancellations, or payment issues.
* **Analytics:** Gathering data on user interactions and subscription trends for better business insights.
* **Compliance:** Automatically tracking and reporting for regulatory compliance and auditing.
* **Integration:** Seamlessly connecting your Subs data with other tools and services for enhanced functionality.

### Set Up Subs Webhooks with Subs Front

Just click on "Require users email address" and add your webhook url.&#x20;

<figure><img src="https://1911528868-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMi4ivT4S6SjuAElL2Iuo%2Fuploads%2FssplUEJ93iSlZ664QIh3%2FScreenshot%20from%202024-03-18%2008-48-01.png?alt=media&#x26;token=3e2a5bcb-7a69-40c3-aadf-e0ec02e4ed70" alt=""><figcaption><p>Subs webhook config</p></figcaption></figure>

That's all. After each subscription, Subs will send you all the data relating to that subscription :tada::tada::tada:

{% hint style="info" %}
Here is all type of [events](https://app.gitbook.com/o/2LDgtDSXVsqfC1CZiwUe/s/Mi4ivT4S6SjuAElL2Iuo/~/changes/74/developer-docs/webhook/events) data Subs will sent after user subscription, cancellation or other actions.&#x20;
{% endhint %}

### Set Up your own Subs Webhooks with Moralis’ Web3 Streams API

The following sections will illustrate how to set up Subs webhooks using Moralis’ Streams API.

<figure><img src="https://1911528868-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMi4ivT4S6SjuAElL2Iuo%2Fuploads%2F5j1Qjis4jfwG1BAkylmn%2FBlog%20Moralis%20Logo.png?alt=media&#x26;token=7edcb285-bb64-4aa3-aee5-0ce582104614" alt=""><figcaption><p>Moralis</p></figcaption></figure>

You have two options for building your stream and receiving Subs webhooks on supported networks:

* **Programmatically** – The first alternative is to set up streams programmatically through the use of Moralis’ SDK or API - see an example [here](https://moralis.io/web3-webhooks-the-ultimate-guide-to-blockchain-webhooks/)&#x20;
* **Via Moralis’ Admin Panel** – The second alternative is to create streams using Moralis’ web UI. \
  \
  In this tutorial we will only use the second option

#### **Via Moralis’ Admin Panel**

\
Before start creating your stream, login on Moralis [here](https://admin.moralis.io/login)

&#x20;After login, create your stream : <br>

<figure><img src="https://1911528868-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMi4ivT4S6SjuAElL2Iuo%2Fuploads%2FJLUOS0osf6MeG63x3nou%2FScreenshot%20from%202024-02-14%2010-40-31.png?alt=media&#x26;token=52c10b67-83d7-4d8c-90f8-174c9db051d6" alt=""><figcaption><p>Moralis stream page</p></figcaption></figure>

After click on create stream, at the bottom of the page, you will have this view

<figure><img src="https://1911528868-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMi4ivT4S6SjuAElL2Iuo%2Fuploads%2F5v9ZyQHBhQcKV9euJVj3%2FScreenshot%20from%202024-02-14%2010-42-43.png?alt=media&#x26;token=b3a0c59f-5b51-453a-8fb7-791234d0c03b" alt=""><figcaption></figcaption></figure>

#### 1 - **Events**

Here, you'll need to choose what subs event you want to listen as webhook, most of the time it will be for new subscription on your app, but maybe also others. You can see all Subs events abis [here](https://docs.subsprotocol.com/subscription-contracts#events-abi).\
\
In this example we'll use the NewSubscription event, so copy and paste it in custom onglet.\
After that, click on NewSubscription and add your filter with your app ID. You can find your app ID on your app page here for [testnet](https://testnet.subsprotocol.com/#/app/apps) or [mainnet](https://app.subsprotocol.com/#/app/apps).  <br>

{% hint style="info" %}
We recommend you to create two apps on subs before testing your stream because sometimes the filter can have problems and your stream can end up listening to all the apps on Subs :worried:. If you ever encounter this problem, edit your stream and at the bottom of the page, click on Swith to legacy, reconfigure your app in legacy mode, it should work normally.
{% endhint %}

<figure><img src="https://1911528868-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMi4ivT4S6SjuAElL2Iuo%2Fuploads%2FX7BXseyGV7F2TYuulLD4%2FScreenshot%20from%202024-02-14%2010-51-20.png?alt=media&#x26;token=d96c2413-06a7-4f29-8847-1992f47d31e8" alt=""><figcaption><p>Config Moralis with Subs event</p></figcaption></figure>

#### 2 - Add Stream tag

Tag is just a way for you to identify your stream. After adding your tag, click continue.

<figure><img src="https://1911528868-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMi4ivT4S6SjuAElL2Iuo%2Fuploads%2FL5QMrwv6VZ0JOKSzxnvh%2FScreenshot%20from%202024-02-14%2011-09-55.png?alt=media&#x26;token=8f024aa4-5a89-487d-90fa-236f9ca74451" alt=""><figcaption><p>Add stream tag</p></figcaption></figure>

#### 3 - Add Subs Contract address

Here you will need to add Subs contract address, you can find Subs testnet contract addresses [here](https://docs.subsprotocol.com/deployments)[ ](https://docs.subsprotocol.com/deployments/testnets)and for mainnet [here](https://docs.subsprotocol.com/deployments/mainnets) . Be sure to take your supported chain contract address. After copy and paste it, click to continue.

<figure><img src="https://1911528868-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMi4ivT4S6SjuAElL2Iuo%2Fuploads%2F51BgSHbHF19USpCtnw69%2FScreenshot%20from%202024-02-14%2011-12-00.png?alt=media&#x26;token=8ed0d106-1963-4f75-bc29-62a09895f238" alt=""><figcaption><p>Paste Subs CA</p></figcaption></figure>

#### &#x20;4 - Choose chain

Choose the chains you have your subs apps on and continue

<figure><img src="https://1911528868-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMi4ivT4S6SjuAElL2Iuo%2Fuploads%2FSo1ySsc8OTApz0zpETXg%2FScreenshot%20from%202024-02-14%2011-23-26.png?alt=media&#x26;token=ef0a4f2c-98a3-4e85-80e0-9312cb032d3f" alt=""><figcaption><p>Choose chain</p></figcaption></figure>

#### 5 - Test your stream&#x20;

Click on **Live blocks** and **Launch Live Blocks** , after that, subscribe to your app on Subs page to see if your stream work, if yes, you will have a response in the live playground if not, the playground will be empty. Don't forget to test your filter by testing a not filtered app and your filtered app.

<figure><img src="https://1911528868-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMi4ivT4S6SjuAElL2Iuo%2Fuploads%2FxWZUoBIsC2hDGTF9KIu8%2FScreenshot%20from%202024-02-14%2011-28-21.png?alt=media&#x26;token=b89cf9c8-14fc-4206-afa0-1d0df785c43a" alt=""><figcaption><p>Test the stream</p></figcaption></figure>

#### 6 - Deploy your stream

Recommend you to test it fast with [webhook-site](https://webhook.site/#!/view/cff5a147-5bf0-406e-b4a6-3f5555ffd7bc). Copy and paste your unique url. Click verify and after deploy your stream. After testing with webhook-site, you can edit the stream to change the webhook and work with yours.

<figure><img src="https://1911528868-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMi4ivT4S6SjuAElL2Iuo%2Fuploads%2FMiRzIuAzqfoyMFY246UT%2FScreenshot%20from%202024-02-14%2011-35-35.png?alt=media&#x26;token=2a38d882-9712-4e8c-91c4-acac66f843ca" alt=""><figcaption><p>Verify and deploy</p></figcaption></figure>

{% hint style="info" %}
Also notice that Moralis will send you two notifs per block, read more [here](https://docs.moralis.io/streams-api/evm/webhooks-transactions#two-webhooks-for-each-block)&#x20;
{% endhint %}

That's all, you've just set up your subs webhook  with moralis :tada::tada::tada:

### Just listen&#x20;

Maybe you want to have your own in-house solution and not depend on a third-party service. You can just listen to the subs contract to see what's going on and make action.\
Here is an sample code to listen and make action when user subscribe to your app  with ethersjs.

* Add your chain rpc url&#x20;
* Add subs contract address
* Add the app ID for filter your app

<pre class="language-javascript"><code class="lang-javascript">import { ethers } from 'ethers';
// Event ABI
<strong>let eventABI = [
</strong>    {
        "name": "NewSubscription",
        "type": "event",
        "anonymous": false,
        "inputs": [
            {
                "type": "address",
                "name": "subscriber",
                "indexed": false
            },
            {
                "type": "uint256",
                "name": "appId",
                "indexed": true
            },
            {
                "type": "bytes32",
                "name": "subscriptionId",
                "indexed": false
            }
        ]
    }
];
// Build subs contract with ethersjs
const provider = new ethers.JsonRpcProvider("YOUR_CHAIN_RPC_URL");
const contract = new ethers.Contract(
    "SUBS_CONTRACT_ADDRESS",
    eventABI,
    provider
);
 // Add your filter to listen only your app
const filter = contract.filters.NewSubscription(null, YOUR_APP_ID, null)
// Listen
console.log("Listening for NewSubscription events...");
contract.on(filter, async (event, appId, subscriptionId, subscriber) => {
    let datas = {
        subscriber: event.args[0],
        appId: event.args[1],
        subscriptionId: event.args[2],
    };
    console.log("We got it", datas);
    // Your action

});
</code></pre>

Thanks for your reading, see you :tada::tada::tada:
