How to Trigger an Experience When a User Scrolls to a Specific Component
You can launch an experience in Visually.io based on specific component reach e.g. only after a user scrolls to a certain part of your page, like a product module, banner, or form. This is especially useful for mid-funnel engagement or ensuring users reach key content before showing an overlay or in-page test.
This guide walks you through triggering an experience when a specific component comes into the viewport using a Custom JS Trigger.
Step-by-Step Instructions
-
Open your experience in the Visually.io editor.
-
Click on the Trigger section.
-
Select Custom JS Trigger.
-
Paste the following code replacing
your-css-selector-here
with the actual selector of the component you want to watch:
return new Promise((resolve, reject) => {
const SELECTOR = `your-css-selector-here`;
loomi_api.when(() => document.querySelector(SELECTOR)).then((target) => {
if (!(target instanceof Element)) {
reject(new TypeError('Target must be a DOM Element'));
return;
}
const defaultOpts = { root: null, rootMargin: '0px', threshold: 0 };
const observerOpts = { ...defaultOpts };
const { top, bottom } = target.getBoundingClientRect();
const { innerHeight } = window;
if (top < innerHeight && bottom > 0) {
resolve(target);
return;
}
const observer = new IntersectionObserver(entries => {
const entry = entries[0];
if (entry.isIntersecting) {
observer.disconnect();
resolve(target);
}
}, observerOpts);
observer.observe(target);
});
});
-
The experience will trigger only when the user reaches content that indicates interest
-
Test it in an incognito window or browser session in various screen sizes.
-
You can combine this with other triggers (like URL rules) for more advanced targeting.