flowbox.js

<script>
    // Container div the flowbox needs to be rendered in
    const containerId = "#js-flowbox-flow";
    // Flowbox flow key
    const key = "2vkzHCHySqi_6a0Fn5ZmLA";

    const loadScript = () => {
        (function (d, id) {
            if (!window.flowbox) {
                var f = function () {
                    f.q.push(arguments);
                };
                f.q = [];
                window.flowbox = f;
            }
            if (d.getElementById(id)) {
                return;
            }
            var s = d.createElement("script"),
                fjs = d.scripts[d.scripts.length - 1];
            s.id = id;
            s.async = true;
            s.src = "https://connect.getflowbox.com/flowbox.js";

            //Init flowbox component when the script is loaded
            s.addEventListener("load", () => {
                window.flowbox("init", {
                    container: containerId,
                    key: key,
                    locale: "auto",
                    productId: '<product-id>',
                });
            });
            fjs.parentNode.insertBefore(s, fjs);
        })(document, "flowbox-js-embed");
    };

    const callback = (entries, observer) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                loadScript();
                observer.disconnect();
            }
        });
    };

    const observer = new IntersectionObserver(callback, {
        rootMargin: "400px",
        threshold: 0.1,
    });

    const target = document.querySelector(containerId);
    observer.observe(target);
</script>

Line 3 is the ID of the container the flowbox needs to be rendered in.
Line 5 is the key from Flowbox we use to get the right carousel data.
Line 31 should be set dynamically.