mynde on "JS in main page"

Hello community im really stuck with this thing , maby you can help me out.
I'm trying to add a small piece of java script from this project - http://introjs.com/ to main main page that is running on buddypress , i was trying to add it in my header.php , index.php and so on , but no luck so far, as you can allready tell im a total beginner. this is the code that i need to add

<script type="text/javascript">
$(function(){
  var introguide = introJs();
  // var startbtn   = $('#startdemotour');

  introguide.setOptions({
    steps: [
    {
      element: '.nav-bar',
      intro: 'This guided tour will explain the Hongkiat demo page interface.<br><br>Use the arrow keys for navigation or hit ESC to exit the tour immediately.',
      position: 'bottom'
    },
    {
      element: '.nav-logo',
      intro: 'Click this main logo to view a list of all Hongkiat demos.',
      position: 'bottom'
    },
    {
      element: '.nav-title',
      intro: 'Hover over each title to display a longer description.',
      position: 'bottom'
    },
    {
      element: '.readtutorial a',
      intro: 'Click this orange button to view the tutorial article in a new tab.',
      position: 'right'
    },
    {
      element: '.nav-menu',
      intro: "Each demo will link to the previous & next entries.",
      position: 'bottom'
    }
    ]
  });

  introguide.start();

});
</script>

where should i put this? , P.s my website is http://l2adr.com