From bdcb1934c00db407140c5444104b57201e3d430a Mon Sep 17 00:00:00 2001
From: Gabriel Jablonski <gabriel@fazer.ai>
Date: Thu, 13 Nov 2025 04:58:15 -0300
Subject: [PATCH] feat(webhooks): add name to webhook (#12641)

## Description

When working with webhooks, it's easy to lose track of which URL is
which. Adding a `name` (optional) column to the webhook model is a
straight-forward solution to make it significantly easier to identify
webhooks.

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

Model and controller specs, and also running in production over several
months without any issues.

| Before | After |
| --- | --- |
| <img width="949" height="990" alt="image copy 3"
src="https://github.com/user-attachments/assets/6b33c072-7d16-4a9c-a129-f9c0751299f5"
/> | <img width="806" height="941" alt="image"
src="https://github.com/user-attachments/assets/77f3cb3a-2eb0-41ac-95bf-d02915589690"
/> |
| <img width="1231" height="650" alt="image copy 2"
src="https://github.com/user-attachments/assets/583374af-96e0-4436-b026-4ce79b7f9321"
/> | <img width="1252" height="650" alt="image copy"
src="https://github.com/user-attachments/assets/aa81fb31-fd18-4e21-a40e-d8ab0dc76b4e"
/> |


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged and published in downstream
modules
---
 .../api/v1/accounts/webhooks_controller.rb        |  2 +-
 .../dashboard/i18n/locale/en/integrations.json    |  4 ++++
 .../integrations/Webhooks/WebhookForm.vue         | 14 ++++++++++++++
 .../settings/integrations/Webhooks/WebhookRow.vue | 12 ++++++++++--
 app/models/webhook.rb                             |  1 +
 .../v1/accounts/webhooks/_webhook.json.jbuilder   |  1 +
 db/migrate/20251010143218_add_name_to_webhooks.rb |  5 +++++
 db/schema.rb                                      |  1 +
 .../api/v1/accounts/webhook_controller_spec.rb    | 15 +++++++++++++--
 spec/factories/webhooks.rb                        |  1 +
 .../request/webhooks/create_update_payload.yml    |  3 +++
 swagger/definitions/resource/webhook.yml          |  3 +++
 swagger/swagger.json                              |  8 ++++++++
 swagger/tag_groups/application_swagger.json       |  8 ++++++++
 swagger/tag_groups/client_swagger.json            |  8 ++++++++
 swagger/tag_groups/other_swagger.json             |  8 ++++++++
 swagger/tag_groups/platform_swagger.json          |  8 ++++++++
 17 files changed, 97 insertions(+), 5 deletions(-)
 create mode 100644 db/migrate/20251010143218_add_name_to_webhooks.rb

diff --git a/app/controllers/api/v1/accounts/webhooks_controller.rb b/app/controllers/api/v1/accounts/webhooks_controller.rb
index 7ea257ed2..9f8e94821 100644
--- a/app/controllers/api/v1/accounts/webhooks_controller.rb
+++ b/app/controllers/api/v1/accounts/webhooks_controller.rb
@@ -23,7 +23,7 @@ class Api::V1::Accounts::WebhooksController < Api::V1::Accounts::BaseController
   private
 
   def webhook_params
-    params.require(:webhook).permit(:inbox_id, :url, subscriptions: [])
+    params.require(:webhook).permit(:inbox_id, :name, :url, subscriptions: [])
   end
 
   def fetch_webhook
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index 78804220d..f74e674d7 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -46,6 +46,10 @@
             "CONVERSATION_TYPING_OFF": "Conversation Typing Off"
           }
         },
+        "NAME": {
+          "LABEL": "Webhook Name",
+          "PLACEHOLDER": "Enter the name of the webhook"
+        },
         "END_POINT": {
           "LABEL": "Webhook URL",
           "PLACEHOLDER": "Example: {webhookExampleURL}",
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
index 430658329..3f4b31299 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
@@ -55,6 +55,7 @@ export default {
   data() {
     return {
       url: this.value.url || '',
+      name: this.value.name || '',
       subscriptions: this.value.subscriptions || [],
       supportedWebhookEvents: SUPPORTED_WEBHOOK_EVENTS,
     };
@@ -68,11 +69,15 @@ export default {
         }
       );
     },
+    webhookNameInputPlaceholder() {
+      return this.$t('INTEGRATION_SETTINGS.WEBHOOK.FORM.NAME.PLACEHOLDER');
+    },
   },
   methods: {
     onSubmit() {
       this.$emit('submit', {
         url: this.url,
+        name: this.name,
         subscriptions: this.subscriptions,
       });
     },
@@ -97,6 +102,15 @@ export default {
           {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.END_POINT.ERROR') }}
         </span>
       </label>
+      <label>
+        {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.NAME.LABEL') }}
+        <input
+          v-model="name"
+          type="text"
+          name="name"
+          :placeholder="webhookNameInputPlaceholder"
+        />
+      </label>
       <label :class="{ error: v$.url.$error }" class="mb-2">
         {{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.LABEL') }}
       </label>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
index e2bf986e0..3dfb177e5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
@@ -37,8 +37,16 @@ const subscribedEvents = computed(() => {
 <template>
   <tr>
     <td class="py-4 ltr:pr-4 rtl:pl-4">
-      <div class="font-medium break-words text-n-slate-12">
-        {{ webhook.url }}
+      <div class="flex gap-2 font-medium break-words text-n-slate-12">
+        <template v-if="webhook.name">
+          {{ webhook.name }}
+          <span class="text-n-slate-11">
+            {{ webhook.url }}
+          </span>
+        </template>
+        <template v-else>
+          {{ webhook.url }}
+        </template>
       </div>
       <div class="block mt-1 text-sm text-n-slate-11">
         <span class="font-medium">
diff --git a/app/models/webhook.rb b/app/models/webhook.rb
index 105ffdc91..3fafb4354 100644
--- a/app/models/webhook.rb
+++ b/app/models/webhook.rb
@@ -3,6 +3,7 @@
 # Table name: webhooks
 #
 #  id            :bigint           not null, primary key
+#  name          :string
 #  subscriptions :jsonb
 #  url           :string
 #  webhook_type  :integer          default("account_type")
diff --git a/app/views/api/v1/accounts/webhooks/_webhook.json.jbuilder b/app/views/api/v1/accounts/webhooks/_webhook.json.jbuilder
index fac8fdcf2..5406cf183 100644
--- a/app/views/api/v1/accounts/webhooks/_webhook.json.jbuilder
+++ b/app/views/api/v1/accounts/webhooks/_webhook.json.jbuilder
@@ -1,4 +1,5 @@
 json.id webhook.id
+json.name webhook.name
 json.url webhook.url
 json.account_id webhook.account_id
 json.subscriptions webhook.subscriptions
diff --git a/db/migrate/20251010143218_add_name_to_webhooks.rb b/db/migrate/20251010143218_add_name_to_webhooks.rb
new file mode 100644
index 000000000..693ecc35a
--- /dev/null
+++ b/db/migrate/20251010143218_add_name_to_webhooks.rb
@@ -0,0 +1,5 @@
+class AddNameToWebhooks < ActiveRecord::Migration[7.1]
+  def change
+    add_column :webhooks, :name, :string, null: true
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 45165d5c5..0aeea5cc9 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -1230,6 +1230,7 @@ ActiveRecord::Schema[7.1].define(version: 2025_10_22_152158) do
     t.datetime "updated_at", null: false
     t.integer "webhook_type", default: 0
     t.jsonb "subscriptions", default: ["conversation_status_changed", "conversation_updated", "conversation_created", "contact_created", "contact_updated", "message_created", "message_updated", "webwidget_triggered"]
+    t.string "name"
     t.index ["account_id", "url"], name: "index_webhooks_on_account_id_and_url", unique: true
   end
 
diff --git a/spec/controllers/api/v1/accounts/webhook_controller_spec.rb b/spec/controllers/api/v1/accounts/webhook_controller_spec.rb
index 3a68d8921..86f4d4e7e 100644
--- a/spec/controllers/api/v1/accounts/webhook_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/webhook_controller_spec.rb
@@ -3,7 +3,7 @@ require 'rails_helper'
 RSpec.describe 'Webhooks API', type: :request do
   let(:account) { create(:account) }
   let(:inbox) { create(:inbox, account: account) }
-  let(:webhook) { create(:webhook, account: account, inbox: inbox, url: 'https://hello.com') }
+  let(:webhook) { create(:webhook, account: account, inbox: inbox, url: 'https://hello.com', name: 'My Webhook') }
   let(:administrator) { create(:user, account: account, role: :administrator) }
   let(:agent) { create(:user, account: account, role: :agent) }
 
@@ -49,6 +49,16 @@ RSpec.describe 'Webhooks API', type: :request do
         expect(response.parsed_body['payload']['webhook']['url']).to eql 'https://hello.com'
       end
 
+      it 'creates webhook with name' do
+        post "/api/v1/accounts/#{account.id}/webhooks",
+             params: { account_id: account.id, inbox_id: inbox.id, url: 'https://hello.com', name: 'My Webhook' },
+             headers: administrator.create_new_auth_token,
+             as: :json
+        expect(response).to have_http_status(:success)
+
+        expect(response.parsed_body['payload']['webhook']['name']).to eql 'My Webhook'
+      end
+
       it 'throws error when invalid url provided' do
         post "/api/v1/accounts/#{account.id}/webhooks",
              params: { account_id: account.id, inbox_id: inbox.id, url: 'javascript:alert(1)' },
@@ -103,11 +113,12 @@ RSpec.describe 'Webhooks API', type: :request do
     context 'when it is an authenticated admin user' do
       it 'updates webhook' do
         put "/api/v1/accounts/#{account.id}/webhooks/#{webhook.id}",
-            params: { url: 'https://hello.com' },
+            params: { url: 'https://hello.com', name: 'Another Webhook' },
             headers: administrator.create_new_auth_token,
             as: :json
         expect(response).to have_http_status(:success)
         expect(response.parsed_body['payload']['webhook']['url']).to eql 'https://hello.com'
+        expect(response.parsed_body['payload']['webhook']['name']).to eql 'Another Webhook'
       end
     end
   end
diff --git a/spec/factories/webhooks.rb b/spec/factories/webhooks.rb
index 42acc2be6..a4a875c84 100644
--- a/spec/factories/webhooks.rb
+++ b/spec/factories/webhooks.rb
@@ -3,6 +3,7 @@ FactoryBot.define do
     account_id { 1 }
     inbox_id { 1 }
     url { 'https://api.chatwoot.com' }
+    name { 'My Webhook' }
     subscriptions do
       %w[
         conversation_status_changed
diff --git a/swagger/definitions/request/webhooks/create_update_payload.yml b/swagger/definitions/request/webhooks/create_update_payload.yml
index 2f4a718e4..485d532e4 100644
--- a/swagger/definitions/request/webhooks/create_update_payload.yml
+++ b/swagger/definitions/request/webhooks/create_update_payload.yml
@@ -4,6 +4,9 @@ properties:
     type: string
     description: The url where the events should be sent
     example: https://example.com/webhook
+  name:
+    type: string
+    description: The name of the webhook
   subscriptions:
     type: array
     items:
diff --git a/swagger/definitions/resource/webhook.yml b/swagger/definitions/resource/webhook.yml
index a9881b8e4..da5cb112a 100644
--- a/swagger/definitions/resource/webhook.yml
+++ b/swagger/definitions/resource/webhook.yml
@@ -6,6 +6,9 @@ properties:
   url:
     type: string
     description: The url to which the events will be send
+  name:
+    type: string
+    description: The name of the webhook
   subscriptions:
     type: array
     items:
diff --git a/swagger/swagger.json b/swagger/swagger.json
index 7a3e5b02d..8d539c259 100644
--- a/swagger/swagger.json
+++ b/swagger/swagger.json
@@ -9127,6 +9127,10 @@
             "type": "string",
             "description": "The url to which the events will be send"
           },
+          "name": {
+            "type": "string",
+            "description": "The name of the webhook"
+          },
           "subscriptions": {
             "type": "array",
             "items": {
@@ -10706,6 +10710,10 @@
             "description": "The url where the events should be sent",
             "example": "https://example.com/webhook"
           },
+          "name": {
+            "type": "string",
+            "description": "The name of the webhook"
+          },
           "subscriptions": {
             "type": "array",
             "items": {
diff --git a/swagger/tag_groups/application_swagger.json b/swagger/tag_groups/application_swagger.json
index 72902b3b8..2fd0cbdee 100644
--- a/swagger/tag_groups/application_swagger.json
+++ b/swagger/tag_groups/application_swagger.json
@@ -7634,6 +7634,10 @@
             "type": "string",
             "description": "The url to which the events will be send"
           },
+          "name": {
+            "type": "string",
+            "description": "The name of the webhook"
+          },
           "subscriptions": {
             "type": "array",
             "items": {
@@ -9213,6 +9217,10 @@
             "description": "The url where the events should be sent",
             "example": "https://example.com/webhook"
           },
+          "name": {
+            "type": "string",
+            "description": "The name of the webhook"
+          },
           "subscriptions": {
             "type": "array",
             "items": {
diff --git a/swagger/tag_groups/client_swagger.json b/swagger/tag_groups/client_swagger.json
index 6d8b7701d..cf356e609 100644
--- a/swagger/tag_groups/client_swagger.json
+++ b/swagger/tag_groups/client_swagger.json
@@ -1934,6 +1934,10 @@
             "type": "string",
             "description": "The url to which the events will be send"
           },
+          "name": {
+            "type": "string",
+            "description": "The name of the webhook"
+          },
           "subscriptions": {
             "type": "array",
             "items": {
@@ -3513,6 +3517,10 @@
             "description": "The url where the events should be sent",
             "example": "https://example.com/webhook"
           },
+          "name": {
+            "type": "string",
+            "description": "The name of the webhook"
+          },
           "subscriptions": {
             "type": "array",
             "items": {
diff --git a/swagger/tag_groups/other_swagger.json b/swagger/tag_groups/other_swagger.json
index 9e8c57c04..ed1073d0b 100644
--- a/swagger/tag_groups/other_swagger.json
+++ b/swagger/tag_groups/other_swagger.json
@@ -1349,6 +1349,10 @@
             "type": "string",
             "description": "The url to which the events will be send"
           },
+          "name": {
+            "type": "string",
+            "description": "The name of the webhook"
+          },
           "subscriptions": {
             "type": "array",
             "items": {
@@ -2928,6 +2932,10 @@
             "description": "The url where the events should be sent",
             "example": "https://example.com/webhook"
           },
+          "name": {
+            "type": "string",
+            "description": "The name of the webhook"
+          },
           "subscriptions": {
             "type": "array",
             "items": {
diff --git a/swagger/tag_groups/platform_swagger.json b/swagger/tag_groups/platform_swagger.json
index 7c79f1c5b..1bf31a212 100644
--- a/swagger/tag_groups/platform_swagger.json
+++ b/swagger/tag_groups/platform_swagger.json
@@ -2110,6 +2110,10 @@
             "type": "string",
             "description": "The url to which the events will be send"
           },
+          "name": {
+            "type": "string",
+            "description": "The name of the webhook"
+          },
           "subscriptions": {
             "type": "array",
             "items": {
@@ -3689,6 +3693,10 @@
             "description": "The url where the events should be sent",
             "example": "https://example.com/webhook"
           },
+          "name": {
+            "type": "string",
+            "description": "The name of the webhook"
+          },
           "subscriptions": {
             "type": "array",
             "items": {