I have made the badge Combined (Inline and Floating) but for some reason on mobile it is updating to Stacked (Inline and Floating) automatically. I have combined floating style set but when viewing on mobile for some reason it reverts to the compact badge style. WHY? I cant seem to figure out how to disable the mobile seperated source slider functionality. I prefer to match the desktop experience where the total reviews are shown across all sources and it opens to the “all reviews” tab just like desktop experrience. Is this a bug or expected behavior? In elfsight when I change between devices to preview I confirm that the mobile is automatically changing from combined to stack despite no such option.
2 Likes
Hi there and welcome to the Community, @Dan1 
That’s a good question! Yep, we’ve intentionally made a different view for the Combined Floating layout on mobile devices. The goal was to have the widget take up less screen space and integrate more seamlessly with most websites.
However, I completely understand your specific need and our devs will create custom code to make the mobile view match the desktop version.
I’ll get back to you once the solution is ready 
1 Like
Thank you! I am looking forward to the custom code. I’m guessing it’s some JS I can add in the widget settings? I will be checking here regularly. In the mean time I removed the widget on mobile because my client does not like seeing the reviews on mobile being signifncant different than the combined total expected number. Majority of our review is in 2 sources while we have 5 total sources. This is why we have a big difference in seeing the total # of reviews vs just the total number from the first source when the widget first loads on mobile.
I totally understand but there was never an issue with taking up too much space in the first place. There were even tweaks to modify the size from S M L. In the future I would think you should add some sort of toggle (swap to compact on mobile devices?) or at least some notification these changes/ehancements were done rather than removing functionality entirely.
2 Likes
Yep, here is a solution from the devs.
We’ve switched the layout to the Compact Badge. Then we’ve added this code to the Custom CSS field on the Style tab of your widget’s settings:
.es-compact-badge-container {
padding: 16px 24px 20px;
}
.es-compact-badge-container,
.es-badge-rating-container {
display: grid;
justify-content: center;
justify-items: center;
gap: 8px;
}
.es-badge-sources-container {
display: none;
}
.es-rating-value {
font-size: 26px;
line-height: 32px;
}
.es-rating-bar-container :is(div, svg) {
width: 26px;
height: 26px;
}
.es-badge-reviews-count {
font-weight: 600;
}
.es-compact-badge-container:hover .es-badge-reviews-count {
text-decoration: underline;
}
@media (max-width: 481px) {
.slide-in-position-container {
justify-content: start;
margin-left: 20px;
}
}
This code contains a part that hides the source icons, since they were disabled in the settings. If you’d like to show icons, feel free to remove this part from the code:
Also, we’we added this script to the Custom JS field on the Settings tab of your widget’s settings:
const watchDocument = (widgetId, cb) => {
if (!widgetId || typeof cb !== "function") return;
const observer = new MutationObserver(() => {
const portalSelector = `.es-portal-root[class*="${widgetId}"`;
const portal = document.querySelector(portalSelector);
if (!portal) return;
cb(portal);
observer.disconnect();
});
observer.observe(document, {
childList: true,
subtree: true,
});
};
const watchPortal = (portal, map) => {
if (!portal || !map) return;
const observer = new MutationObserver(() => {
const reviewsCountElement = portal.querySelector(".es-badge-reviews-count");
if (!reviewsCountElement) return;
const textContent = reviewsCountElement.textContent;
if (!textContent) return;
const cleanedText = textContent.match(/\d.*\d/g)?.[0] || "";
const number = cleanedText.replace(/\D/g, "");
const reviewCount = +number;
if (Number.isNaN(reviewCount)) return;
const reviewText =
reviewCount === 1 ? map.sufix.singular : map.sufix.plural;
const textContentTemplate =
`${map.prefix} ${cleanedText} ${reviewText}`.trim();
if (reviewsCountElement.textContent !== textContentTemplate) {
reviewsCountElement.textContent = textContentTemplate;
}
});
observer.observe(portal, {
childList: true,
subtree: true,
});
};
const defaultMap = {
prefix: "",
sufix: {
singular: "review",
plural: "reviews",
},
};
const customizeReviewsCount = (widgetId, map = defaultMap) =>
watchDocument(widgetId, (portal) => watchPortal(portal, map));
customizeReviewsCount("4b92670c-ae50-40df-ab04-263601f9f9b6");
Note: Custom JS doesn’t operate in the preview mode. Thus, you’ll see all changes when checking the widget right on the website or through the Share Link.
Please check it out and let me know if you like the result
Regarding this suggestion, does it mean that you’d like to have a Compact badge on mobile (screenshot 1) and a Card badge on desktop (screenshot 2), but not a Card badge for both desktop and mobile view?
2 Likes
Hello Max thank you for this code that was fast!
We want the same experience on all devices! Card badge for both desktop and mobile view. NO compact badge on mobile. Right now in the widget preview when I change to mobile it is stacking and showing the sliders for each source.,
Currently im not seeing the badge on mobile. Is this live? I see you already updated my widget with the code for me. Please advise.
2 Likes
Hi @Dan1
You’ve mentioned that you’ve removed the widget on the mobile version:
Have you restored it and it still didn’t appear? I also see that you’ve switched the layout back to the Card Badge. To make the code work correctly, you should choose the Compact badge layout,
This way, the widget will look like a Card badge on desktop and mobile.
Thus, please switch the layout to Compact badge, restore the mobile version and check it right on the website
1 Like
Hello @max1 I am all set now. I duplicated the widget and changed to compact view and it worked as expected. When viewing on mobile I don’t see any slider dots and the review total is the consolidated number. Thank you so much!
Not sure what was going on with the original widget. I have a question though I noticed that in the JS you refrence the widget ID
customizeReviewsCount(“4b92670c-ae50-40df-ab04-263601f9f9b6”);
Should I update this ID on the new widget to match itself? I am worried if I delete the original widget (ending in b6) this new one will stop working. For now I will keep both until I hear back.
Thank you
1 Like
Hello, @Dan1!
Glad to know everything is fine now 
As for the widget ID, you’re absolutely right! If you’re going to use the code in a different widget, you should add a relevant widget ID there.
1 Like