Custom buttons and JavaScript actions

This feature is not currently available for all accounts.

If you want to execute a custom action after the user clicks on the custom button in tour/hint cards, this article will tell you how to do that.

Add a custom button

Add a custom button to the tour/hint card and select the "Execute JavaScript" action. You have to insert an identification of the action, which can be any string. You will need this identifier later in your JavaScript code.

Handle the action in your code

Then, somewhere in your code, you must listen to the productfruits_card_custom_btn_click event. You will get the identifier (you set in the previous step) as the event parameter. For example:

window.addEventListener('productfruits_card_custom_btn_click', (e) => {
	if (e.detail.id == 'my-button-1') {
		window.productFruits.api.tours.advanceToNextStep(123456);
	}
});

As you can see, we checked if the identifier of the button is equal to what we set before and then we used Product Fruits JS API to advance the tour to the next step.