How to embed checklists to custom elements

Product Fruits checklists have two possible display modes. The default one is the Launcher button. This mode will add a button to your application that will open the checklist popup. It works without any developer needed, you can just build as many checklists you need directly in Product Fruits administration.

If you want to embed the checklist into a custom element in your application, choose the Embedded mode. This will allow you to display the checklist as if it was a part of your application, i.e. on the dashboard.

How to embed checklists

Start with setting up the particular checklist to the Embedded display mode on the first tab.

To insert the checklist to your selected element, call this JS API method:

const checklistId = 123456;
const yourElement = document.getElementById(....);

window.productFruits.api.checklists.injectToElement(checklistId, yourElement);

The checklistId variable can be obtained from the URL in the Product Fruits administration. When you open the checklist detail page, it is the last number in the URL.

The element must be a JS HTML DOM element instance, not a CSS selector or a jQuery method.

Listen when the checklist is dismissed or completed

window.productFruits.api.checklists.listen('dismissed', (checklistId) => {
	console.log('The checklist was dismissed by the user.');
});