Whisk Docs
Whisk HomeHelp CenterDeveloper Tools
v2.0.0
v2.0.0
  • The Whisk Platform
  • Whisk API Overview
    • Introduction
    • Integration
    • Authentication
      • Server Token
      • User Access Token
        • Auth Flow Example
      • Client Token
      • Anonymous Access from Client Apps
    • Whisk Sandbox
    • Getting Started
  • Whisk API Reference 2.0
    • Provisioning
      • Get provisioning
    • Autocomplete
    • Community
      • Get your Communities
      • Get Communities from a Topic
      • Discover Recommended Communities
      • Search Communities
      • Get a Community
      • Get Recipes from a Community
      • Add Recipes to a Community
      • Remove a Recipe from a Community
      • Join a Community
      • Leave a Community
    • Posts and Reviews
      • Get reviews for a recipe
      • Create or edit review
      • Create a Post
      • Get Post by id
      • Delete a Post
      • Edit a Post
      • Report a Post
      • Create a Post Reply
      • Get Post Replies
      • Delete a Post reply
      • Report a Post reply
      • Like a Post or Reply
      • Users who liked a Post or Reply
    • Public profiles
      • Hide recipe in Public profile
      • Get Recipes for Public Profile
      • Get User's public profile by user_id
      • Get User's public profile by username
    • Custom Label
    • Feed
      • Obtain a Recipe Feed
    • Food DB
      • Autocomplete
      • Search
      • Get Food
    • Food List
    • Food Log
    • Foodpairing
    • Healthy meal recommendations
      • Healthy recipe only recommendations for DA
      • Recipe recommendations for SH
      • Tailored Plan API request for Samsung TV
    • Meal Plan
      • Generate a Meal Plan
      • Meal Object
        • Get Meals
        • Delete Meal
        • Add a Meal
      • Meal Plan Settings Object
        • Get Meal Plan Settings
        • Update Meal Plan Settings
      • Meal Plan Batch
    • Recipe
      • Get a Recipe
      • Search a Recipe
      • User Recipes & Collections
        • Add User Recipe
        • Create A Recipe
        • Update External Recipe
        • Get All User Recipes
        • Update User Recipe
        • Remove Recipe from Favorites
        • Create Collection
        • Get All User Collections
        • Get Collection
        • Get Recipes from a Collection
        • Remove Collection
        • Get Smart Collection
        • Get Recipes from a Smart Collection
    • Shopping List
      • Get your Shopping Lists
      • Get a Shopping List
      • Create a Shopping List
      • Delete a Shopping List
      • Update basic details of a Shopping List
      • Move Items between Shopping Lists
      • Add Items to a Shopping List
      • Delete an Item from a Shopping List
      • Update an Item in a Shopping List
      • Clear Items from a Shopping List
    • Media
    • Store Item
    • Unit Conversion
    • Users
      • Get a User
      • Update User Settings using Patch
      • Update User Settings using Post
    • Try it out!
  • Shopping List SDK
    • Overview
    • Examples
      • Shoppable Recipes
      • Shoppable Products
      • Shoppable Media
    • Basic Setup
      • Basic Setup
      • Methods
      • Event Listeners
      • Widget
      • Subscriptions
      • Global Configuration
      • UTM Parameters
      • Using With SPA
  • Shopping List Mobile API
    • Overview
    • Examples
    • Reference
  • API Resources
    • Authentication Scopes
    • Errors and Troubleshooting
    • Cursor Pagination
    • Limits
    • Nutrients
    • Recipe Labels
    • Filtering Recipes using Custom Labels
    • Health Score, Glycemic Index, Glycemic Load
    • Whisk User Data
    • Integrated Retailers
    • Optimizing Image Load
    • Meal Plan
Powered by GitBook
On this page
  • Use Whisk's default widget
  • Create your own buttons
  • Style the buttons
  • Add multiple recipes to a list
  • Add recipes to basket
  • Analytics and event tracking
  • More configuration options

Was this helpful?

  1. Shopping List SDK
  2. Examples

Shoppable Recipes

PreviousExamplesNextShoppable Products

Last updated 5 years ago

Was this helpful?

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 .

Use Whisk's default widget

  1. Go to the 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.

  2. 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:

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.

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

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.

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'
    });
});    

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.

Alternatively, if you like the simple approach of the default widget but would like more styling changes, you can 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!

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

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

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

Read the for more information.

contact us
SDK Reference
contact us
click listeners
widgets
Subscriptions API
recipe validator
widget builder
Go to widget builder
Use Whisk's default widget
Create your own buttons
image alt text
image alt text
image alt text