Shoppable Recipes

Add buttons to your recipe pages so users can create a shopping list or add the ingredients for a recipe to their online grocery basket. There are 2 ways to create buttons:

Note: To make your recipes shoppable they must be understood by Whisk, to check how we’ve parsed your recipe go to the recipe validator.

Go to the widget builder and choose the options for your buttons. Click ‘Refresh Preview’ to see exactly how your widget will look and work (you can click it to test it). You can also enter your own recipe url to test.
Click ‘get code’ and follow the instructions to copy the code to your site.

Here is an example of what you can create with the widget builder:

Go to widget builder

Create your own buttons

If you don’t want to use Whisk’s default widget, you can build your own button and attach Whisk code to add shopping functionality. For example, if you want to take more control over the styling.

Firstly, we need to create an HTML button on your page. You can set up any type of HTML element to be a button, the most important thing is to give the element a unique ID. This ID is used in step 3. This should be added to your page exactly where you want the button to appear.
Add recipe to shopping list
Add the SDK script to your page, ideally in the . This script contains the core functionality of the SDK. Note: this should only be added to your page once.

var whisk = whisk || {};
whisk.queue = whisk.queue || [];

Lastly, we will make the button perform an action on click. Using the same ID as in step 1, we create a clickListener so Whisk knows what action to perform when the button is clicked. To add a recipe straight to a shopping list, we use the method addRecipeToList.

whisk.queue.push(function() {
  whisk.listeners.addClickListener('whisk-single-recipe', 'shoppingList.addRecipeToList', {
    recipeUrl: 'https://whisk.com/demo/calzone-roasted-peppers',
  });
});

This code should be added after the button code from step 1.

Style the buttons

The default widget provides a few basic styling options. Making your own buttons with eventListeners means styling is completely in your hands.

Alternatively, if you like the simple approach of the default widget but would like more styling changes, you can contact us to get a whitelabel. Whitelabels are design customisations we make for you — you just have to add the whitelabel parameter and tell us how you want the buttons to look!

Add multiple recipes to a list

You can also add more than one recipe to a shopping list at once. This can be used to make things like meal planners shoppable.

To do this you can use a Click Event Listener.

The steps are the same as adding a single recipe, but we’ll use the addRecipesToList method. Using this method allows you to specify an array (list) of recipes to add at once.

whisk.queue.push(function() {
    whisk.listeners.addClickListener(
        'whisk-multiple-recipes',
        'shoppingList.addRecipesToList',
        {
            recipes: [
                'https://www.goodtoknow.co.uk/recipes/baked-spiced-chicken-with-couscous',
                'https://www.bbcgoodfood.com/recipes/strawberry-green-goddess-smoothie',
                'https://www.bbcgoodfood.com/recipes/bone-broth'
            ],
        }
    );
});

Add recipes to basket

Whisk also allows users to send items to their preferred online grocery basket. Whisk automatically matches items to appropriate store items, which can then be transferred to the online retailer.

Using the Whisk SDK you can transfer entire shopping lists, individual or multiple recipes, and even single products to a basket.

The add-to-basket functionality is included in the shopping list, users in regions with online grocers (which are integrated with Whisk) will see the "Add to basket" button.

Add a recipe directly to basket

It’s possible to bypass the shopping list and allow users to add recipes straight to the basket.

The Whisk default widget contains an "Add to basket" button but you can create your own button using the addRecipeToBasket method.

Firstly, we need to create an HTML button on your page. You can set up any type of HTML element to be a button, the most important thing is to give the element a unique ID. This ID is used in step 3. This should be added to your page exactly where you want the button to appear.
Add recipe to basket
Add the SDK script to your page, ideally in the . This script contains the core functionality of the SDK. Note: this should only be added to your page once.

var whisk = whisk || {};
whisk.queue = whisk.queue || [];

Lastly, we will make the button perform an action on click. Using the same ID as in step 1, we create a click eventListener so Whisk knows what action to perform when the button is clicked. To add a recipe straight to a basket, we use the methodaddRecipeToBasket.

This code should be added after the button code from step 1.

whisk.queue.push(function() {
    whisk.listeners.addClickListener('whisk-basket', 'shoppingList.addRecipeToBasket', {
        recipeUrl: 'https://whisk.com/demo/calzone-roasted-peppers',
    });
});

Add recipe to basket

You can also control things such as which retailer is selected by default (if any). See the SDK Reference to learn more.

Analytics and event tracking

The Whisk shopping list SDK tracks many events and data points. These analytics can help you measure performance, analyse traffic and learn more about how your customers are interacting with the shopping tools.

Most of the analytics are only available to paid customers, although the SDK does have a Subscription service that allows you to tie in your own analytics for some basic events.

In all cases for analytics, you’ll need an trackingID so we can link all data to your account. Please contact us for more information.

Full dashboard

Whisk offers a full, interactive analytics dashboard showing site-wide performance of Whisk on your website. This contains all information about how users are interacting with the shopping tools, you can sort by date range or devices and even export data.

Subscriptions

Subscriptions allow you to call any function you want in response to an SDK event. This will allow you to send events to your own analytics package.

For example, you can send an event to Google Analytics every time the Whisk button was viewed:

whisk.events.subscribe('whisk-single-recipe', 'view', function() {
    // your custom code, for example:
    ga('send', {
        hitType: 'event',
        eventCategory: 'Whisk widget',
        eventAction: 'view',
        eventLabel: 'Fall Campaign'
    });
});

The exact list of events is defined by integration type. See events available for click listeners and widgets.

Read the Subscriptions API for more information.

More configuration options

Whether you use the widget builder or create buttons yourself using Event Listeners, there are many parameters available that let you customize various parts of the experience, from the default language to which retailers a user sees.

View the SDK Reference to see all parameters, their definitions, and possible values.

PreviousExamples NextShoppable Products

Last updated 5 years ago

Was this helpful?

Use Whisk's default widget