feat(docs): added tutorial videos & telegram logic added for user-agent (#348)

* telegram logic added for user-agent

* telegram and clay updated

* added more tool videos and descriptions

* Update apps/docs/content/docs/tools/google_search.mdx

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

* Update apps/docs/content/docs/tools/google_drive.mdx

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

* Update apps/docs/content/docs/tools/google_docs.mdx

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

* Update apps/docs/content/docs/tools/google_docs.mdx

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

* Update apps/docs/content/docs/tools/google_docs.mdx

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

* docs update

* added new google docs youtube vid

---------

Co-authored-by: Adam Gough <adamgough@Adams-MacBook-Pro.local>
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

Author: 3 people

apps/docs/content/docs/tools/clay.mdx

@@ -174,6 +174,8 @@ import { BlockInfoCard } from '@/components/ui/block-info-card'
 {/* MANUAL-CONTENT-START:intro */}
 [Clay](https://www.clay.com/) is a data enrichment and workflow automation platform that helps teams streamline lead generation, research, and data operations through powerful integrations and flexible inputs.
 
+Learn how to use the Clay Tool in Sim Studio to seamlessly insert data into a Clay workbook through webhook triggers. This tutorial walks you through setting up a webhook, configuring data mapping, and automating real-time updates to your Clay workbooks. Perfect for streamlining lead generation and data enrichment directly from your workflow!
+
 <iframe
   width="100%"
   height="400"

apps/docs/content/docs/tools/google_docs.mdx

@@ -29,6 +29,42 @@ import { BlockInfoCard } from '@/components/ui/block-info-card'
 {/* MANUAL-CONTENT-START:intro */}
 [Google Docs](https://docs.google.com) is a powerful cloud-based document creation and editing service that allows users to create, edit, and collaborate on documents in real-time. As part of Google's productivity suite, Google Docs offers a versatile platform for text documents with robust formatting, commenting, and sharing capabilities.
 
+Learn how to integrate the Google Docs "Read" tool in Sim Studio to effortlessly fetch data from your docs and to integrate into your workflows. This tutorial walks you through connecting Google Docs, setting up data reads, and using that information to automate processes in real-time. Perfect for syncing live data with your agents.
+
+<iframe
+  width="100%"
+  height="400"
+  src="https://www.youtube.com/embed/f41gy9rBHhE"
+  title="Use the Google Docs Read tool in Sim Studio"
+  frameBorder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowFullScreen
+></iframe>
+
+Learn how to integrate the Google Docs "Update" tool in Sim Studio to effortlessly add content in your docs through your workflows. This tutorial walks you through connecting Google Docs, configuring data writes, and using that information to automate document updates seamlessly. Perfect for maintaining dynamic, real-time documentation with minimal effort.
+
+<iframe
+  width="100%"
+  height="400"
+  src="https://www.youtube.com/embed/L64ROHS2ivA"
+  title="Use the Google Docs Update tool in Sim Studio"
+  frameBorder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowFullScreen
+></iframe>
+
+Learn how to integrate the Google Docs "Create" tool in Sim Studio to effortlessly generate new documents through your workflows. This tutorial walks you through connecting Google Docs, setting up document creation, and using workflow data to populate content automatically. Perfect for streamlining document generation and enhancing productivity.
+
+<iframe
+  width="100%"
+  height="400"
+  src="https://www.youtube.com/embed/lWpHH4qddWk"
+  title="Use the Google Docs Create tool in Sim Studio"
+  frameBorder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowFullScreen
+></iframe>
+
 With Google Docs, you can:
 
 - **Create and edit documents**: Develop text documents with comprehensive formatting options

apps/docs/content/docs/tools/google_drive.mdx

@@ -46,6 +46,18 @@ import { BlockInfoCard } from '@/components/ui/block-info-card'
 {/* MANUAL-CONTENT-START:intro */}
 [Google Drive](https://drive.google.com) is Google's cloud storage and file synchronization service that allows users to store files, synchronize files across devices, and share files with others. As a core component of Google's productivity ecosystem, Google Drive offers robust storage, organization, and collaboration capabilities.
 
+Learn how to integrate the Google Drive tool in Sim Studio to effortlessly pull information from your Drive through your workflows. This tutorial walks you through connecting Google Drive, setting up data retrieval, and using stored documents and files to enhance automation. Perfect for syncing important data with your agents in real-time.
+
+<iframe
+  width="100%"
+  height="400"
+  src="https://www.youtube.com/embed/cRoRr4b-EAs"
+  title="Use the Google Drive tool in Sim Studio"
+  frameBorder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowFullScreen
+></iframe>
+
 With Google Drive, you can:
 
 - **Store files in the cloud**: Upload and access your files from anywhere with internet access

apps/docs/content/docs/tools/google_search.mdx

@@ -32,6 +32,18 @@ import { BlockInfoCard } from '@/components/ui/block-info-card'
 {/* MANUAL-CONTENT-START:intro */}
 [Google Search](https://www.google.com) is the world's most widely used search engine, providing access to billions of web pages and information sources. Google Search uses sophisticated algorithms to deliver relevant search results based on user queries, making it an essential tool for finding information on the internet.
 
+Learn how to integrate the Google Search tool in Sim Studio to effortlessly fetch real-time search results through your workflows. This tutorial walks you through connecting Google Search, configuring search queries, and using live data to enhance automation. Perfect for powering your agents with up-to-date information and smarter decision-making.
+
+<iframe
+  width="100%"
+  height="400"
+  src="https://www.youtube.com/embed/1B7hV9b5UMQ"
+  title="Use the Google Search tool in Sim Studio"
+  frameBorder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowFullScreen
+></iframe>
+
 With Google Search, you can:
 
 - **Find relevant information**: Access billions of web pages with Google's powerful search algorithms

apps/docs/content/docs/tools/google_sheets.mdx

@@ -32,6 +32,54 @@ import { BlockInfoCard } from '@/components/ui/block-info-card'
 {/* MANUAL-CONTENT-START:intro */}
 [Google Sheets](https://sheets.google.com) is a powerful cloud-based spreadsheet application that allows users to create, edit, and collaborate on spreadsheets in real-time. As part of Google's productivity suite, Google Sheets offers a versatile platform for data organization, analysis, and visualization with robust formatting, formula, and sharing capabilities.
 
+Learn how to integrate the Google Sheets "Read" tool in Sim Studio to effortlessly fetch data from your spreadsheets to integrate into your workflows. This tutorial walks you through connecting Google Sheets, setting up data reads, and using that information to automate processes in real-time. Perfect for syncing live data with your agents.
+
+<iframe
+  width="100%"
+  height="400"
+  src="https://www.youtube.com/embed/xxP7MZRuq_0"
+  title="Use the Google Sheets Read tool in Sim Studio"
+  frameBorder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowFullScreen
+></iframe>
+
+Discover how to use the Google Sheets "Write" tool in Sim Studio to automatically send data from your workflows to your Google Sheets. This tutorial covers setting up the integration, configuring write operations, and updating your sheets seamlessly as workflows execute. Perfect for maintaining real-time records without manual input.
+
+<iframe
+  width="100%"
+  height="400"
+  src="https://www.youtube.com/embed/cO86qTj7qeY"
+  title="Use the Google Sheets Write tool in Sim Studio"
+  frameBorder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowFullScreen
+></iframe>
+
+Explore how to leverage the Google Sheets "Update" tool in Sim Studio to modify existing entries in your spreadsheets based on workflow execution. This tutorial demonstrates setting up the update logic, mapping data fields, and synchronizing changes instantly. Perfect for keeping your data current and consistent.
+
+<iframe
+  width="100%"
+  height="400"
+  src="https://www.youtube.com/embed/95by2fL9yn4"
+  title="Use the Google Sheets Update tool in Sim Studio"
+  frameBorder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowFullScreen
+></iframe>
+
+Learn how to use the Google Sheets "Append" tool in Sim Studio to effortlessly add new rows of data to your spreadsheets during workflow execution. This tutorial walks you through setting up the integration, configuring append actions, and ensuring smooth data growth. Perfect for expanding records without manual effort!
+
+<iframe
+  width="100%"
+  height="400"
+  src="https://www.youtube.com/embed/8DgNvLBCsAo"
+  title="Use the Google Sheets Append tool in Sim Studio"
+  frameBorder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowFullScreen
+></iframe>
+
 With Google Sheets, you can:
 
 - **Create and edit spreadsheets**: Develop data-driven documents with comprehensive formatting and calculation options

apps/docs/content/docs/tools/telegram.mdx

@@ -41,17 +41,31 @@ import { BlockInfoCard } from '@/components/ui/block-info-card'
 {/* MANUAL-CONTENT-START:intro */}
 [Telegram](https://telegram.org) is a secure, cloud-based messaging platform that enables fast and reliable communication across devices and platforms. With over 700 million monthly active users, Telegram has established itself as one of the world's leading messaging services, known for its security, speed, and powerful API capabilities.
 
+Telegram's Bot API provides a robust framework for creating automated messaging solutions and integrating communication features into applications. With support for rich media, inline keyboards, and custom commands, Telegram bots can facilitate sophisticated interaction patterns and automated workflows.
+
+Learn how to create a webhook trigger in Sim Studio that seamlessly initiates workflows from Telegram messages. This tutorial walks you through setting up a webhook, configuring it with Telegram's bot API, and triggering automated actions in real-time. Perfect for streamlining tasks directly from your chat!
+
 <iframe
   width="100%"
   height="400"
-  src="https://www.youtube.com/embed/nhq2Q8fndFg?start=62"
+  src="https://www.youtube.com/embed/9oKcJtQ0_IM"
   title="Use Telegram with Sim Studio"
   frameBorder="0"
   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
   allowFullScreen
 ></iframe>
 
-Telegram's Bot API provides a robust framework for creating automated messaging solutions and integrating communication features into applications. With support for rich media, inline keyboards, and custom commands, Telegram bots can facilitate sophisticated interaction patterns and automated workflows.
+Learn how to use the Telegram Tool in Sim Studio to seamlessly automate message delivery to any Telegram group. This tutorial walks you through integrating the tool into your workflow, configuring group messaging, and triggering automated updates in real-time. Perfect for enhancing communication directly from your workspace!
+
+<iframe
+  width="100%"
+  height="400"
+  src="https://www.youtube.com/embed/AG55LpUreGI"
+  title="Use Telegram with Sim Studio"
+  frameBorder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowFullScreen
+></iframe>
 
 Key features of Telegram include:
 

apps/sim/app/api/webhooks/route.ts

@@ -385,10 +385,12 @@ async function createTelegramWebhookSubscription(
       allowed_updates: ['message'],
     }
 
+    // Configure user-agent header to ensure Telegram can identify itself to our middleware
     const telegramResponse = await fetch(telegramApiUrl, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
+        'User-Agent': 'TelegramBot/1.0'
       },
       body: JSON.stringify(requestBody),
     })
@@ -407,6 +409,29 @@ async function createTelegramWebhookSubscription(
     logger.info(
       `[${requestId}] Successfully created Telegram webhook for webhook ${webhookData.id}.`
     )
+    
+    // Get webhook info to ensure it's properly set up
+    try {
+      const webhookInfoUrl = `https://api.telegram.org/bot${botToken}/getWebhookInfo`
+      const webhookInfo = await fetch(webhookInfoUrl, {
+        headers: {
+          'User-Agent': 'TelegramBot/1.0'
+        }
+      });
+      const webhookInfoJson = await webhookInfo.json();
+      
+      if (webhookInfoJson.ok) {
+        logger.info(`[${requestId}] Telegram webhook info:`, {
+          url: webhookInfoJson.result.url,
+          has_custom_certificate: webhookInfoJson.result.has_custom_certificate,
+          pending_update_count: webhookInfoJson.result.pending_update_count,
+          webhookId: webhookData.id
+        });
+      }
+    } catch (error) {
+      // Non-critical error, just log
+      logger.warn(`[${requestId}] Failed to get webhook info`, error);
+    }
   } catch (error: any) {
     logger.error(
       `[${requestId}] Exception during Telegram webhook creation for webhook ${webhookData.id}.`,

apps/sim/app/api/webhooks/test/route.ts

@@ -127,6 +127,124 @@ export async function GET(request: NextRequest) {
         })
       }
 
+      case 'telegram': {
+        const botToken = providerConfig.botToken
+        const triggerPhrase = providerConfig.triggerPhrase
+
+        if (!botToken || !triggerPhrase) {
+          logger.warn(`[${requestId}] Telegram webhook missing configuration: ${webhookId}`)
+          return NextResponse.json(
+            { success: false, error: 'Webhook has incomplete configuration' },
+            { status: 400 }
+          )
+        }
+
+        // Test the webhook endpoint with a simple message to check if it's reachable
+        const testMessage = {
+          update_id: 12345,
+          message: {
+            message_id: 67890,
+            from: {
+              id: 123456789,
+              first_name: "Test",
+              username: "testbot"
+            },
+            chat: {
+              id: 123456789,
+              first_name: "Test",
+              username: "testbot",
+              type: "private"
+            },
+            date: Math.floor(Date.now() / 1000),
+            text: "This is a test message"
+          }
+        }
+
+        logger.debug(`[${requestId}] Testing Telegram webhook connection`, {
+          webhookId,
+          url: webhookUrl
+        })
+
+        // Make a test request to the webhook endpoint
+        const response = await fetch(webhookUrl, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'User-Agent': 'TelegramBot/1.0'
+          },
+          body: JSON.stringify(testMessage)
+        })
+
+        // Get the response details
+        const status = response.status
+        let responseText = '';
+        try {
+          responseText = await response.text();
+        } catch (e) {
+          // Ignore if we can't get response text
+        }
+
+        // Consider success if we get a 2xx response
+        const success = status >= 200 && status < 300
+
+        if (success) {
+          logger.info(`[${requestId}] Telegram webhook test successful: ${webhookId}`)
+        } else {
+          logger.warn(`[${requestId}] Telegram webhook test failed: ${webhookId}`, {
+            status,
+            responseText
+          })
+        }
+
+        // Get webhook info from Telegram API
+        let webhookInfo = null
+        try {
+          const webhookInfoUrl = `https://api.telegram.org/bot${botToken}/getWebhookInfo`
+          const infoResponse = await fetch(webhookInfoUrl, {
+            headers: {
+              'User-Agent': 'TelegramBot/1.0'
+            }
+          })
+          if (infoResponse.ok) {
+            const infoJson = await infoResponse.json()
+            if (infoJson.ok) {
+              webhookInfo = infoJson.result
+            }
+          }
+        } catch (e) {
+          logger.warn(`[${requestId}] Failed to get Telegram webhook info`, e)
+        }
+
+        // Format the curl command for testing
+        const curlCommand = [
+          `curl -X POST "${webhookUrl}"`,
+          `-H "Content-Type: application/json"`,
+          `-H "User-Agent: TelegramBot/1.0"`,
+          `-d '${JSON.stringify(testMessage, null, 2)}'`
+        ].join(' \\\n')
+
+        return NextResponse.json({
+          success,
+          webhook: {
+            id: foundWebhook.id,
+            url: webhookUrl,
+            botToken: `${botToken.substring(0, 5)}...${botToken.substring(botToken.length - 5)}`, // Show partial token for security
+            triggerPhrase,
+            isActive: foundWebhook.isActive
+          },
+          test: {
+            status,
+            responseText,
+            webhookInfo
+          },
+          message: success
+            ? 'Telegram webhook appears to be working. Your bot should now receive messages.'
+            : 'Telegram webhook test failed. Please check server logs for more details.',
+          curlCommand,
+          info: "To fix issues with Telegram webhooks getting 403 Forbidden responses, ensure the webhook request includes a User-Agent header."
+        })
+      }
+
       case 'github': {
         const contentType = providerConfig.contentType || 'application/json'
 

apps/sim/app/api/webhooks/trigger/[path]/route.ts

@@ -189,6 +189,26 @@ export async function POST(
   foundWebhook = webhooks[0].webhook
   foundWorkflow = webhooks[0].workflow
 
+  // Special handling for Telegram webhooks to work around middleware User-Agent checks
+  if (foundWebhook.provider === 'telegram') {
+    // Log detailed information about the request for debugging
+    const userAgent = request.headers.get('user-agent') || 'empty'
+    logger.info(`[${requestId}] Received Telegram webhook request:`, {
+      userAgent,
+      path,
+      clientIp: request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown',
+      method: request.method,
+      contentType: request.headers.get('content-type'),
+      hasUpdate: !!body?.update_id
+    })
+
+    // Ensure User-Agent headers for Telegram in future requests from the bot
+    // We can't modify the incoming request, but we can recommend adding it for future setup
+    if (!userAgent || userAgent === 'empty') {
+      logger.warn(`[${requestId}] Telegram webhook request missing User-Agent header. Recommend reconfiguring webhook with 'TelegramBot/1.0' User-Agent.`)
+    }
+  }
+
   // Detect provider type
   const isAirtableWebhook = foundWebhook.provider === 'airtable'
   const isGmailWebhook = foundWebhook.provider === 'gmail'

apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/webhook/components/providers/telegram.tsx

@@ -105,7 +105,6 @@ export function TelegramConfig({
             in Telegram to create a bot and copy its token.
           </li>
           <li>Enter your Bot Token and a trigger phrase above.</li>
-          <li>Ensure your webhook URL uses HTTPS with a valid SSL certificate.</li>
           <li>Save settings and send the trigger phrase to your bot to start the workflow.</li>
         </ol>
       </InstructionsSection>