Hi! It’s Daniel from Latenode. If you have a website today, you're probably using some kind of frontend framework like React. In that case, many monitoring services could not work properly with your website. 

But there's a solution! We can leverage the power of a Headless Browser in Latenode to create such a service by yourself in just 5 minutes. Moreover, we'll add Telegram bot notifications using no-code nodes, ensuring that we're always informed with real-time notifications!

In this article, we will provide a detailed step-by-step instruction on how to create a website monitoring automation workflow on latenode.com. This process involves using a Headless Browser to check the website's performance and sending you a report message via a Telegram Bot, as well as how to create a Telegram Bot with BotFather.

What is more, there is a ready-to-go template of this workflow waiting for you at the end of this article, which will allow you to use this scenario in just a minute.

What’s the plan?

To make a web-monitoring scenario that sends messages in Telegram, you need to:

• Create a Telegram Bot
• Create a Latenode scenario

And it is even easier than it looks! Let me show you.

Creating a Telegram bot

Your respectful relationship with BotFather is a key thing in this process. But don’t worry, there’s nothing that could cause you troubles. 

After you start a conversation with BotFather, follow these steps:

1. Enter /newbot
   After that, you’ll be asked to give your bot a name and generate a username. This is one of those offers you can’t refuse…
   Great! Now you have a Telegram bot and an API key for it!
2. Enter  /help, and  /setjoingroups
   To enable the ability to invite your bot to group chats.

Now, add your bot to a group chat or create a new one with it. That is going to be a place where the bot will send reports. You’ll need the ID of this chat later in this workflow. To get chat ID, you have to open it using Telegram Web.

You are ready to switch to Latenode’s scenario, let’s do it, it won’t be long!

Creating a Scenario on latenode.com

Log into latenode.com and create a new scenario. Here’s a scenario you need:

This scenario triggers a headless browser once for a set period of time to check Latenode’s authorization page for a specific text, and depending on its presence, send positive or negative messages in Telegram.

Scenario breakdown:

1. Triggers: Here you see a Schedule trigger, that lets you activate a performance check at any period of time, and a Webhook trigger, that provides you with a customizable link to trigger the activation anytime using it.
2. Headless Browser: All the magic is happening here. In this particular case, HB goes to this page and searches for “create your account” text. If this string exists, the result is true, if not - false.
3. Telegram nodes: No-code nodes that send the message depending on the Headless Browser node execution results.

Headless Browser - Telegram connections have filters. The upper Telegram node is executed if the HB node result is true. The lower one is activated if the result is false.

The mission is clear, action!

1. Triggers

Create a new scenario, then click “Add node”, go to Tools, and in the trigger section you’ll see Schedule. Set the activation period, select the timezone and save the changes.
After that, “add node” once again and go for webhook Trigger, you don’t have to set it up, but you can customize its link if you want. Save the changes.

2. Headless Browser

Click “add node”, go to code, and select Headless Browser. Here’s the code I’m using:

await page.goto('https://app.latenode.com/auth', { waitUntil: 'networkidle2' });

// The waitForSelector is used here to ensure that the React app has finished rendering.
// This is a simple approach and might need to be adjusted based on the actual app behavior.
await page.waitForSelector('[data-test-id="authEmailInput"]', { timeout: 10000 });

// Check if the specific string exists on the page
const isStringPresent = await page.evaluate(() => {
    return document.body.textContent.includes('Create your account');
});

return { "result": isStringPresent };

Just copy this code into the input field and that's it.

Note:This is just a simple example. You can build up any logic here, Latenode’s Headless browser is giving you a huge variety of possibilities with a Puppeteer library.‍

If you want to check how your code works without activating the whole scenario, use a “run node once” button. That will automatically save the changes and run this node only. That also makes data from this node to be useful in the next node. Talking about them…

3. Telegram nodes & filters

Now you have to add Telegram nodes to make the bot notice you on website performance.

Click “add node”, find telegram bot API. Here you are looking for “send a text message or reply”. Add 2 such nodes and connect them to the HB node.

Before setting up these nodes, click on the connection and select “setup filter”. In this window, you name the filter in the “label” field. In condition, choose the result from HB node in Helper widget, then = in COMPARE and true in KEYWORDS. Save the changes. 

The connected node is going to be executed if the Headless Browser run is successful.

Then make the negative one. Do all the same, but choose false in KEYWORDS.

Now the nodes themselves.

To set them up:

1. Put your bot’s access token from BotFather in “connection”
2. Put Chat ID of a group chat with your bot (you could see it using Telegram Web)
3. Write the text for a bot’s message.
4. Select parsing mode. It changes the message appearance

That’s it! Now it’s time to save the scenario and deploy it! That will make the scenario automatically active.
And as I promised earlier, you can get this Latenode scenario as a ready-made template here.‍

Conclusion‍

Congratulations, you've just become the esteemed architect of your own website monitoring workflow! Starting now, the power to customize and adapt this scenario to your unique needs is in your hands. The only limit to how versatile your approach can be is your own imagination.

Remember, you're not alone in this journey of low-code automation. If you ever find yourself struggling with recreating this scenario or if you're simply looking for like-minded individuals to share your passion, join us on our Discord Channel, There, you can find support from me, the Latenode developers, and a growing community of low-code enthusiasts. We're looking forward to having you with us!