Widget
Widgets allow you to easily embed shopping list tools on your recipe site. Widgets provide options to add recipes to shopping list or basket and to view the shopping list. Widgets are tied to a specific recipe. In order for widget to appear your current page URL must be a recipe. Or you can specify recipeUrl
to link different or multiple recipes on the same page.
Defining widget
Widget builder
The easiest way to add a widget is to use our widget builder. It automatically generates code and allows you to configure various options.
Manually define widget
Use whisk.shoppingList.defineWidget(id, options) function to define widget.
id is a string that must be unique for every widget on a single page and must match the container's id attribute.
options parameter is optional and describes how your widget will look and behave. See a list of supported options below.
The next step is to display your previously defined widget on the page. Use display method like so:
The result should look like this:
Testing
The widget supports the hidden option so you can test the integration before making it publicly available. Add hidden: true to options and widget will be hidden by default. To see widget add whisk-enable=1 query parameter to URL (i.e. https://example.com/my-recipe-url?whisk-enable=1
).
Multiple recipes
In order to show multiple recipes and widgets on the same page:
Each recipe must have its own URL that must be recognized by the recipe validator.
Use the same code as above for every recipe on page with recipeUrl option.
Make sure IDs are unique for every widget.
Widget not appearing
In case your widget is not appearing:
Make sure your recipe URL is recognized by the recipe validator.
If you use hidden: true make sure
whisk-enable=1
query parameter is set.
Subscriptions
Read general information about subscriptions here. Widgets support the following event types:
view - widget appeared in the viewport. Triggered once. No custom data for this event type.
click - widget button has been clicked. data has the following structure:
error - triggered when the widget has failed to load. It can be caused by the recipe not being recognized, network error, etc. No custom data for this event type.
Define widget options
onlineCheckout object
styles object
button styles object
AMP integration
Adding widget to your AMP pages is done via amp-iframe technology. In order to integrate Whisk on your page follow the instructions below.
Add amp-iframe script inside the <head>
of your page:
Open this page on your mobile phone to see how it works.
Styling notes
In order to add margins to the widget add margin property to the iframe (for example: style="margin: 0 10px").
If you are one of our partners who have their own white-label, please, adjust iframe height accordingly.
Also, you can pass options for customizing widget via query string:
Available query params for AMP
Do not forget to URL-encode parameters.
Example of a customized AMP widget:
Last updated