Install widget

Learn how to install our beautiful widget and keep your users engaged.

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 </body> tag.

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

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

Single page application

Some applications that dynamically reload content (Angular, React, Vue, Ember, etc) mean you'll probably want to initialize the widget within your JavaScript code.

To do this, you need to instantiate and call the init method, as in the example below:

<script src="https://widget.changelogfy.com/index.js"></script>
<script>
let config = {
selector: ".changelogfy-widget",
app_id: "APP_ID"
};
changelogfy.init(config);
</script>

This will create a new widget instance.

Observation

  • Running the widget.init() method will destroy the previous widget and replace it with a new instance.

  • In Angular, React, Vue, Ember, you should initialize the widget whenever the badge element container is rendered again.

Widget API:

let CLF_config = {
selector: ".changelogfy-widget", //required
app_id: "APP_ID", // required
backdrop: true, // optional - default false
top: 100, // optional
left: 50, // optional
init_badge: false // optional - default true
};

Open widget

changelogfy.open();

Close widget

changelogfy.close();

Styling the badge

As the badget is injected into your HTML code, you can stylize it with CSS easily.

For example, if you need to put the badget more up or lower you can do as in the example below:

<style type="text/css">
#changelogfy_badge_counter #changelogfy_badge {
top: -1px !important;
left: -15px !important;
background: #cd201f !important;
width: 12px !important;
height: 12px !important;
}
</style>

‚Äč