Linking Macro to webpage not same as tutorial video

Help and Support
1

So i’m following this video i succesfully recorded my macro’s (haven’t tested them yet though) Macro: Record and Replay Automated Actions – Distill at 2:40 she loads up the page, but my layout loads a full screen pop up of the page and does not have the macro button in the top to visual the macro playing. It just asks me to select an element, which i can’t since the starting layout is totally different from the page i want to see.

I tried the chrome plugin and the mac os software but both have the same popup with no macro button only to select elements in the page.

2

use the watchlist at the web app at https://monitor.distill.io which is used in the video tutorial. cheers!

3

Thanks so much, this helped, i was able to follow the tutorial now and i am in the correct pagelayout now.
Unfortunately i’m kinda stuck since i want to monitor a div background change.
Is this something distill can do?

I’ll show you what i’m looking for.
Steps to get the layout: Optios online booking

  • Click topright to remove pop up
  • Click Haircut
  • Cllck By Stone
  • Click Haircut
  • Click arrow for next month June

There you will see that all orbs are almost red, and one is green still.
I would like to monttor changes in these colors. To check for an open spot.

The red divs code is below, where the actual css for the background is “.r-1fa8pj9”

<div aria-label=" Woensdag 2 Juli 2025 selected You have no entries for this day " data-focusable="true" tabindex="0" class="css-18t94o4 css-1dbjc4n r-1awozwy r-1fa8pj9 r-1867qdf r-1loqt21 r-mabqd8 r-1otgn73 r-eafdt9 r-1i6wzkk r-lrvibr r-1yvhtrz" data-testid="native.calendar.SELECT_DATE_SLOT-2025-07-02" role="button"><div dir="auto" class="css-901oao r-1stjixc r-gmqrz5 r-1qd0xha r-ubezar r-1od2jal r-kc8jnq">2</div><div class="css-1dbjc4n r-1jkafct r-hdaws3 r-1hoetue r-1cvj4g8 r-orgf3d r-10g5efv"></div></div>

The green divs code is below, where the actual css for the background is “.r-peppx5”

<div class="css-1dbjc4n r-1awozwy r-13awgt0"><div aria-label=" Donderdag 3 Juli 2025 selected You have no entries for this day " data-focusable="true" tabindex="0" class="css-18t94o4 css-1dbjc4n r-1awozwy r-peppx5 r-1867qdf r-1loqt21 r-mabqd8 r-1otgn73 r-eafdt9 r-1i6wzkk r-lrvibr r-1yvhtrz" data-testid="native.calendar.SELECT_DATE_SLOT-2025-07-03" role="button"><div dir="auto" class="css-901oao r-1stjixc r-gmqrz5 r-1qd0xha r-ubezar r-1od2jal r-kc8jnq">3</div><div class="css-1dbjc4n r-1jkafct r-hdaws3 r-1hoetue r-1cvj4g8 r-orgf3d r-10g5efv"></div></div></div>

Is there a way i can monitor these color changes?

Thanks in advance!

4

So i think i figured it out to be able to check classes which is “div.css-1dbjc4n.r-1awozwy.r-13awgt0 > div”
But for some reason i get all the classes EXCEPT the color ones.

This is the list it gives me of a red one,
“css-18t94o4 css-1dbjc4n r-1awozwy r-1867qdf r-1loqt21 r-mabqd8 r-1otgn73 r-eafdt9 r-1i6wzkk r-lrvibr r-1yvhtrz”

This is the list i get when i use chromes developer mode on the same red one
“css-18t94o4 css-1dbjc4n r-1awozwy r-1fa8pj9 r-1867qdf r-1loqt21 r-mabqd8 r-1otgn73 r-eafdt9 r-1i6wzkk r-lrvibr r-1yvhtrz”

As you can see it’s skipping the “r-1fa8pj9” for some reason, any idea why?

5

monitoring the class attribute or the outerHTML property can help here. i am guessing that you have most likely figured this out.

i will check it out and get back to you.

6

there are two ways in which the page is displaying the red ones:

the first one is using the class as you noticed ealier:

<div aria-label=" Vrijdag 4 Juli 2025 selected You have no entries for this day " data-focusable="true" tabindex="0" class="css-18t94o4 css-1dbjc4n r-1awozwy r-1fa8pj9 r-1867qdf r-1loqt21 r-mabqd8 r-1otgn73 r-eafdt9 r-1i6wzkk r-lrvibr r-1yvhtrz" data-testid="native.calendar.SELECT_DATE_SLOT-2025-07-04" role="button"><div dir="auto" class="css-901oao r-1stjixc r-gmqrz5 r-1qd0xha r-ubezar r-1od2jal r-kc8jnq">4</div><div class="css-1dbjc4n r-1jkafct r-hdaws3 r-1hoetue r-1cvj4g8 r-orgf3d r-10g5efv"></div></div>

the second variant uses the style attribute where r-1fa8pj9 class is not present:

<div aria-label=" Friday 30 May 2025 selected You have no entries for this day " role="button" data-focusable="true" tabindex="0" class="css-18t94o4 css-1dbjc4n r-1awozwy r-1867qdf r-1loqt21 r-mabqd8 r-1otgn73 r-eafdt9 r-1i6wzkk r-lrvibr r-1yvhtrz" data-testid="native.calendar.SELECT_DATE_SLOT-2025-05-30" style="background-color: rgba(210, 68, 68, 0.5);"><div dir="auto" class="css-901oao r-1stjixc r-gmqrz5 r-1qd0xha r-ubezar r-1od2jal r-kc8jnq">30</div><div class="css-1dbjc4n r-1jkafct r-hdaws3 r-1hoetue r-1cvj4g8 r-orgf3d r-10g5efv"></div></div>

you can monitor two attributes - class and style to handle both variations. or, monitor outerHTML propertly which will monitor all attributes automatically.

does that make sense?

1 Like
7

I think i understand, which makes it a no brainer to select the outerHTML actually.
Hugely appreciated for the help man.

Perhaps one final nitpicky question, but i doubt this would be possible.
Is there perhaps a way i can filter trough the results and give a filtered replay in my mail heading or something? Like if i want to extract the date only so the topic is the date’s that are still red/green Or the real value that’s between the div brackets or something.

I see placeholders, it’s fine if this is not possible, it’s a very niche question.
Once again thanks for the help!