📝 Add Make.com webhook response tutorial

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

@@ -1,16 +1,32 @@
 import { Text } from "@chakra-ui/react";
 import type { MakeComBlock } from "@typebot.io/blocks-integrations/makeCom/schema";
+import { SetVariableLabel } from "@/components/SetVariableLabel";
+import { useTypebot } from "@/features/editor/providers/TypebotProvider";
 
 type Props = {
   block: MakeComBlock;
 };
 
 export const MakeComContent = ({ block }: Props) => {
+  const { typebot } = useTypebot();
+
   if (!block.options?.webhook?.url)
     return <Text color="gray.500">Configure...</Text>;
+
   return (
-    <Text noOfLines={1} pr="6">
-      Trigger scenario
-    </Text>
+    <div className="flex flex-col gap-2 w-full">
+      <Text noOfLines={1} pr="6">
+        Trigger scenario
+      </Text>
+      {block.options?.responseVariableMapping
+        ?.filter((mapping) => mapping.variableId)
+        .map((mapping) => (
+          <SetVariableLabel
+            key={mapping.variableId}
+            variableId={mapping.variableId as string}
+            variables={typebot?.variables}
+          />
+        ))}
+    </div>
   );
 };

apps/docs/editor/blocks/integrations/make-com.mdx

@@ -20,18 +20,31 @@ The Make.com integration block allows you to trigger a scenario at a given momen
 
 ## Return data from Make.com
 
-You can return data from Make.com by adding a "Webhook response" module at the end of your scenario.
+You can return data from Make.com by adding a "Webhook response" module at the end of your scenario, on this node you can set the body of the response with whatever Make.com values you want.
+
+Once you are ready to try out the webhook, hit the `Run once` button. This will make the scenario to wait for a request to be made to the webhook URL.
 
 <Frame>
   <img
-    src="/images/blocks/integrations/make-com-return.png"
+    src="/images/blocks/integrations/make-com-webhook-response.avif"
     alt="Make.com block webhook response module"
   />
 </Frame>
 
+At this point, head over to Typebot and hit the `Test the request` button. It will execute the Make.com scenario and you should see the response from Make.com.
+
+Now you can map this data to variables in Typebot.
+
+<Frame>
+  <img
+    src="/images/blocks/integrations/make-com-save-in-variables.avif"
+    alt="Make.com block save in variables"
+  />
+</Frame>
+
 ## Video tutorial
 
-<div className="relative" style={{ paddingBottom: '64.5933014354067%' }}>
+<div className="relative" style={{ paddingBottom: "64.5933014354067%" }}>
   <iframe
     src="https://www.youtube.com/embed/V-y1Orys_kY"
     allowFullScreen