🚸 Rename "webhook" block to "HTTP request"

apps/builder/src/features/blocks/integrations/makeCom/components/MakeComSettings.tsx

@@ -1,8 +1,8 @@
 import { Alert, AlertIcon, Button, Link, Stack, Text } from '@chakra-ui/react'
 import { ExternalLinkIcon } from '@/components/icons'
-import { MakeComBlock, Webhook } from '@typebot.io/schemas'
+import { MakeComBlock, HttpRequest } from '@typebot.io/schemas'
 import React from 'react'
-import { WebhookAdvancedConfigForm } from '../../webhook/components/WebhookAdvancedConfigForm'
+import { HttpRequestAdvancedConfigForm } from '../../webhook/components/HttpRequestAdvancedConfigForm'
 
 type Props = {
   block: MakeComBlock
@@ -13,7 +13,7 @@ export const MakeComSettings = ({
   block: { id: blockId, options },
   onOptionsChange,
 }: Props) => {
-  const setLocalWebhook = async (newLocalWebhook: Webhook) => {
+  const setLocalWebhook = async (newLocalWebhook: HttpRequest) => {
     onOptionsChange({
       ...options,
       webhook: newLocalWebhook,
@@ -42,7 +42,7 @@ export const MakeComSettings = ({
           </Stack>
         )}
       </Alert>
-      <WebhookAdvancedConfigForm
+      <HttpRequestAdvancedConfigForm
         blockId={blockId}
         webhook={options?.webhook}
         options={options}

apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectSettings.tsx

@@ -1,8 +1,8 @@
 import { Alert, AlertIcon, Button, Link, Stack, Text } from '@chakra-ui/react'
 import { ExternalLinkIcon } from '@/components/icons'
-import { PabblyConnectBlock, Webhook } from '@typebot.io/schemas'
+import { PabblyConnectBlock, HttpRequest } from '@typebot.io/schemas'
 import React from 'react'
-import { WebhookAdvancedConfigForm } from '../../webhook/components/WebhookAdvancedConfigForm'
+import { HttpRequestAdvancedConfigForm } from '../../webhook/components/HttpRequestAdvancedConfigForm'
 import { TextInput } from '@/components/inputs'
 
 type Props = {
@@ -14,7 +14,7 @@ export const PabblyConnectSettings = ({
   block: { id: blockId, options },
   onOptionsChange,
 }: Props) => {
-  const setLocalWebhook = async (newLocalWebhook: Webhook) => {
+  const setLocalWebhook = async (newLocalWebhook: HttpRequest) => {
     onOptionsChange({
       ...options,
       webhook: newLocalWebhook,
@@ -54,7 +54,7 @@ export const PabblyConnectSettings = ({
         withVariableButton={false}
         debounceTimeout={0}
       />
-      <WebhookAdvancedConfigForm
+      <HttpRequestAdvancedConfigForm
         blockId={blockId}
         webhook={options?.webhook}
         options={options}

apps/builder/src/features/blocks/integrations/webhook/api/subscribeWebhook.ts

@@ -2,7 +2,7 @@ import prisma from '@typebot.io/lib/prisma'
 import { canWriteTypebots } from '@/helpers/databaseRules'
 import { authenticatedProcedure } from '@/helpers/server/trpc'
 import { TRPCError } from '@trpc/server'
-import { Block, WebhookBlock, parseGroups } from '@typebot.io/schemas'
+import { Block, HttpRequestBlock, parseGroups } from '@typebot.io/schemas'
 import { byId, isWebhookBlock } from '@typebot.io/lib'
 import { z } from 'zod'
 
@@ -47,7 +47,7 @@ export const subscribeWebhook = authenticatedProcedure
 
     const webhookBlock = groups
       .flatMap<Block>((g) => g.blocks)
-      .find(byId(blockId)) as WebhookBlock | null
+      .find(byId(blockId)) as HttpRequestBlock | null
 
     if (!webhookBlock || !isWebhookBlock(webhookBlock))
       throw new TRPCError({

apps/builder/src/features/blocks/integrations/webhook/api/unsubscribeWebhook.ts

@@ -2,7 +2,7 @@ import prisma from '@typebot.io/lib/prisma'
 import { canWriteTypebots } from '@/helpers/databaseRules'
 import { authenticatedProcedure } from '@/helpers/server/trpc'
 import { TRPCError } from '@trpc/server'
-import { Block, WebhookBlock, parseGroups } from '@typebot.io/schemas'
+import { Block, HttpRequestBlock, parseGroups } from '@typebot.io/schemas'
 import { byId, isWebhookBlock } from '@typebot.io/lib'
 import { z } from 'zod'
 
@@ -46,7 +46,7 @@ export const unsubscribeWebhook = authenticatedProcedure
 
     const webhookBlock = groups
       .flatMap<Block>((g) => g.blocks)
-      .find(byId(blockId)) as WebhookBlock | null
+      .find(byId(blockId)) as HttpRequestBlock | null
 
     if (!webhookBlock || !isWebhookBlock(webhookBlock))
       throw new TRPCError({

apps/builder/src/features/blocks/integrations/webhook/components/WebhookAdvancedConfigForm.tsx → apps/builder/src/features/blocks/integrations/webhook/components/HttpRequestAdvancedConfigForm.tsx

@@ -19,8 +19,8 @@ import {
   KeyValue,
   VariableForTest,
   ResponseVariableMapping,
-  Webhook,
-  WebhookBlock,
+  HttpRequest,
+  HttpRequestBlock,
 } from '@typebot.io/schemas'
 import { useState, useMemo } from 'react'
 import { executeWebhook } from '../queries/executeWebhookQuery'
@@ -41,13 +41,13 @@ import { NumberInput } from '@/components/inputs'
 
 type Props = {
   blockId: string
-  webhook: Webhook | undefined
-  options: WebhookBlock['options']
-  onWebhookChange: (webhook: Webhook) => void
-  onOptionsChange: (options: WebhookBlock['options']) => void
+  webhook: HttpRequest | undefined
+  options: HttpRequestBlock['options']
+  onWebhookChange: (webhook: HttpRequest) => void
+  onOptionsChange: (options: HttpRequestBlock['options']) => void
 }
 
-export const WebhookAdvancedConfigForm = ({
+export const HttpRequestAdvancedConfigForm = ({
   blockId,
   webhook,
   options,

apps/builder/src/features/blocks/integrations/webhook/components/WebhookContent.tsx → apps/builder/src/features/blocks/integrations/webhook/components/HttpRequestContent.tsx

@@ -1,10 +1,10 @@
 import { Stack, Text } from '@chakra-ui/react'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { WebhookBlock } from '@typebot.io/schemas'
+import { HttpRequestBlock } from '@typebot.io/schemas'
 import { SetVariableLabel } from '@/components/SetVariableLabel'
 
 type Props = {
-  block: WebhookBlock
+  block: HttpRequestBlock
 }
 
 export const WebhookContent = ({ block: { options } }: Props) => {

apps/builder/src/features/blocks/integrations/webhook/components/HttpRequestIcon.tsx

@@ -0,0 +1,5 @@
+import { WebhookIcon } from '@/components/icons'
+import { IconProps } from '@chakra-ui/react'
+import React from 'react'
+
+export const HttpRequestIcon = (props: IconProps) => <WebhookIcon {...props} />

apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings.tsx → apps/builder/src/features/blocks/integrations/webhook/components/HttpRequestSettings.tsx

@@ -1,19 +1,19 @@
 import React from 'react'
 import { Stack } from '@chakra-ui/react'
-import { Webhook, WebhookBlock } from '@typebot.io/schemas'
+import { HttpRequest, HttpRequestBlock } from '@typebot.io/schemas'
 import { TextInput } from '@/components/inputs'
-import { WebhookAdvancedConfigForm } from './WebhookAdvancedConfigForm'
+import { HttpRequestAdvancedConfigForm } from './HttpRequestAdvancedConfigForm'
 
 type Props = {
-  block: WebhookBlock
-  onOptionsChange: (options: WebhookBlock['options']) => void
+  block: HttpRequestBlock
+  onOptionsChange: (options: HttpRequestBlock['options']) => void
 }
 
-export const WebhookSettings = ({
+export const HttpRequestSettings = ({
   block: { id: blockId, options },
   onOptionsChange,
 }: Props) => {
-  const setLocalWebhook = async (newLocalWebhook: Webhook) => {
+  const setLocalWebhook = async (newLocalWebhook: HttpRequest) => {
     onOptionsChange({ ...options, webhook: newLocalWebhook })
   }
 
@@ -24,11 +24,11 @@ export const WebhookSettings = ({
   return (
     <Stack spacing={4}>
       <TextInput
-        placeholder="Paste webhook URL..."
+        placeholder="Paste URL..."
         defaultValue={options?.webhook?.url}
         onChange={updateUrl}
       />
-      <WebhookAdvancedConfigForm
+      <HttpRequestAdvancedConfigForm
         blockId={blockId}
         webhook={options?.webhook}
         options={options}

apps/builder/src/features/blocks/integrations/webhook/queries/executeWebhookQuery.ts

@@ -1,4 +1,4 @@
-import { Variable, WebhookResponse } from '@typebot.io/schemas'
+import { Variable, HttpResponse } from '@typebot.io/schemas'
 import { sendRequest } from '@typebot.io/lib'
 import { env } from '@typebot.io/env'
 
@@ -7,7 +7,7 @@ export const executeWebhook = (
   variables: Variable[],
   { blockId }: { blockId: string }
 ) =>
-  sendRequest<WebhookResponse>({
+  sendRequest<HttpResponse>({
     url: `${env.NEXT_PUBLIC_VIEWER_URL[0]}/api/typebots/${typebotId}/blocks/${blockId}/executeWebhook`,
     method: 'POST',
     body: {

apps/builder/src/features/blocks/integrations/zapier/components/ZapierSettings.tsx

@@ -1,19 +1,19 @@
 import { Alert, AlertIcon, Button, Link, Stack, Text } from '@chakra-ui/react'
 import { ExternalLinkIcon } from '@/components/icons'
-import { Webhook, WebhookBlock, ZapierBlock } from '@typebot.io/schemas'
+import { HttpRequest, HttpRequestBlock, ZapierBlock } from '@typebot.io/schemas'
 import React from 'react'
-import { WebhookAdvancedConfigForm } from '../../webhook/components/WebhookAdvancedConfigForm'
+import { HttpRequestAdvancedConfigForm } from '../../webhook/components/HttpRequestAdvancedConfigForm'
 
 type Props = {
   block: ZapierBlock
-  onOptionsChange: (options: WebhookBlock['options']) => void
+  onOptionsChange: (options: HttpRequestBlock['options']) => void
 }
 
 export const ZapierSettings = ({
   block: { id: blockId, options },
   onOptionsChange,
 }: Props) => {
-  const setLocalWebhook = async (newLocalWebhook: Webhook) => {
+  const setLocalWebhook = async (newLocalWebhook: HttpRequest) => {
     onOptionsChange({
       ...options,
       webhook: newLocalWebhook,
@@ -43,7 +43,7 @@ export const ZapierSettings = ({
           </Stack>
         )}
       </Alert>
-      <WebhookAdvancedConfigForm
+      <HttpRequestAdvancedConfigForm
         blockId={blockId}
         webhook={options?.webhook}
         options={options}

apps/builder/src/features/editor/components/BlockLabel.tsx

@@ -78,7 +78,7 @@ export const BlockLabel = ({ type }: Props): JSX.Element => {
         <Text fontSize="sm">{t('editor.sidebarBlock.analytics.label')}</Text>
       )
     case IntegrationBlockType.WEBHOOK:
-      return <Text fontSize="sm">{t('editor.sidebarBlock.webhook.label')}</Text>
+      return <Text fontSize="sm">HTTP request</Text>
     case IntegrationBlockType.ZAPIER:
       return <Text fontSize="sm">{t('editor.sidebarBlock.zapier.label')}</Text>
     case IntegrationBlockType.MAKE_COM:

apps/builder/src/features/editor/components/BlocksSideBar.tsx

@@ -30,6 +30,7 @@ import { useDebouncedCallback } from 'use-debounce'
 const legacyIntegrationBlocks = [
   IntegrationBlockType.OPEN_AI,
   IntegrationBlockType.ZEMANTIC_AI,
+  IntegrationBlockType.WEBHOOK,
 ]
 
 export const BlocksSideBar = () => {

apps/builder/src/features/editor/providers/typebotActions/blocks.ts

@@ -2,7 +2,7 @@ import {
   Block,
   Typebot,
   BlockIndices,
-  Webhook,
+  HttpRequest,
   BlockV6,
   TypebotV6,
 } from '@typebot.io/schemas'
@@ -26,7 +26,7 @@ export type BlocksActions = {
 }
 
 export type WebhookCallBacks = {
-  onWebhookBlockCreated: (data: Partial<Webhook>) => void
+  onWebhookBlockCreated: (data: Partial<HttpRequest>) => void
   onWebhookBlockDuplicated: (
     existingWebhookId: string,
     newWebhookId: string

apps/builder/src/features/graph/components/nodes/block/BlockNodeContent.tsx

@@ -21,7 +21,7 @@ import { GoogleSheetsNodeContent } from '@/features/blocks/integrations/googleSh
 import { MakeComContent } from '@/features/blocks/integrations/makeCom/components/MakeComContent'
 import { PabblyConnectContent } from '@/features/blocks/integrations/pabbly/components/PabblyConnectContent'
 import { SendEmailContent } from '@/features/blocks/integrations/sendEmail/components/SendEmailContent'
-import { WebhookContent } from '@/features/blocks/integrations/webhook/components/WebhookContent'
+import { WebhookContent } from '@/features/blocks/integrations/webhook/components/HttpRequestContent'
 import { ZapierContent } from '@/features/blocks/integrations/zapier/components/ZapierContent'
 import { RedirectNodeContent } from '@/features/blocks/logic/redirect/components/RedirectNodeContent'
 import { SetVariableContent } from '@/features/blocks/logic/setVariable/components/SetVariableContent'

apps/builder/src/features/graph/components/nodes/block/SettingsPopoverContent.tsx

@@ -23,7 +23,7 @@ import { RatingInputSettings } from '@/features/blocks/inputs/rating/components/
 import { TextInputSettings } from '@/features/blocks/inputs/textInput/components/TextInputSettings'
 import { GoogleAnalyticsSettings } from '@/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsSettings'
 import { SendEmailSettings } from '@/features/blocks/integrations/sendEmail/components/SendEmailSettings'
-import { WebhookSettings } from '@/features/blocks/integrations/webhook/components/WebhookSettings'
+import { HttpRequestSettings } from '@/features/blocks/integrations/webhook/components/HttpRequestSettings'
 import { ZapierSettings } from '@/features/blocks/integrations/zapier/components/ZapierSettings'
 import { RedirectSettings } from '@/features/blocks/logic/redirect/components/RedirectSettings'
 import { SetVariableSettings } from '@/features/blocks/logic/setVariable/components/SetVariableSettings'
@@ -288,7 +288,9 @@ export const BlockSettings = ({
       )
     }
     case IntegrationBlockType.WEBHOOK: {
-      return <WebhookSettings block={block} onOptionsChange={updateOptions} />
+      return (
+        <HttpRequestSettings block={block} onOptionsChange={updateOptions} />
+      )
     }
     case IntegrationBlockType.EMAIL: {
       return (

apps/docs/editor/blocks/integrations/webhook.mdx

@@ -1,34 +1,16 @@
 ---
-title: Webhook / API Request
+title: HTTP Request
 ---
 
 import { LoomVideo } from '/snippets/loom-video.mdx'
 
-The Webhook block allows you to either:
-
-- Call a Webhook URL of a 3rd party service to send information from the bot.
-- Make an API request to a 3rd party service to fetch information and use it in the bot.
-
-## Call a Webhook URL
-
-Your 3rd party service (Make.com, Zapier, etc) is giving you a Webhook URL.
-
-You only have to paste this URL in the Webhook block and click on "Test the request". By default the 3rd party service will receive a snapshot of what the bot could send.
-
-<Frame>
-  <img
-    src="/images/blocks/integrations/webhook/simple-post.png"
-    alt="Simple Webhook POST"
-  />
-</Frame>
-
-You can also decide to customize the request sent to the 3rd party service.
+The HTTP Request block allows you to send an HTTP request to a 3rd party service. This is useful to send information from the bot to another service or to fetch information from another service and use it in the bot.
 
 ## Make an API request and fetch data
 
 This gets more technical as you'll need to know more about HTTP request parameters.
 
-Lots of services offer an API. They also, most likely have an API documentation. Depending on the parameters you are giving the Webhook block, it should return different info from the 3rd party service.
+Lots of services offer an API. They also, most likely have an API documentation. Depending on the parameters you are giving the HTTP request block, it should return different info from the 3rd party service.
 
 ## Custom body
 
@@ -43,9 +25,9 @@ You can set a custom body with your collected variables. Here is a working examp
 
 ### Example with a dummy API: CREATE and GET
 
-This video provides a step-by-step guide to successfully configure webhook blocks in Typebot.
+This video provides a step-by-step guide to successfully configure HTTP request blocks in Typebot.
 
-I demonstrate how to configure the webhook block, including the URL, method, and custom body. I also show you how to test the webhook call and save the newly created employee ID. Finally, I explain how to implement the find employee by ID endpoint and map the employee name to a variable.
+I demonstrate how to configure the HTTP request block, including the URL, method, and custom body. I also show you how to test the request and save the newly created employee ID. Finally, I explain how to implement the find employee by ID endpoint and map the employee name to a variable.
 
 <LoomVideo id="d9aef6a37e0c43759b31be7d69c4dd6d" />
 
@@ -92,6 +74,21 @@ Possibilities are endless when it comes to API calls, you can litteraly call any
 
 Feel free to ask the [community](https://typebot.io/discord) for help if you struggle setting up a Webhook block.
 
+## Call a Webhook URL
+
+Your 3rd party service (Make.com, Zapier, etc) is giving you a Webhook URL.
+
+You only have to paste this URL in the Webhook block and click on "Test the request". By default the 3rd party service will receive a snapshot of what the bot could send.
+
+<Frame>
+  <img
+    src="/images/blocks/integrations/webhook/simple-post.png"
+    alt="Simple Webhook POST"
+  />
+</Frame>
+
+You can also decide to customize the request sent to the 3rd party service.
+
 ## Timeout
 
 By default, the Webhook block will wait 10 seconds for the 3rd party service to respond. If it doesn't respond in time, the block will fail. You can customize this timeout value in the "Advanced params" section of your Webhook block settings.