Extending Initialization with Proxy and jsEndpoint

In this guide, we'll walk you through extending Product Fruits initialization using the proxy object and the jsEndpoint endpoint. This configuration gives you control over routing traffic through custom proxy server, including downloading the core script.js file from a custom domain. Follow these steps to leverage these powerful features in your implementation.

Setting Up the Proxy Object

The proxy object in Product Fruits initialization allows you to define custom endpoints for routing various requests. This is especially useful when integrating with your infrastructure for security, performance, or network routing reasons.

Here’s a typical structure of the proxy object:

proxy: {
    appEndpoint: 'https://YOUR_APP_PROXY_DOMAIN.com',
    wsEndpoint: 'wss://YOUR_WS_PROXY_DOMAIN.com',
    eventsEndpoint: 'https://YOUR_EVENTS_PROXY_DOMAIN.com',
    kbEndpoint: 'https://YOUR_KB_PROXY_DOMAIN.com',
    jsEndpoint: 'https://YOUR_JS_PROXY_DOMAIN.com', 
}

Each property in the proxy object refers to a specific endpoint used by Product Fruits:

• appEndpoint: Handles the main application interface.
• wsEndpoint: WebSocket connection for real-time interactions.
• eventsEndpoint: Logs events such as user clicks and interactions.
• kbEndpoint: Access to the knowledge base (help documentation).
• jsEndpoint: Specify the domain from which the script.js file is downloaded.

Example: Using script.js from a Custom Proxy

To use the jsEndpoint, you'll need to modify your Product Fruits installation script. This feature is currently available only for the "Other Web Apps" installation type, so be sure to use this installation method. React and NPM installations are currently hardcoded to default domains but will be updated in future releases. Below is an example of how to update your script to load script.js from a custom proxy:

<script type="text/javascript">
    (function(w, d, u) {
        w.$productFruits = w.$productFruits || [];
        w.productFruits = w.productFruits || {};
        w.productFruits.scrV = '2';
        let a = d.getElementsByTagName('head')[0];
        let r = d.createElement('script');
        r.async = 1;
        r.src = u;
        a.appendChild(r);
    })(window, document, 'https://YOUR_CUSTOM_PROXY_DOMAIN.com/static/script.js'); // Update this line
</script>

In the example above, replace https://YOUR_CUSTOM_PROXY_DOMAIN.com/static/script.jswith the URL where your custom proxy serves the script.js file.

Initializing Product Fruits with the proxy Object

Once you’ve set up the script path, the next step is to configure the proxy object in your productFruits.init call to specify your custom endpoints, including the jsEndpoint .

Here’s an example of how to use the proxy object in the initialization function:

<script type="text/javascript">
	$productFruits.push([
	    'init',
	    '<<YOUR WORKSPACE CODE>>', 
	    '<<LANGUAGE CODE>>', 
	    { 
	        username: '<<REPLACE>>' 
	    },
	    {
	        proxy: { 
	            jsEndpoint: "https://YOUR_CUSTOM_PROXY_DOMAIN.com",  // Custom domain for JS chunks
	            appEndpoint: "https://YOUR_CUSTOM_PROXY_DOMAIN.com",
	            wsEndpoint: "wss://YOUR_CUSTOM_PROXY_DOMAIN.com/ws2",
	            eventsEndpoint: "https://YOUR_CUSTOM_PROXY_DOMAIN.com/clickstream",
	            kbEndpoint: "https://YOUR_CUSTOM_PROXY_DOMAIN.com/help"
	        }
	    }
	]);
</script>

Explanation of Proxy Properties

1. jsEndpoint: This property directs where JavaScript chunks should be loaded from.
2. appEndpoint: The main application interface endpoint.
3. wsEndpoint: The WebSocket endpoint, used for real-time communication.
4. eventsEndpoint: This controls where Product Fruits sends user interaction data, such as clicks and behavior logs.
5. kbEndpoint: The knowledge base endpoint, used for accessing help documentation.

Full Example of Proxy Configuration

Here’s a complete example of how to set up Product Fruits using a custom proxy for all major endpoints, including the jsEndpoint: 

<!-- Script to load Product Fruits from custom proxy -->
<script type="text/javascript">
    (function(w, d, u) {
        w.$productFruits = w.$productFruits || [];
        w.productFruits = w.productFruits || {};
        w.productFruits.scrV = '2';
        let a = d.getElementsByTagName('head')[0];
        let r = d.createElement('script');
        r.async = 1;
        r.src = u;
        a.appendChild(r);
    })(window, document, 'https://YOUR_CUSTOM_PROXY_DOMAIN.com/static/script.js');
</script>

<!-- Initialize Product Fruits via queue -->
<script type="text/javascript">
    $productFruits.push([
        'init',
        '<<YOUR WORKSPACE CODE>>',
        '<<LANGUAGE CODE>>',
        {
            username: '<<REPLACE>>'
        },
        {
            proxy: {
                jsEndpoint: "https://YOUR_CUSTOM_PROXY_DOMAIN.com",
                appEndpoint: "https://YOUR_CUSTOM_PROXY_DOMAIN.com",
                wsEndpoint: "wss://YOUR_CUSTOM_PROXY_DOMAIN.com/ws2",
                eventsEndpoint: "https://YOUR_CUSTOM_PROXY_DOMAIN.com/clickstream",
                kbEndpoint: "https://YOUR_CUSTOM_PROXY_DOMAIN.com/help"
            }
        }
    ]);
</script>

Replace the placeholders (<<YOUR WORKSPACE CODE>>, <<LANGUAGE CODE>>, etc) with the relevant values for your environment.

Using Product Fruits with NPM and React

If you are using the NPM or React installation types, the proxy configuration is not currently available. However, since Product Fruits is open source, you can download the NPM package or React library from our GitHub repository, modify the script paths directly in the code, and integrate them into your project.

Steps to use the custom proxy in NPM/React:

1. Download the source code from our GitHub repository.
2. Modify the domain paths in the package to point to your custom proxy.
3. Use the modified package in your project.