<script type="text/javascript">
        const helpscoutBasicProperties = {
                'name': '{{ request.user.get_full_name }}',
                'email': '{{ request.user.email }}',
                'signature': '{% generate_hmac_signature request.user.email %}'
                // instruction to generate signature in PHP is here https://developer.helpscout.com/beacon-2/web/secure-mode/#php
        }

        function init_identify() {
            const avatar = "{% if request.user.avatar %} {{ request.user.avatar.url }} {% endif %}".trim();

            const helpscoutProperties = {
                ...helpscoutBasicProperties,
                'avatar': avatar ? avatar : '',
                'first': '{{ request.user.first_name }}',
                'default-source': '{% get_default_source_name request.user.id %}', // of default connection
                'default-destination': '{% get_default_destination_name request.user.id %}', // of default connection
                'user-id': '{{ request.user.id }}',
                'plan-type': '', // yet to implement
                'plan-expiration': '', // yet to implement
                'date-joined': '{{ request.user.date_joined|date:"Y-m-d" }}',
                'timezone': '{{ request.user.timezone|default:"" }}',
                'setup-step': '{{ request.user.setup_step }}',

            }

            window.Beacon('identify', helpscoutProperties);
        }

        // set event listener to update customer properties. get key value from event
        // useful when customer data updates without page refresh e.g. when customer change their default connection
        window.addEventListener('helpscout:updateCustomerProperties', function (e) {
            const helpscoutProperties = {...helpscoutBasicProperties};

            Object.keys(e.detail).forEach(key => {
                if (key === 'elt') return;
                helpscoutProperties[key] = e.detail[key];
            })

            window.Beacon('identify', helpscoutProperties);
        });

        init_identify();
    </script>