DEV Community

Sh Raj
Sh Raj

Posted on

Send API data directly to Telegram App

Enhance Your Website Communication with GetIntoTouch

Stay connected with your audience by using GetIntoTouch to receive form submissions directly on your Telegram app. This guide will walk you through the setup and usage of the GetIntoTouch API with JavaScript.

https://telegram.me/getintotouchbot

Step 1: Obtain Your Telegram User ID

Get your Telegram User ID from @userinfobot.

Step 2: Generate API URL

Create your API URL:

https://getintotouch.sh20raj.com/api.php?id=YOUR_TELEGRAM_USER_ID
Enter fullscreen mode Exit fullscreen mode

Instead of YOUR_TELEGRAM_USER_ID you can also use YOUR_TELEGRAM_GROUP_OR_CHANNEL_ID but for that you have to add GetIntoTouch Bot to your channel or group.
(Use Web Telegram to get the id => See URL while opening the channel i.e. -86498264 )

Step 3: Create an HTML Form

Here's a sample form:

<form id="messageForm" method="post" enctype="multipart/form-data">
  <input type="hidden" name="telegram_user_id" value="YOUR_TELEGRAM_USER_ID">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="5" required></textarea>
  <label for="photo">Upload Photo/File:</label>
  <input type="file" id="photo" name="photo">
  <button type="submit">Send Message</button>
</form>
<div id="status"></div>
Enter fullscreen mode Exit fullscreen mode

Step 4: JavaScript to Handle Form Submission

Use the Fetch API to send form data:

document.getElementById('messageForm').addEventListener('submit', async function(event) {
  event.preventDefault();
  const formData = new FormData(this);

  try {
    const response = await fetch('https://getintotouch.sh20raj.com/api.php?id=YOUR_TELEGRAM_USER_ID', {
      method: 'POST',
      body: formData
    });
    const result = await response.json();
    document.getElementById('status').innerText = result.message || 'Form submitted successfully!';
  } catch (error) {
    document.getElementById('status').innerText = 'An error occurred. Please try again.';
  }
});
Enter fullscreen mode Exit fullscreen mode

Conclusion

By integrating GetIntoTouch, you ensure that every visitor's query is captured and delivered in real-time, allowing you to maintain high engagement levels and improve your response times. For detailed setup and more examples, visit GetIntoTouch API Documentation.

Top comments (1)

Collapse
 
sh20raj profile image
Sh Raj