Gatsby Functions on Netlify: Telegram Contact Form Bot # Gatsby Functions on Netlify: Telegram Contact Form Bot #

🔑 Telegram API Keys #

The process is quite simple, just follow step by step, and you will have API keys in a couple of minutes.

1. Bots are created by Telegram's Bot Father — isn't that cute! Open up a new chat with @BotFather  .
2. You interact with bots in Telegram by typing commands which begin with a / in the chat window. Create a new bot using the command /newbot. Bot Father will ask you for a name and then a username. The name can be anything, but the username needs to end bot and should only contain alphanumeric characters and underscores. I will use “Gatsby Functions Netlify Site” as the name and gatsby_functions_netlify_bot as the username. Bot Father will respond with the new API key for your bot, make a note of this.
3. Next, we need to create a new group chat and add the bot to it (you can also add anyone whom you want to receive bot messages). From the Telegram menu, select New Group. Enter a name for the group when prompted, then in the Add Members window type the username of your bot.

Retrieve Chat ID #

4. We're almost done. Next, we need to get the ID for this new group chat, so we can send messages to it from the Gatsby Function. From the group send a message to the bot by typing the following command as a message “/my_id @my_bot” replace my_bot with the name of your bot.
5. In the Terminal, use curl to see the bot's updates. Remember to replace 123456789:AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQq with the API key you got earlier:

    
curl -L https://api.telegram.org/bot123456789:AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQq/getUpdates

  

If you don't have curl on your machine, just paste the link into your browser instead. If you are working on a shared machine, be sure to clear the link from the Browser history, as it contains an API key.

You will get a response back something like this:

    
1 {
2   "ok": true,
3   "result": [
4     {
5       "update_id": 741497477,
6       "message": {
7         "message_id": 2,
8         "from": {
9           "id": 1234567890,
10           "is_bot": false,
11           "first_name": "Rodney",
12           "last_name": "Lab",
13           "username": "askRodney"
14         },
15         "chat": {
16           "id": -123456789,
17           "title": "Gatsby Functions Netlify",
18           "type": "group",
19           "all_members_are_administrators": true
20         },
21         "date": 1623667295,
22         "text": "/my_id @gatsby_functions_netlify_bot",
23         "entities": [
24           { "offset": 0, "length": 6, "type": "bot_command" },
25           { "offset": 7, "length": 29, "type": "mention" }
26         ]
27       }
28     }
29   ]
30 }

  

OK, this is just some JSON. It contains two IDs, although we just need one. The first is the message ID. We don't need this one. The second, within the chat object, starts with a “-”, this is the chat ID we shall use, including the “-”.

We have all the API data we need to proceed. Let's carry on by setting up or function.

🗳 Poll #

Will you use a Telegram Bot in a future Web App or site you build?

• Yes
• No

Vote  

Voting reveals latest results.

⚙️ Add API Keys to Site #

To save time, we will clone the final result repo from the post on Gatsby Cloud Functions. Start by cloning the repo and then preparing the site to run locally:

    
git clone https://github.com/rodneylab/gatsby-cloud-functions-recaptcha.git gatsby-functions-netlify
cd gatsby-functions-netlify
npm install
cp .env.EXAMPLE .env.development
cp .env.EXAMPLE .env.production
gatsby develop

  

That will spin up a dev server for you. Go to localhost:8000/contact in your browser, and you will see the contact form is all set up.

The contact form uses an accessible reCAPTCHA to check the user is not a bot. When the user clicks the Submit your message button, the form data, together with a reCAPTCHA token, is posted to the serverless function for processing.

For all of this to work, you will need to have a reCAPTCHA API key, if you don't already have one. This is really easy to set up, and I included instructions on setting up a reCAPTCHA API keys in the earlier post. The function also emails you with message details whenever someone submits the form. As you probably guessed, I included setup instructions for this in the earlier post too! Update the .env.development and .env.production files with your own keys.

With all that set up, we just need to add the new API keys for our Telegram bot. Edit .env.development and .env.production, replacing the placeholders with your own new credentials:

.env.development

plaintext

    
14 SMTP_USER="smtp-server-username"
15 TELEGRAM_BOT_API_TOKEN="123456789:AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQq"
16 TELEGRAM_BOT_CHAT_ID="-123456789"

  

🔧 Enable Gatsby Functions on Netlify #

This step is pretty easy… one thing I love about Netlify is how simple they make things! Two steps:

1. Install @netlify/plugin-gatsby from the command line:

       
   npm i -D @netlify/plugin-gatsby
   
     

2. Enable the Gatsby Functions Netlify plugin, updating netlify.toml:

   netlify.toml

   toml

       
   10 [[plugins]]
   11   package = "@netlify/plugin-gatsby"
   
     

That's all there is to it. If you really need to know more, check out the Netlify docs  .

Gatsby Function #

There is a Telegram Node package  , but we will use axios instead as it is already installed in our project. Gatsby functions are placed in the src/api folder. You will see in the contact form code (line 21 in src/components/ContactForm.jsx) we post the form data to the /api/submit-message endpoint. The corresponding function in our project is located at src/api/submit-message. Including an API endpoint is just as simple as creating a corresponding file with a matching name. Let's edit src/api/submit-message to add the Telegram bot function:

src/api/submit-message

jsx

    
1 import axios from 'axios';
2 import nodemailer from 'nodemailer';
3  
4 const notifyViaTelegramBot = async ({
5   email,
6   googleCaptchaScore,
7   markedSpam,
8   message: userMessage,
9   name,
10 }) => {
11   const data = JSON.stringify(
12     { email, googleCaptchaScore, markedSpam, userMessage, name },
13     null,
14     2,
15   );
16   const text = `Contact Form Message: ${data}`;
17   const result = (async () => {
18     try {
19       await axios({
20         url: `https://api.telegram.org/bot${process.env.TELEGRAM_BOT_API_TOKEN}/sendMessage`,
21         method: 'POST',
22         data: {
23           chat_id: process.env.TELEGRAM_BOT_CHAT_ID,
24           text,
25         },
26       });
27       return { successful: true, message: '' };
28     } catch (error) {
29       let message;
30       if (error.response) {
31         message = `Telegram server responded with non 2xx code: ${error.response.data}`;
32       } else if (error.request) {
33         message = `No Telegram response received: ${error.request}`;
34       } else {
35         message = `Error setting up telegram response: ${error.message}`;
36       }
37       return { successful: false, message };
38     }
39   })();
40   return result;
41 };

  

Finally, we need to call this function from the main handler. We'll modify the existing code a touch. We already await a promise from the sendEmail function. We will generate a new promise from our Telegram function, and do not need to wait for the first promise to resolve before starting work on the second. This sounds like a job for Promise.all  . Let me know if this needs more explanation. Here's the code changes:

src/api/submit-message

jsx

    
118 if (!recaptchaValidationResult.successful) {
119   res.status(400).send(recaptchaValidationResult.message);
120 } else {
121   const googleCaptchaScore = recaptchaValidationResult.message;
122 
123   const sendEmailPromise = sendEmail({
124     email,
125     googleCaptchaScore,
126     markedSpam,
127     message,
128     name,
129   });
130 
131   const notifyViaTelegramBotPromise = notifyViaTelegramBot({
132     email,
133     googleCaptchaScore,
134     markedSpam,
135     message,
136     name,
137   });
138   const [sendEmailResult, notifyViaTelegramBotResult] = await Promise.all([
139     sendEmailPromise,
140     notifyViaTelegramBotPromise,
141   ]);
142 
143   if (!sendEmailResult.successful) {
144     res.status(400).send(sendEmailResult.message);
145   } else if (!notifyViaTelegramBotResult.successful) {
146     res.status(400).send(notifyViaTelegramBotResult.message);
147   } else {
148     res.status(200).send('All good!');
149   }
150 }

  

💯 Check Your Work #

Please enable JavaScript to watch the video 📼

That's it! Let's test by sending a message on the contact form and making sure we receive it in Telegram. When you are ready to deploy to a live server using Netlify, don't forget to add the environment variables to the Netlify dashboard.

You can see the full code for this project on the Rodney Lab GitHub page  as well as other Rodney Lab projects.

🙌🏽 How Much Fun Was That!?! #

In this post, we learned:

• how to use Gatsby functions on Netlify;
• create Telegram API tokens; and
• how to send a message from a Telegram Bot using a serverless function.

I hope you have found this valuable and worth the time you invested. Let me know if there is anything in the post that I can improve on, for anyone else creating this project. You can leave a comment below, @ me on Twitter  or try one of the other contact methods listed below.

🙏🏽 Gatsby Functions on Netlify: Feedback #

As I say, I hope you enjoyed following along and creating this project as well as learned something new. I also hope you will use this code in your own projects. I would love to hear what you are using Telegram bots for. Also, fill me in on how you are using Gatsby functions on Netlify. Finally, be sure to let me know ideas for other posts you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram  . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Gatsby JS among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.