Event Listeners

Event listeners allow you to automatically call any Whisk SDK basic method in response to user actions.

Click Listeners

Click listeners allow you to call any Whisk SDK basic method in response to user click on predefined DOM element. In order to create a click listener call

whisk.listeners.addClickListener(element_id, method_name, method_parameters)

function, which will add event listener to DOM element with element_id id attribute. This listener will call method_name method with method_parameters.

method_parameters supports the same parameters as a method_name does, plus one extra non-required parameter:

ATTRIBUTETYPEDESCRIPTION
trackViewboolean

If you're planning to use multiple buttons with a click listener on a single page, you might consider passing false to all buttons except one to eliminate duplicate view events (impressions) sent to Whisk analytics. Note: This field won't affect subscription events.

Default value: true

Here is a simple example of usage:

<button id="button1">Add recipe to shopping list</button> <script> whisk.queue.push(function() { whisk.listeners.addClickListener('button1', 'shoppingList.addRecipeToList', { recipeUrl: 'https://whisk.com/demo/calzone-roasted-peppers', }); }); </script>
Note: recipeUrl is optional and can be excluded. If it is not included, the URL of your page (which this code is used on) will be taken as the recipe url.

In order to remove click listener call whisk.listeners.removeClickListener(element_id) with the same element_id you used in whisk.listeners.addClickListener.

Subscriptions

Read general information about subscriptions here. Click listeners support following event types:

  • view - the element to which click listener is attached appeared in the viewport. Triggered once. No custom data for this event type.
  • click - the element to which click listener is attached has been clicked. No custom data for this event type.

Page Load Listener

Page load listeners allow you to call any Whisk SDK basic method in response to page load when whisk-show=1 parameter is in the page URL. In order to create a page listener call

whisk.listeners.addShowListener(method_name, method_parameters)

function. This listener will call method_name method with method_parameters. Here is simple example of usage:

<script> whisk.queue.push(function() { whisk.listeners.addShowListener('shoppingList.addRecipeToList', { recipeUrl: 'https://whisk.com/demo/calzone-roasted-peppers', }); }); </script>