diff --git a/src/core/client/admin/components/ExperimentalCallOut.css b/src/core/client/admin/components/ExperimentalCallOut.css
new file mode 100644
index 000000000..35b82d4dd
--- /dev/null
+++ b/src/core/client/admin/components/ExperimentalCallOut.css
@@ -0,0 +1,10 @@
+.icon {
+ margin-right: var(--spacing-1);
+}
+
+.title {
+ font-weight: bold;
+ display: block;
+ margin-bottom: 5px;
+}
+
diff --git a/src/core/client/admin/components/ExperimentalCallOut.tsx b/src/core/client/admin/components/ExperimentalCallOut.tsx
new file mode 100644
index 000000000..6eb0c41b7
--- /dev/null
+++ b/src/core/client/admin/components/ExperimentalCallOut.tsx
@@ -0,0 +1,22 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent } from "react";
+
+import { CallOut, Flex, Icon } from "coral-ui/components/v2";
+
+import styles from "./ExperimentalCallOut.css";
+
+const ExperimentalCallOut: FunctionComponent = ({ children }) => (
+
+
+
+ new_releases
+
+
+ Experimental Feature
+
+
+ {children}
+
+);
+
+export default ExperimentalCallOut;
diff --git a/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/AddWebhookEndpoint/AddWebhookEndpointContainer.tsx b/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/AddWebhookEndpoint/AddWebhookEndpointContainer.tsx
index 199910dc2..db77234d0 100644
--- a/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/AddWebhookEndpoint/AddWebhookEndpointContainer.tsx
+++ b/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/AddWebhookEndpoint/AddWebhookEndpointContainer.tsx
@@ -11,6 +11,7 @@ import { HorizontalGutter } from "coral-ui/components/v2";
import { AddWebhookEndpointContainer_settings } from "coral-admin/__generated__/AddWebhookEndpointContainer_settings.graphql";
import { ConfigureWebhookEndpointForm } from "../ConfigureWebhookEndpointForm";
+import ExperimentalWebhooksCallOut from "../ExperimentalWebhooksCallOut";
interface Props {
router: Router;
@@ -28,6 +29,7 @@ const AddWebhookEndpointContainer: FunctionComponent = ({
return (
+
diff --git a/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/ConfigureWebhookEndpoint/ConfigureWebhookEndpointContainer.tsx b/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/ConfigureWebhookEndpoint/ConfigureWebhookEndpointContainer.tsx
index b37fac7aa..2ab52ef1d 100644
--- a/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/ConfigureWebhookEndpoint/ConfigureWebhookEndpointContainer.tsx
+++ b/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/ConfigureWebhookEndpoint/ConfigureWebhookEndpointContainer.tsx
@@ -9,6 +9,7 @@ import { HorizontalGutter } from "coral-ui/components/v2";
import { ConfigureWebhookEndpointContainer_settings } from "coral-admin/__generated__/ConfigureWebhookEndpointContainer_settings.graphql";
import { ConfigureWebhookEndpointContainer_webhookEndpoint } from "coral-admin/__generated__/ConfigureWebhookEndpointContainer_webhookEndpoint.graphql";
+import ExperimentalWebhooksCallOut from "../ExperimentalWebhooksCallOut";
import EndpointDangerZone from "./EndpointDangerZone";
import EndpointDetails from "./EndpointDetails";
import EndpointStatus from "./EndpointStatus";
@@ -24,6 +25,7 @@ const ConfigureWebhookEndpointContainer: FunctionComponent = ({
}) => {
return (
+
diff --git a/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/ExperimentalWebhooksCallOut.tsx b/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/ExperimentalWebhooksCallOut.tsx
new file mode 100644
index 000000000..def0b5ce2
--- /dev/null
+++ b/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/ExperimentalWebhooksCallOut.tsx
@@ -0,0 +1,23 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent } from "react";
+
+import ExperimentalCallOut from "coral-admin/components/ExperimentalCallOut";
+import { ExternalLink } from "coral-framework/lib/i18n/components";
+
+const ExperimentalWebhooksCallOut: FunctionComponent = () => (
+ }
+ >
+
+ The webhook feature is currently in active development. Events may be
+ added or removed. Please{" "}
+
+ contact us with any feedback or requests
+
+ .
+
+
+);
+
+export default ExperimentalWebhooksCallOut;
diff --git a/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/WebhookEndpointsConfigContainer.tsx b/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/WebhookEndpointsConfigContainer.tsx
index 8b718dbc1..edcb111f8 100644
--- a/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/WebhookEndpointsConfigContainer.tsx
+++ b/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/WebhookEndpointsConfigContainer.tsx
@@ -22,6 +22,7 @@ import { WebhookEndpointsConfigContainer_settings } from "coral-admin/__generate
import ConfigBox from "../../ConfigBox";
import Header from "../../Header";
import Subheader from "../../Subheader";
+import ExperimentalWebhooksCallOut from "./ExperimentalWebhooksCallOut";
import WebhookEndpointRow from "./WebhookEndpointRow";
interface Props {
@@ -33,6 +34,7 @@ const WebhookEndpointsConfigContainer: FunctionComponent = ({
}) => {
return (
+