---
title: "Extending Initialization with Proxy and jsEndpoint"
url: "https://help.productfruits.com/en/article/extending-initialization-with-proxy-and-jsendpoint"
language: "en"
last_updated: "2025-11-19T10:47:46.934Z"
---

# 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:

```javascript
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:

```javascript
<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.js`with 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:

```javascript
<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 j`sEndpoint`: 

```javascript
<!-- 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](https://github.com/product-fruits).
2.  Modify the domain paths in the package to point to your custom proxy.
3.  Use the modified package in your project.