.. _add-custom-js:

=============================
Adding custom JavaScript code
=============================

The end-user and staff frontend are loading the files from the following URLs:

* ``/assets/js/custom.js`` - URL loaded by the end-user panel
* ``/staff/assets/js/custom.js`` - URL loaded by the staff panel

By default, the two ``custom.js`` files contain just some commented JavaScript code:

.. code-block:: javascript

    (function () {
    // window.setHeaders = function (request, getCookie) {
    //   return {
    //     CustomHeader: getCookie('customCookieName'),
    //   }
    // }
    })();


The files are served from the ``fleio-frontend-1`` Docker container. Their paths in the container's file system are:

* `/var/webapps/fleio/frontend/staff/assets/js/custom.js` - for staff panel
* `/var/webapps/fleio/frontend/enduser/assets/js/custom.js` - for enduser panel

You can replace the content of the two files with your own JavaScript code.

.. note::

    For permanent changes you must add your modifications to a ``Dockerfile`` as described in
    :ref:`change-docker-files`.


.. _customizing-headers:

Customizing request headers
---------------------------

You may also want to customize the headers sent by the frontend to the backend API.

Just like in the above commented JavaScript code, you can return from the ``window.setHeaders`` function a dictionary
with the custom headers to add or to override. For example, you can use the ``request`` param to add conditions
based on request method. You can use the ``getCookie`` param that references a method used for getting a cookie by name
(exemplified in the commented code of the template). Returning ``null`` will not update the headers at all.