How to Set Up a PathFactory Experience to Open an Overlay on a Website

Adding a PathFactory overlay to your website enables you to enhance user engagement. This feature allows you to link directly to a PathFactory Landing Page and display it as an overlay on a website, keeping visitors on your page while offering personalized, interactive content.

By minimizing the need for navigation away from your site, you can improve user experience, reduce bounce rates, and provide immediate access to relevant content.

Prerequisites

Before you start, ensure you have the following access and information:

• Access to your website’s HTML code.
• A PathFactory Experience URL.

With these prerequisites in place, you’re ready to begin setting up the overlay for your website.

1. Add the Overlay Script and Stylesheet

To enable the overlay functionality on your website, you must add the PathFactory overlay script and stylesheet to the code. To do this, copy the following code snippet and place it before the closing </head> tag of your HTML file:

<script src="https://cdn-app.pathfactory.com/libraries/overlay/overlay.js" async></script>
<link href="https://cdn-app.pathfactory.com/libraries/overlay/overlay.css" rel="stylesheet" type="text/css"/>

2. Add the Overlay Trigger Code

Next, add a code block to your website where you want the overlay to be triggered. Place the following code snippet in the appropriate location on your website:

<a href="#" id="pfContentTrackOverlay" data-lookbook-overlay-href="" data-lookbook-overlay-width="80%" data-lookbook-overlay-height="80%" style="display:none"></a>

<script>
    const pfDomains = ['subdomain.yourcompany.com', 'www.yourcompany.com'];

    function stripWWW(e) {
        const m = e.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0];
        if (!m) { return e; }
        else { return m; }
    }

    function checkPFDomain(d) {
        var cleanDomainsList = [];
        pfDomains.forEach(function (m) { cleanDomainsList.push(stripWWW(m)); });
        var overlayDomain = new URL(d).hostname;
        overlayDomain = stripWWW(overlayDomain);
        var overlayMatch = cleanDomainsList.includes(overlayDomain);
        return overlayMatch;
    }

    function openPFOverlay(e) {
        var n = document.getElementById("pfContentTrackOverlay");
        n.setAttribute("data-lookbook-overlay-href", e);
        n.click();
    }

    const pfOverlayParam = new URLSearchParams(window.location.search);
    const pfOverlayUrl = decodeURIComponent(pfOverlayParam.get('pfoverlay'));
    if (pfOverlayUrl && checkPFDomain(pfOverlayUrl)) {
        window.addEventListener('load', (event) => {
            openPFOverlay(pfOverlayUrl);
            document.getElementById("lookbook-overlay-close").addEventListener("click", updateURL);
        });
    }

    function updateURL() {
        pfOverlayParam.delete('pfoverlay');
        var updatedUrl = pfOverlayParam.toString() === '' ? `${window.location.origin}${window.location.pathname}` : `${window.location.origin}${window.location.pathname}?${pfOverlayParam.toString()}`;
        window.history.pushState({}, '', updatedUrl);
    }
</script>

3. Add the Query Parameter to Your URL

Finally, append the query parameter pfoverlay to your page URL, populated with an encoded PathFactory Experience URL:

https://example.com?pfoverlay=https%3A%2F%2Fnurturenow.pathfactory.com%2Fexample-track%2F

Views: 8