Display separate webpage in an iFrame based on day of the week

Ask the community
,
1

Hello, I’m looking for a way to dynamically change the content of my homepage based on the day of the week. The content to be displayed is complex and will contain an image and text. The content will change on a daily basis, so I want to have pages designed in advanced, all following the same structure, that are displayed on the homepage. These content pages need to maintain their customizability and be easily interchanged.

Originally my idea was to create an iFrame displaying one of the pages, and target the source url with JS to dynamically change it based on the day of the week. I’m worried this may not be possible with Velo. Does anyone have any guidance on where to start or move forward with this? I’m thinking it may be easier to create all this custom on a separate site and then just throw an iFrame up that doesn’t have any Velo code at all.

1 Like
2

It is possible.

let paths = ['/day1','/day2','/day3','/day4','/day5','/day6','/day7'];//order from Sunday to Saturday
$w.onReady(() => { 
 $w('#iframe').src = 'https://mysite.com' + paths[new Date().getDay()];
})
1 Like
3

Hi J.D., thank you SO much for replying! This is perfect – I realized after the fact that I actually need to change the content of the iframe based on the day of the month rather than week. Here’s my code:

//define paths as desired URL slug
let paths = "/meal";

//on page load, add the url slug and day of the month to the src field of the embed frame 
$w.onReady(() => { 
 $w('#iframe').src = 'urlhere' + paths + [new Date().getUTCDate()]; //adds "meal" + day of month to end of url
})

A quick question for you – is this the proper usage of getUTCDate? I want to make sure nothing breaks due to daylight savings etc.

1 Like