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

1. Open your experience in the Visually.io editor.

2. Click on the Trigger section.

3. Select Custom JS Trigger.

4. 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);
  });
});