Как подключить этот скрипт из отдельного файла к имени юзера?

То есть у меня есть переменная user и есть такой скрипт, генерящий аватарку по первой букве никнейма, но я не пойму как его подключить к переменной юзера...или саму переменную с именем в него надо запихивать.? тоесть подключть его надо к переменной php $user - созданной при регистрации ..этот скрипт я в интернете нашел.

Код (Text):

1.  
2. <div class="user-info">
3.     <div class="user-info-avatar" id="avatar"></div>
4.     <div class="user-info-name" id="name"></div>
5. </div>
6.  
7. <script>
8.    var stringToColor = function stringToColor(str) {
9.     var hash = 0;
10.     var color = '#';
11.     var i;
12.     var value;
13.     var strLength;
14.  
15.     if(!str) {
16.         return color + '333333';
17.     }
18.  
19.     strLength = str.length;
20.  
21.     for (i = 0; i < strLength; i++) {
22.         hash = str.charCodeAt(i) + ((hash << 5) - hash);
23.     }
24.  
25.     for (i = 0; i < 3; i++) {
26.         value = (hash >> (i * 8)) & 0xFF;
27.         color += ('00' + value.toString(16)).substr(-2);
28.     }
29.  
30.     return color;
31. };
32.  
33. var name = 'alex';
34. var letter = name.substr(0, 1);
35. var backgroundColor = stringToColor(name);
36. var elementAvatar = document.getElementById('avatar');
37. var elementName = document.getElementById('name');
38.  
39. elementName.innerHTML = name;
40. elementAvatar.innerHTML = letter;
41. elementAvatar.style.backgroundColor = backgroundColor;
42.  
43. </script>
44.  
45. <style>
46.     .user-info-avatar {
47.     display: inline-block;
48.     width: 30px;
49.     height: 30px;
50.     line-height: 30px;
51.     border-radius: 15px;
52.     text-align: center;
53.     margin-right: 10px;
54.     color: white;
55. }
56. .user-info-name {
57.     display: inline-block;
58. }
59.  
60. </style>