Show WhatsApp widget on scoll

Ask the Community General Questions
1

I would like my widget only to pop up as the page is scrolled

1 Like
3

Hi there, @cameron_graham :waving_hand:

This option is already available in the widget. You can enable it in the Open Chat Triggers section on the Settings tab. Just set the Scroll Position when the chat should be opened and you’ll be fine:

image
image327×297 8.19 KB
image
image329×484 11.1 KB


Check it out and let me know how it worked :wink:

4

No unfortunately it did do anything, even at 75%.

Also is this for the widget to show or for the chat box to open?

1 Like
5

Ah, you wanted the chat bubble to appear on scroll, right?

6

Yes please

1 Like
7

Okay!

I’ll discuss with the devs if it’s possible and report back once I have their response :wink:

1 Like
8

Hi there, @cameron_graham :waving_hand:

We’ve added this code to the Custom CSS field on the Appearance tab of your widget’s settings:

.global-styles,
.eapps-whatsapp-chat-063445a0-1762-469b-bf75-2cc9bcc72a5d-custom-css-root {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.5s ease-out;
}

.global-styles,
.eapps-whatsapp-chat-063445a0-1762-469b-bf75-2cc9bcc72a5d-custom-css-root.visible,
body:has(#root > [class*="Preview__Container-sc"])
.eapps-whatsapp-chat-063445a0-1762-469b-bf75-2cc9bcc72a5d-custom-css-root {
	visibility: visible;
	opacity: 1;
}

And this script was placed in the Custom JS field (right under the Custom CSS):


const TARGET_SCROLL_PERCENT = 75;

function getCurrentScrollPercentage() {
	const scrollTop =
		document.documentElement.scrollTop || document.body.scrollTop;
	const scrollHeight =
		document.documentElement.scrollHeight || document.body.scrollHeight;
	const clientHeight = document.documentElement.clientHeight;

	return (scrollTop / (scrollHeight - clientHeight)) * 100;
}

function showBubble() {
	document.querySelector(".eapps-whatsapp-chat-063445a0-1762-469b-bf75-2cc9bcc72a5d-custom-css-root")?.classList.add("visible");
}

function handleBubbleOnScroll() {
	if (getCurrentScrollPercentage() >= TARGET_SCROLL_PERCENT) {
		showBubble();
		
		document.removeEventListener('scroll', handleBubbleOnScroll);
	}
}

document.addEventListener('scroll', handleBubbleOnScroll);
handleBubbleOnScroll();

In the 1st line of this script you can change the scroll percent postion:

image
image608×434 38 KB


Check it out and let me know if you like the result :slightly_smiling_face:

2 Likes
9

thats perfect! thank you so much guys!

2 Likes
10

Great, you’re always welcome :wink:

In the meantime, we’d like to invite you to participate in our new contest, where you can win a 6-month extension for your subscription - May Contest: Create a Caption for Our Photo and Win 6 Months FREE! :rocket:

Check the details and join in :wink: