DIV auto refresh without site reloading each 2 minutes

Hey there,

I just built a blog integration site based on RSS (use zapier to sync the content). so is there a way can realize refresh the specific part (like the latest connect section, it’s a DIV with CMS) automatically on live site (like 2 minutes) but no need user reloading site to refresh the new content? Thanks a lot!

Maybe. The main issue is detecting the change from client-side script.
Let’s say you’re on the homepage / and you want the whole page to auto-refresh, but only if something has changed.

I’d probably try this-

  • On page load, immediately do a JS fetch of the current page, HEAD only. Capture version-identifying characteristics, that will likely change if the page is republished
  • Even N seconds, re-fetch, and compare
  • If they mismatch, reload the page

From some quick tests Content-Length and X-Lambda-Id look like good candidates as change markers.

You’d have to verify whether those markers change when updates are made through the CMS API by your RSS automation- but I’d expect that those changes would trigger a republish of affected pages.

To narrow this down to a section, the process is exactly the same, except instead of a reload, you’d fetch the entire page, extract just the part you want, and replace just the part of the current DOM you want.

@memetican thank you so much for your warm and detailed help! looks like it’s a very pro solution. im not a dev so confused on some tech methods. others seems one point i didn’t put here clearly, the content wouldn’t be update just will adding new contents in, so basically latest content from zapier will replace the old content. just like a big news in the banner of a news site. latest news will replace the previous one. so maybe there is a simple way to realize it? thank you!

Hi Typto, yes it can be done but it’s not a feature in Webflow, so you have to build it.
Whatever approach you take, you need 3 parts;

  • Some way to auto-publish the data you’re wanting
  • An efficient way to detect changes
  • A means to get the changes and integrate them into your current page

The approach above was for general page changes. Another approach might be to use RSS.
If you can find a good client-side lib for monitoring RSS feeds every few mins, you may be able to use it with Webflow’s RSS feature to detect the changes in your own CMS.

You’d have to prototype it to see if the timing and mechanics work for you.

oh yes seems Zapier has a feature is update item, maybe it can be works on this case. but i feel your suggestion is the ultimate solution for it, and i will put some research on it this weekend, thank you so much, maybe i’ll back here to reach out to you :stuck_out_tongue_winking_eye: