docs: add webhook example (#7565)

* update-trigger-for-parser-component

* switch

* docs: webhook page and sidebars

* docs:sidebars

* cleanup-and-link

* remove-followon-for-now

* Apply suggestions from code review

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>

* Update docs/docs/Develop/webhook.md

---------

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>

docs/docs/Components/components-data.md

@@ -273,11 +273,13 @@ curl -X POST \
 To test the webhook component:
 
 1. Add a **Webhook** component to the flow.
-2. Connect the **Webhook** component's **Data** output to the **Data** input of a [Data to Message](/components-processing#data-to-message) component.
+2. Connect the **Webhook** component's **Data** output to the **Data** input of a [Parser](/components-processing#parser) component.
-3. Connect the **Data to Message** component's **Message** output to the **Text** input of a [Chat Output](/components-io#chat-output) component.
+3. Connect the **Parser** component's **Parsed Text** output to the **Text** input of a [Chat Output](/components-io#chat-output) component.
-4. To send a POST request, copy the code from the **Webhook cURL** tab in the **API** pane and paste it into a terminal.
+4. In the **Parser** component, under **Mode**, select **Stringify**.
-5. Send the POST request.
+This mode passes the webhook's data as a string for the **Chat Output** component to print.
-6. Open the **Playground**.
+5. To send a POST request, copy the code from the **Webhook cURL** tab in the **API** pane and paste it into a terminal.
+6. Send the POST request.
+7. Open the **Playground**.
 Your JSON data is posted to the **Chat Output** component, which indicates that the webhook component is correctly triggering the flow.
 
 ### Inputs

docs/docs/Develop/develop-application.md

@@ -152,6 +152,8 @@ curl --request POST \
 
 If the flow streams the result back to you, your flow is being served, and can be consumed from a front-end application by submitting POST requests to this endpoint.
 
+To trigger your application from an external event, see [Webhook](/webhook).
+
 :::note
 The test application returns a large amount of text, so the example command used `?stream=true`. If you prefer, set `?stream=false` to use batching. For more information, see the [API examples](/api-reference-api-examples#run-flow).
 :::

docs/docs/Develop/webhook.md

@@ -0,0 +1,51 @@
+---
+title: Trigger flows with webhooks
+slug: /webhook
+---
+
+import Icon from "@site/src/components/icon";
+
+Add a **Webhook** component to your flow to trigger it with external requests. 
+
+To connect the **Webhook** to a **Parser** component to view and parse your data payload, do the following:
+
+1. Add a **Webhook** component to your flow.
+2. Add a [Parser](/components-processing#parser) component to your flow.
+3. Connect the **Webhook** component's **Data** output to the **Parser** component's **Data** input.
+4. In the **Template** field of the **Parser** component, enter a template for parsing the **Webhook** component's input into structured text.
+Create variables for values in the `template` the same way you would in a [Prompt](/components-prompts) component.
+For example, to parse `id`, `name`, and `email` strings:
+```text
+ID: {id} - Name: {name} - Email: {email}
+```
+
+:::important
+The component may fail to build because it needs data from the **Webhook** first.
+If you experience issues, change the **Mode** on the **Parser** component to **Stringify**, so the component outputs a single string.
+:::
+
+5. In the **Endpoint** field of the **Webhook** component, copy the API endpoint for your external requests.
+6. Optionally, to retrieve a complete example request from the component, click **Controls**, and then copy the command from the **cURL** value field.
+7. Send a POST request with any data to trigger your flow.
+This example uses `id`, `name`, and `email` strings.
+Replace **YOUR_FLOW_ID** with your flow ID.
+```text
+curl -X POST "http://127.0.0.1:7860/api/v1/webhook/YOUR_FLOW_ID" \
+    -H 'Content-Type: application/json' \
+    -d '{"id": "12345", "name": "alex", "email": "alex@email.com"}'
+```
+
+This response indicates Langflow received your request:
+```
+{"message":"Task started in the background","status":"in progress"}
+```
+
+8. To view the data received from your request, in the **Parser** component, click <Icon name="TextSearch" aria-label="Inspect icon" />.
+
+You should see a string of parsed text, like `ID: 12345 - Name: alex - Email: alex@email.com`.
+
+You have successfully parsed data out of an external JSON payload.
+
+By passing the event trigger data payload directly into a flow, you can also parse the event data with a chain of components, and use its data to trigger other events.
+
+

docs/sidebars.js

@@ -94,6 +94,7 @@ module.exports = {
         "Develop/memory",
         "Develop/session-id",
         "Develop/logging",
+        "Develop/webhook",
       ],
     },
     {