# Javascript

To install our beautiful widget on your website, the first step is to choose the element that you will use as selector, it can be a button, width, div or even a span. This selector will be used to open or close the widget, as in the example below:

<div class="changelogfy-widget"></div>

The next step is to insert our javascript code, it must be inserted inside the tag or before closing the tag.

<script>
    let CLF_config = {
        selector: ".changelogfy-widget",
        app_id: "API TOKEN"
    };
</script>
<script async src="https://widget.changelogfy.com/index.js"></script>

Important!

Do not host our index.js in your servers!

The "selector": ".changelogfy-widget" ensures that this code will find the element with changelogfy-widget class and insert the badge into that element.

This will create a new widget instance.

# Identify your users

In your script you need to send the data parameter, with the user information.

<script>
  var CLF_config = {
    selector: ".changelogfy-widget", //required
    app_id: "API TOKEN", // required
    data: {
      user_id: '30631b96-3add-4f9a-addc-9f4cd1cf5915', // required - userId in your software
      user_name: 'User Name', // optional
      user_email: 'user@email.com', // optional
      is_following: false, // optional (boolean) - disable user to receive email notifications
      custom_data: {
          'Job_Role': 'CEO', // Example data
          'Plan': 'Pro', // Example data
          'teammates': '4', // Example data
          'Monthly_Spend': '50 USD' // Example data
      }
    }
  };
</script>

NOTE

User updates are not processed in real time, it may take a few minutes for the information to be updated on your dashboard.