All-in-One Reviews Auto slide issue

My review slider on the home page of www.riverdaleruralholidays.com seems to have stopped ‘sliding’ when viewed on the laptop, now that I made a little adjustment after reading it is now possible to choose how many lines are displayed in the preview. I selected 12 reviews for the slider on the homepage (there is a separate page on the website showing ALL reviews) but it moves only twice and stops at the 3rd one. On mobile, it moves through correctly. Any idea what can cause it? The only thing added in CSS is the height of the viewing frame because it otherwise cuts off right through the source logos.

1 Like

Hi @Ingrid_van_Waard :wave:

I am so sorry about this issue!

Your request is now with our devs. I’ll get back to you once any news come up :slightly_smiling_face:

Apologies for the delayed reply @Ingrid_van_Waard

Happy to inform you that the issue is globally fixed :slightly_smiling_face:

Please check your widget and let me know if it works fine.

Hi Max, thank you for the fix! The auto-slide is indeed now going through all 14 reviews that I selected for display on the homepage (as a preview of the page REVIEWS where you can see them all). Both on mobile and on laptop/PC the auto-move works again. But one little hiccup that I noticed both on a desktop PC (Windows 10) and the laptop (Windows 11), but not on mobile. The slider now takes a little break after the first two moves. The 3rd move takes double the time of the other moves so you think that it stops after the first 2 moves, but then it moves on. Happens every time when I retry, but not a big deal.
Also, I assumed I can choose the speed of the sliding in the settings, as on a laptop/PC it comes across as a bit slow (slower than necessary to read a few lines). On a phone, it looks like it’s a bit quicker. It’s a while ago that I set it up and didn’t quite remember whether I can set a speed, but had a look now and can’t see where to do that in the settings. So then this is probably something that can only be set with the custom javascript? I’m comfortable with adjusting scripts and codes and creating my own CSS, but writing my own Javascript is a out of my league!
Thanks again, and regards,
Ingrid

Hi @Ingrid_van_Waard :wave:

  1. I see the issue with the delay after the first 2 slides. We’ll double-check and will let you know once any news come up.

  2. To set the Auto Play speed, click on the Customize button on the Layout tab and set the speed in Auto Play section:


Also, we’ve noticed that you are using a CSS code to set the height of the review container and when you click on Read More, the reviews get cropped:


To avoid this issue, you can use this code instead:

.swiper-wrapper {
  height: 100% !important;
  align-items: stretch !important;
}

.es-carousel-layout-item,
.es-review-container {
  height: 100% !important;
}

Thanks, Max. Good to know you can see it too, even though it’s not a bit issue. And thank you for pointing me to the place where to set the speed. Must have overlooked that it was under “lay-out”. Regarding the cut-off when someone unfolds a review, I will try the code you just posted! I remember I had to manually set the height of the container because it didn’t work well if I left it to the app. The source/logos at the bottom would get cut in half on some of the reviews. Or there was an issue with not all blocks being the same height which made it very jumpy and untidy. Can’t remember what was the first or the last issue as it’s nearly a year ago that I was installing all of this. But Renata at the helpdesk was then a great help to send me the basics for the code needed, so I could fine-tune the values. But will see whether all of that stays intact if I use your code to stretch to 100%. Thanks!

1 Like

You are always welcome :slightly_smiling_face:

Hi Max, good to see how far the review slider has developed since I installed it a year ago. At that time, the blocks would all be different in size if you did NOT install a specific height in the CSS. And at that time, it did not prevent it from fully unfolding when the read-more was used. Had not even noticed this flaw if you had not pointed it out. But indeed, it was impossible to unfold a review so I removed that fixed-height and installed your “height 100%” code.
The only thing that is now noticeable is a little layout-shift. As if the 100% height is adjusted a bit later than displaying the first slides. You see it jump to slightly taller after a second or so. But only visible on laptop, not on mobile (which is anyway 80% of our visitors) and not something a website visitor will notice. It probably has to do with the request that the browser reads the Elfsight code after reading the other page elements, and preserving loading speed is clearly more important than this minimal shift.

I also noticed that the little extra pause after slide number 3 no longer happens, so you probably did something about that too?
Thanks and kind regards,
Ingrid

1 Like

Hi @Ingrid_van_Waard :wave:

The layout shift occurs because of the review with the 2-line title:

As a workaround, you can hide the titles for TripAdvisor reviews using this code:

.es-review-content-title {
  display: none;
}

As for the delay issue, I’ve checked the widget and see that the issue still persists. Also, I’ve talked to our devs and they’ve confirmed that the solution hasn’t been found yet, but they are doing their best to fix it as soon as possible.

I’ll keep you informed about any changes :slightly_smiling_face:

Hi Max,
I assume that with this code “title display none” all review titles will disappear, and that would be a pity. The titles are just the eye-catchers. Then I’d rather accept this little shift for the users on laptop. On mobile, you don’t see the shift and that is probably because on mobile the review title already displays over 2 lines in the very first review and most reviews of the slider.

Regarding the stop in the sliding, I see now there is still a problem. Last week, I could no longer see the extra pause in the sliding on my devices and thought it was repaired. But now on laptop and on PC, it stops moving completely after the first slide. It only moves once, and then starts moving again after a break of 30 or 40 seconds or not at all. But that problem only occurs if you open the homepage www.riverdaleruralholidays.com for the first time. If you have the page loaded and do a page refresh to see this behaviour again, then the problem does not occur.
It could be that my page has so many elements and moving items that the browser struggles with. I have somewhere in the general settings that the browser is allowed to keep basic elements of the website on standby so it does not need to load again from scratch for every page, so it might be just too much to load properly the first time and work better on reloading.

I then realised that on laptop and PC, I always look at it in Chrome, and that I’d better check in another browser as well. But then I discovered that my review slider does not display at all if I open the website in Microsoft Edge on my laptop. The whole app has vanished. But it works using Edge on a not-so-high-spec Windows-10 PC (my laptop is Windows 11 and an extremely high-spec machine).

Then I checked the Elfsight Click-to-call app that I use on See availability/prices, and Book Now! — Riverdale Rural Holidays and that’s the same story: if I use Edge on my laptop, the app is completely missing, but it’s there on the older PC. Any idea why the apps disappear in Edge on my laptop and which other browsers might be affected? I don’t have a Mac to check how it’s on a Macbook. I know we have quite a few Macbook users in our audience because our chat monitoring (Chatra) shows us what device every website user is on.
Apologies for all the extra questions and kind regards,
Ingrid

@Ingrid_van_Waard Thank you so much for sharing the details.

I’ve shared the info about the auto slide delay with the first page load to our devs. They’ll check it as well.

As for the Microsoft Edge issue, could you please specify the version of the browser where the widgets disappear?

Hi Max, I had a look at which version of Microsoft Edge is on my laptop, as I normally do all the work on Chrome and had to venture into the Windows menu to find and open Edge :blush:. But this is what the browser shows on opening, mentioning
/update/119?form=MT00KK&channel=stable&version=119.0.2151.72version=119.0.2151.72.
And that comes up together with a visual telling me it’s
all updated to the very latest version.
Microsoft Edge | What’s New,

And using that on a Dell XPS with the specs of the 2nd pic.


1 Like

Could you please also take a screenshot of the Developer Console and specify whether you are any plugins or DNS filtering (router or application)?

Hi @Ingrid_van_Waard :wave:

We’ve fixed the issue with the double delay. Could you please check it and let me know if it’s fine on your end?

How does it look from your end? To me, it now looks as if number 3 is nearly skipped. That shoots through in under a second, but indeed, no double delay anymore😊. But now that also happens on mobile. So not sure whether it’s an improvement.

Regarding the issue of the Elfsight apps completely disappearing in Edge on Windows 11: I tried to follow the directions to get the screenshot of the Developer Console. Hope this is what you needed. I am not aware of any filtering or using other plugins. Just the Elfsight and the chat button from Chatra.
I tried to screenshot in Dev tools of the part that relates to the section with the Elfsight app, it was quite a long piece, so a screenshot of the first part and then scrolled down to the 2nd part. Hope this is what you needed.
Kind regards,
Ingrid

Hi @Ingrid_van_Waard :wave:

I’ve checked your website and saw the issue you’ve described. However, just yesterday everything worked fine on my end.

I’ve forwarded a video screencast of the issue to our devs. I’ll keep you posted regarding any news.

As for the issue with the widget display on Microsoft Edge, you’ve shared a screenshot of the Elements tab, but we need the Console tab:

Could you please provide me with it?

As for the 3-rd party plugins, could you please let me know whether you are using apps like AdBlocker or AdGuard?

Hi Max,
I didn’t think about Ad blockers when you asked for plug-ins, and indeed, an Ad-blocker comes pre-installed (I think I opened for the first time this pre-installed ‘newest’ version of Edge since I got this new laptop last summer). And you are correct. As soon as I turned it off, the Elfsight app worked again. Apparently, the AdBlocker blocks the Elfsight apps. Which will make it hard to bypass it?

I then started to worry about the page “Reviews” All Riverdale's Guest Reviews — Riverdale Rural Holidays because that WHOLE PAGE is fully dependent on the Elfsight app for reviews. It’s only a short intro and then the 120 or so reviews ARE the page, so that page would turn into complete nonsense if the main content, the reviews, would not be shown. But I can’t check it because I already turned off the “free trial” of the upgraded AdBlock to see whether it was the culprit. I tried it turn it back on, but then I would have to take a subscription to get the same “full version” that “stops all tracking”, which the free version isn’t doing.

With the free version, the slider with a preview of our reviews is showing again on the homepage, as well as the little "click-to-call popup on the Book Now page. And the review page is unaffected. But IU never got the chance to see how it is with the upgraded version of AdBlock that was promoted when I opened Edge on my laptop.

It’s strange that the Elfsight apps were classed as “advertising” or “tracking”, although it might have to do with the fact that Elfsight does track the number of times the app is shown. That tracking mechanism must trigger the strict AdBlocker to block Elfsight.

So now - to put it into perspective - we just pray that not that many people use a laptop/pc (less than 20% of our website visitors), and that even fewer people then use Edge (most will use Chrome and many laptop-users will be Macbook users), and then even fewer people will pay to keep the upgraded AdBlocker that is pre-installed on new versions of Edge when the trial expires (although I think it was only £1). I’m glad it works all so well on mobile, as usually, that’s where the difficulties are, and for us the use of mobile phones is anyway more important (> 80% of our website visitors).

I would though like some reassurance on how things display on iPhone and MacBook, as I can’t check that from here. Is anyone of your devs able to see it on Mac systems whether my Review page displays? I wouldn’t worry if just the “click-to-call” is missing, but I would worry if a whole page is showing no content.

I guess that it’s not needed to redo the screenshot in dev tools now that we have established that AdBlock was the culprit? Well, I will attach it anyway, just in case.
Kind regards,
Ingrid

PS: the “failed to load” alert: we indeed had a link to our Facebook posts here, using the built-in feature of Squarespace for that, but I removed and disconnected that around 2 years ago. Apparently, something still lingering.

1 Like

I’ve checked your Reviews page on iPhone and everything looks fine:

As for the AdBlocker, it has certain algorithms responsible for blocking elements on a page. There are some criteria such as element content, element structure, element placement, a general structure of the page. So the widget could be blocked because of the two last parameters.

You can check whether the widget is being blocked separately from your website using Share by Link option:

In case the widget is not being blocked at this link, changing the widget’s placement of the website structure may help to fix the issue.

You can also contact your Adblocker support because it’s actually an issue on their side: they are blocking the element that should not be considered as an advertisement. I hope that they will be able to help.

Hi @Ingrid_van_Waard :wave:

Delay issue in All-in-One Reviews widget seems to be resolved now. Could you please check your website and let me know how it works?

Thanks, Max. Yes, you are right, that is then indeed a misjudgment by AdBlocker. However, I don’t think they will be very impressed if one single Elfsight user knocks on their door to tell them they make a mistake by seeing the Elfsight apps as advertising. And I don’t think it’s on my way to get the Elfsight apps recognised by the AdBlocking plugins. I guess that’s more something that should be handled by the Elfsight management. They should convince the AdBlocker companies that they are blocking the wrong thing and probably developers on both ends would need to work together to make sure that the AdBlockers can recognise that an Elfsight app is not an advertisement.
Consumers are defending themselves more and more against being tracked, and if Adblockers take the Elfsight apps out of circulation, the whole purpose of Elfsight becomes questionable. Luckily it’s now only the most strict version of AdBlocker that’s doing it, but it’s something your company probably needs to think about! And not something you or I can solve with a simple support request.

So that only leaves us with the issue of the hiccup in the carousel after the 3rd review. At first, there was an extra delay before the 3rd review would slide through, and when that was “repaired” by the devs, it changed into a weird ‘jump’. It’s not sliding through now, but the 4th review is jumping over the 3rd review very quickly without sliding. Hope you can see what I mean. But as it is only happening on the laptop and not on mobile, it’s not a big issue. It’s just that the repair made it worse, so they would better undo that (hope they saved the previous version😊).
Kind regards,
Ingrid