How-To

Email notification when a web page changes - How To

Stephen — Thu, 17 Oct 2024 08:20:34 +0000

Email notification when a web page changes - How To Stephen Thu, 10/17/2024 - 10:20

Topic

How to Set Up Changedetection.io to Monitor a Web Page and Send Email Notifications

Changedetection.io is an excellent tool for monitoring changes to websites. Whether you're tracking stock prices, checking for product availability, or keeping an eye on any important web content, Changedetection.io can notify you when something changes. In this tutorial, we’ll walk you through how to set up a web page monitor and configure email notifications for any updates—all using the subscription version of Changedetection.io.

Step 1: Log In (or Sign Up)

To begin, visit the changedetection front page and either sign up for a new account or log in if you already have one.

After signing in, you will be directed to your dashboard, where you can see all your monitored web pages (if you’ve already added any) or begin setting up new ones.
If you just joined us, simply follow the instructions in the welcome email, the email will include the login information, passwords etc

Step 2: Configure the email address for notifications

Now that you are happily logged in, click SETTINGS in the top bar, and then the NOTIFICATIONS tab, by default we dont assume you will use email alerts because we support 95+ other notification systems such as Discord, Slack, MS-Teams, etc, so now you can simply add your email address here.

Click the "ADD EMAIL" button (located below the "Notification URL list" box), and fill in the email address you wish to notification when the web page changes, click OK

Then click SAVE (at the bottom of the page)

Tip: Once you have added your email address, you can also click "Send test notification" to send a test email, so that you can be sure that you entered your information correctly

Step 3: Add a New Web Page to Monitor

Back the home page (click the "changedetection.io" text on the top left to return anytime) Add the website page URL in the box under the "Add a new change detection watch" text, in this example we're adding https://mycompany.com/news
Then click "Watch" This will add the webpage to your list of watched pages, the system will begin rechecking the page at the default intervals (but you can change this anytime)

We encourage you to explore the various settings and possibilities that can be achieved with changedetection.io, but in this tutorial we want to give you just the very easiest overview of how to start monitoring a webpage and receive alerts via email when ever a change to the website page occurs.

You can also click "EDIT" and explore other options such as the recheck interval time, the Visual Selector for choosing which elements/parts of the web page to monitor and the Browser Steps option for interacting with the page (such as logging in, performing searches etc), you can also choose to include a screenshot with the email.

All the best and have fun monitoring web pages for changes!

Monitoring HTML "SELECT" drop down for changes to options

Stephen — Fri, 11 Oct 2024 09:14:22 +0000

Monitoring HTML "SELECT" drop down for changes to options Stephen Fri, 10/11/2024 - 11:14

Topic

How-To

changedetection.io will automatically show any changes to <select><option> values, infact it renders them out ready for change detection on the fly

For example if we had..

<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

So this would appear by default in the "Preview"( or notification text ) as "Volve Saab Mercedes Audio", however if you really wanted to see what changed you can also switch to HTML Source mode

changedetection.io can also monitor the HTML source of a web-page by simply prepending the "source:" keyword to the start of a page, for example below ;

(more on monitoring changes to HTML sourcecode here)

Then we can skip over to Filters & Triggers and add select, this way we can just focus on the <select> element for monitoring changes

After a quick recheck, we can now see that "skoda" was added to the dropdown select element list items ( and if we configured notifications, we could get a notification via Discord, slack, email etc)

Happy change detecting :)

Vevor Tools - easily monitor restock and get alerts on discounts!

Stephen — Thu, 05 Sep 2024 12:45:24 +0000

Vevor Tools - easily monitor restock and get alerts on discounts! Stephen Thu, 09/05/2024 - 14:45

Topic

How-To

If you're a fan of Vevor tools, you can buy them directly from their website. But even better than that is catching those irresistible clearance sales, restocks, and deep discounts on their products.

With changedetection.io, you can effortlessly set up alerts for price drops and restocks, ensuring you never miss a deal or the chance to grab a tool as soon as it's back in stock.

How to setup alerts when a Vevor Tools product changes price or has a discount.

Step 1: Copy+Paste the link (URL) to the Vevor Tools page you want to monitor and select "Re-stock & Price detection for single product pages".

Import is to select the "Re-stock & Price detection for single product pages" option, this will turn on the various options for following the product price (Such as being able to set limits/thresholds on the price of the product before sending a notification)

Step 2: Congratulations! By default, changedetection.io will automatically track any price or restock changes on the Vevor tools product URLs you've added. You can see this in the "Restock & Price" column.

How to setup notifications for discounts of the Vevor tools products and score a bargain?

Simply click [EDIT] at the list of website watches for the page/product you're interested in, then click "Restock & Price Detection", over on this tab is where you can setup alerts based on ;

Price below $/GBP/EUR (If it goes OVER a certain amount, send alert)
Price lower $/GBP/EUR (If it goes UNDER a certain amount, send alert)
Price change by % - Probably the best option, for example you could get an alert if the Vevor product you're interested in goes on sale by more than 5% since the first check.

Perfect!

How to add Email or Discord notifications to Vevor Tools product price discounts and restocks?

Probably our most asked question, fortunately it's exactly the same as setting up notifications for any other web-page change alert. Fortunately it's super simple, just click the [Notifications] tab (available on each web-page watch, or under "Settings" to only set it up once for all watches)

Then click "Add email" , it will ask you what email address you prefer and fill in the details automatically for you.

What about Discord notifications of Vevor Product price changes?

Super easy, following the same configuration page, paste in your Discord "webhook" URL to your bot/channel (more about Discord configuration here)

You can add as many notification types as you like, don't forget we support dozens of various Productivity based notification systems, not just email! including but not limited to AWS SES, Discord, Google Chat, Line Mastodon, Matrix, Microsoft teams, Slack and more!

Happy product hunting :)

Synology NAS - How to get alerts on new software updates via Discord!

Stephen — Wed, 17 Jan 2024 10:56:22 +0000

Synology NAS - How to get alerts on new software updates via Discord! Stephen Wed, 01/17/2024 - 11:56

Topic

How-To

In this quick tutorial I'll show you how easy it is in to monitor a website for new software version releases and connect Discord for push notifications.

We will use Synology NAS in our little example, Synology have been continuously releasing great features and super stable software in recent years.

Ofcourse, what is cool is that you should install changedetection.io on your Synology NAS (check out the link to Marius's fantastic article on setting up changedetection.io on your Synology NAS)

So let's go!

Add your favourite Synology product page's software update page URL to monitor, in this example we have the DS723, but the same recipe applies for pretty much all of their range, (we tested with DS723+, DS920+ etc)

Now your overview list should look something like below (We clicked [edit] then ticked the "Use <title> as title of the watch" option so it's a little easier to read)

Now the Synology NAS website has a lot of extra information in the footers and headers, using the Visual Selector tool available under [edit] we simply select the actual content area

You can see that changedetection.io has correctly identified //*[@id="release_notes_content"] as the place where the the content lives (this is the area of the web page that would be used for change detection)

Now when Synology NAS release a new version/update you should be able to see the differences

To have a bot send notifications to your server’s channel you need to paste in the following "Notification URL" in the notification settings

discord://webhook_id/webhook_token

To get a webhood_id and a webhook_token. Click the settings icon beside the chat and click Integrations.

Then click View Webhooks, then New Webhooks you can change the name of the bot if you like and copy the Webhook URL. It will usually be called by default "Spidey bot"

Then "Copy Webhook URL" (This is now the "Notification URL" in changedetection.io)

Simply paste that under the Notification settings of the watch (or global settings)

We recommend you try the "Send test notification" button to confirm everything is working as expected.

And there you have it! Now you'll receive push notifications of the changes/updates in the Synology NAS software releases page via Discord

Have fun!

Change detection if a HTML element exists or not

Stephen — Mon, 08 Jan 2024 10:19:43 +0000

Change detection if a HTML element exists or not Stephen Mon, 01/08/2024 - 11:19

Topic

How-To

Sometimes you are not quite interested in content change notifications for the entire web page, and maybe not even content change notification for a element on the website - actually you want to know if an element exists at all or not.

So in this quick tutorial I'll show you how to setup changedetection.io to alert if you a HTML element exists or not

Using "xPath" (Like CSS selectors except different :) ) we can simply write the filter rule

xpath:if (count(//item) >0 ) then "Yes it exists!" else "no sorry not here"

So then the change difference would look something like

What is also cool is that because changedetection.io supports xPath2/3 by default, you can also just output the value of count(), which means you could get a notification if the number of items changes

xpath:count(//item)

Where //item is the is the HTML xPath to follow

So perhaps one real world example could be that you want to know if the number of offers listed drops to less than 5

(imagine that the page has a list of special offers, where each div is '<div class="special-offers">..`

xpath:if (count(//div[contains(@class, 'special-offers')) <5 ) then "Less than 5 special offiers" else "All ok, more than 5 offers"

Simple as that :) The service will let you know/alert you (depending on your notification setup) if less than 5 offers are shown or not.

All the best and have fun!

How to monitor a website for NEW content

Stephen — Fri, 05 Jan 2024 10:52:15 +0000

How to monitor a website for NEW content Stephen Fri, 01/05/2024 - 11:52

Topic

How-To

How to monitor a site or web page for new content ? How can you configure changedetection.io to only show NEW content from a site and send you a notification?

Unlike other services, changedetection.io is mostly interested in the actual text content of the website, this means that we can provide some super cool filters that allow you to really specify exactly what it is that you're interested in.

This can easily be achieved once you have added a website to watch, then set the "Added or Removed text" option in the Filters section.

This will allow you to only get alerts and notifications when the website has added new content.

Where to find the option to monitor a website for NEW content?

Fortunately, all related options are easily discoverable under Edit > Filters & Triggers then scroll down to "Text filtering" under the website page that you are monitoring.

When the website is checked according to your prefered schedule, the system will compare the previous version with the current version, and while doing that comparison it will use the rules that you have selected.

So in this case, since all options (Added, Replaced, Removed) are selected, then any text change in the website page will trigger a "change" (and optionally send an alert)

However, if you select only "Added lines" and "Replaced/changed lines" then you will not get an alert if something unrelated is removed, only if something is added new, or removed.

It's important to keep in mind that the exact calculation of "replaced" and "added" depends on how similar the texts are, so in most cases if you want to get an alert when NEW content is added, it's definitely worth selecting both of those options (and leave Removed lines unchecked)

What about completely new content on the webpage thats never been used before?

In the case that you really really only want completely new content on the web page that has never been seen before by changedetection.io, you can use the "Only trigger when unique lines appear" option, this means that every time a new version of web page is detected it will scan all current and old versions of the content and only tell you when some completely new and unseen content has appeared.

This can be handy when you're scraping a list of links or headlines and you want to be totally sure that they never appear in your alerts again (some websites re-use old articles for example)

Have fun! remember, there's many more options under "Filters & Triggers" and I recommend that you experiment with them all :)

Automatically adding new pages to watch from existing results

Stephen — Wed, 03 Jan 2024 15:01:52 +0000

Automatically adding new pages to watch from existing results Stephen Wed, 01/03/2024 - 16:01

Topic

How-To

Think of the situation where you are watching your favourite ecommerce website, and you want to start automatically watching any NEW pages for changes.

For example, you might be interested in a list of search results for a product, but then you also want to follow/watch those product pages for changes (maybe price changes, availability etc)

Since version 0.45.11 it is possible to use the built in API to ask changedetection.io to insert a new link into its database, as a plaintext list of links (with a tag/group as an optional argument), we can use the 'notifications' tab to tell changedetection.io to notify itself to add a new link :)

Here's how! In this example we will use CashConverters as our example.

Step 1 - Add the website URL and configure the filters

Using the current URL, copied and paste from your browser, as the URL in changedetection to watch.

Now in this case, the VisualSelector is not quite what we want, because we are only interested in all of the links to the products, additionally we are interested in the "HREF" part of the "A HREF" part of the link so that we can see what the products link is.

Fortunately, they make it super easy for us, the link is clearly marked with the CSS class name product-item__price

So then to get a list of URLs for products, we can use xPath to ask it to extract the "href" part for us, and only return that list.

We "simply" use the Filter Rule //a[@class="product-item__title"]/@href

Ah but wait! We need to be sure we have the full link, including https:// and the domain name/website URL.

Change to use the Filter Rule xpath:for-each(//a[@class="product-item__title"]/@href, function($a) { concat("https://cashconverters.co.uk", $a) })

( We will make this easier in the future with some plugins that will support easily appending text to each line of results )

Now we check out the Preview or Difference Page output, and we can see a nice list of links

Step 2 - Automatically importing the URLs via the API

The built-in API supports importing a list (plain-text) of URLs with an option organisational tag/group

Using that, we will make changedetection.io "notify" its own API of any changes to that URL list

Make sure your API access is turned on, and you have the key ready (Visit Settings > API )

We will use that API key in our notification URL, So the URL to notify (to automatically import the list of URLS) would be (careful to include the + at the start, this signifies that it should be a "http header")

post://localhost:5000/api/v1/import?tag=CashConverters&+x-api-key=dfb4d69efdec620e30edcd916c545efc

or in the case that you're using our beloved subscription service

posts://lemonade.changedetection.io/your-loginURL/api/v1/import?tag=CashConverters&+x-api-key=dfb4d69efdec620e30edcd916c545efc

Use "post://" for non-SSL and "posts://" if your installation lives on a HTTPS protected address.

And set the Notification Body to only "{{current_snapshot}}" then you can press Send test notification, this will send all of those URLs for population in changedetection.io

Once you click "send test notifcation" with {{current_snapshot}}, you should then see all those links in your watch list

By default, it will only add "new" links

Have fun, and experiment! Happy change detecting :)

Scrape and Extract data from websites and draw charts - How to gain valuable long-term insights

Stephen — Wed, 27 Dec 2023 09:04:23 +0000

Scrape and Extract data from websites and draw charts - How to gain valuable long-term insights Stephen Wed, 12/27/2023 - 10:04

Topic

How-To

Visualising long-term insights can lead to a lot of interesting and valuable realisations.

The web is always changing, but how does that information look across a week? a month? a year?

What if you wanted to draw a graph to show the number of properties advertised over a week? a month? a year?

Using the Extract Data feature you can easily build a report (scrape data) based on specific text on a website, some examples;

Number of real-estate results for a given search
Number of google results for a given search
Airbnb advertised apartments in a city
Temperature or other climate information
Scrape and graph prices, availability and more

Basically, any web page where it contains a number - can be used to build valuable reports.

Example - Graph the number of results returned for a real-estate search over time

Scenario: You're watching a local real-estate website, and want to visualise trends over time for the number of search results, you've already setup your watch.

Here, we can see that the text says "We found 473 properties for you", so let's Extract Data on that text, receive the number only component as CSV and then draw a graph.

( In other words, let's build a graph over time of that "473" results word )

Head on over to your watch over-view list, click on DIFF to bring up the differences inspector, then click the Extract Data tab

So here's how to tell changedetection to extract that "473" over time, from all previous change snapshots and build a nice CSV report (of which we can easily import into Google Sheets and draw pretty graphs! )

The trick here is that we ONLY want to include the "473" text, not the whole "We found 473...", otherwise the spreadsheet will not understand the value as it would contain a mix of numbers and text.

So to ONLY include the "473" text we can use a simple Regular Expression (A simple rule that tells it exactly what text to be interested in), using round brackets "()" we can tell changedetection to just use any digits that come after "We found..."

In our case, the best is to use ([0-9]+) as the rule (any number 0-9 that is repeated), because its wrapped in "()" it means it will only pull that text/digits

So go ahead and enter We found ([0-9]+)

Then click Extract as CSV, in a few moments the system will look over all previous change snapshots, extract the text, and send you a CSV with the Time/date, time (in epoch format), and the number in the brackets from the Regular Expression.

And here we have it :-) after Importing to Google Sheets, then follow the steps to how to create a chart in google sheets

More fine examples to come (feel free to contact us and ask for a recipe!), but here is just one basic way to gather super interesting visualised line/chart data from website pages over time.

Source code monitor - How to get alerts on changes to HTML source code

Stephen — Fri, 08 Dec 2023 09:01:41 +0000

Source code monitor - How to get alerts on changes to HTML source code Stephen Fri, 12/08/2023 - 10:01

Topic

How-To

How to get alerts on changes to HTML source code? Sometimes you need to know when a very specific part of the HTML changes, for example you're watching a competitor and want to know when they change their shops metatags.

Or maybe you want to know if certain parts of your HTML have changed without your approval? Perhaps you are being pro-active in monitoring your site for defacement, hacking and more.

Another great feature of changedetection.io is that you can specify that you're interested in following the "source code" as the content change detection.

Just simply prefix the URL you are watching with "source:"

Then, for example let's say we are interesting in getting alerts/notifications when that website changes their <title> tag, click [edit] then head on over to Filters & Triggers

Adding //title (a simple xPath rule) will now make changedetection.io only follow the <title> tag.

Or if you prefer simpler CSS, you can use for example title or div or div span.interesting

Clicking Preview after the page has fetched shows us that it is correctly following the HTML for changes, and only that HTML for changes.

So when the title tag - in the HTML source changes, you can now get alerts/notifications, this is a super simple example and you can use your wild imagination of what you could do with this :)

You can also specify CSS, so if you wanted to follow changes to a some HTML by their CSS tag, then that is possible too.

What about defacement monitoring? that's certainly possible here too, often clever hackers will insert some HTML that is not visible in the browser but can have other affects, so another nice idea is to watch your site for changes in your HTML that you were not aware of.

Have fun!

BestBuy - Get "Coming Soon" product in stock notifications using the restock detection!

Stephen — Wed, 29 Nov 2023 17:15:52 +0000

BestBuy - Get "Coming Soon" product in stock notifications using the restock detection! Stephen Wed, 11/29/2023 - 18:15

Topic

How-To

Best Buy excels in providing a comprehensive array of electronics and tech gadgets, offering a diverse range of products both in-store and online. Their stores provide an immersive experience, often staffed with knowledgeable experts who assist customers in making informed decisions.

It's all perfect except for one thing - "COMING SOON" on a product that you really want!

So just like we learned over at the "How to get product restock alerts" tutorial , the restock detector will work perfectly fine with BestBuy because it can automatically recognise the "Coming Soon" text.

( Follow the 2 easy steps in that tutorial ! )

But over at our hosted/subscription offer, we have a special workaround for you - if you receive the "Hello Choose a country!" message, you can simply appear from a different proxy/location.

Changedetection.io subscription offers many unique locations to 'appear' to call from, this can be super handy if you're watching a website thats not in your own country or if your IP is detected incorrectly.

So if you get this "Choose a country" message you can choose a new location to watch your products on BestBuy from.

We offer several different locations that are included as part of the simple flat monthly pricing that we offer.

So simply click on "Edit" and then "Request" and choose the USA #1 location.

Then, let the system recheck the BestBuys product page that contains the "COMING SOON" text, and you should be all set :)

Once everything is working, and the product comes available and is no longer "coming soon" your list of website watches will now contain a happy green tag "In stock".

Happy green icon when the Best Buy product is no longer "Coming Soon" !

Ofcourse dont, forget to add all your favourite notifications to your Best Buy "Coming soon" alerts - email, Discord and more!

Good luck and have fun!