For use Changelogfy with VueJS or ReactJS, follow link's bellow:
ReactJS
VueJS

For normal installation, please continue with tutorial bellow:

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>


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.

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
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>
Was this article helpful?
Cancel
Thank you!