How to preview LayerZ in any site

LayerZ, like any other tool you use in your website, requires to be integrated. However, we can do a workaround to preview how LayerZ would look like in a website without integrating it there. This won’t affect the actual website, just your local experience of it. So, don’t worry about ruining the website for other users 😇

You can run LayerZ in any site following these steps:

• Open the Web Inspector, which is a built-in browser tool that allows you to inspect and modify web pages. You can access this by right-clicking anywhere on the page and selecting 'Inspect' from the context menu, or by using keyboard shortcuts like F12 on Windows/Linux or Command+Option+I on Mac.
• Navigate to the Console tab in the web inspector.
• Copy and paste the following code into the console and press Enter.

function injectScript(scriptUrl, callback) {
    const scriptElement = document.createElement('script');
    scriptElement.src = scriptUrl;
    scriptElement.onload = function () {
        console.log('Script loaded:', scriptUrl);
        if (typeof callback === 'function') {
            callback();
        }
    };
    scriptElement.onerror = function () {
        console.error('Error loading script:', scriptUrl);
    };
    document.head.appendChild(scriptElement);
}

injectScript("https://lz-web-sdk-prod.s3.eu-west-1.amazonaws.com/latest/lz-web-sdk.js", () => {
    var workspaceId = "669920bbf59a3cf20d3e76f9";
    LayerZ.init({ workspaceId, variables: {} });
});

⚠️ Warning! This method won't always work. Some websites have security measures that prevent this approach.

ℹ️ Note To demonstrate different use cases, you can modify the workspaceId variable. Contact your LayerZ representative for available options.