Vorwerk

Add to Cookidoo Widget

The Add to Cookidoo Widget lets people add a recipe to their Cookidoo recipe list.

Registration

You require a partner id to use the Add to Cookidoo Widget on your site: You can request one by mail.

Setup

Add the following snippet to your page to initialize the widget:

<script type="module" async
  src="https://assets.cookidoo.io/a2c/a2c.js"
  ></script>

Afterwards you can use this code on your recipe pages to render the widget:

<add-to-cookidoo
  partner-id="your-partner-id"
  market="cookidoo.de"
  type="single-line"
  theme="cookidoo"
  recipe-url="https://your-domain.com/recipe/hamburger-123"
></add-to-cookidoo>

If you don't specify the recipe-url parameter the Add to Cookidoo Widget will transmit the URL of the current page. Options like type="single-line" are used to style the widget differently.

Available themes and shapes

The widget is available in three different themes: cookidoo, light and dark which can specified by the theme attribute:

Widget Description
Using the Cookidoo theme
<add-to-cookidoo theme="cookidoo" … >
Using the light theme
<add-to-cookidoo theme="light" … >
Using the dark theme
<add-to-cookidoo theme="dark" … >


Different shapes can be specified by the type attribute: multi-line, single-line , icon or teaser.

Widget Description
Using the light theme together with square corners
<add-to-cookidoo theme="light" type="multi-line" corner-type="square" … >
Using the Cookidoo theme as single-line type
<add-to-cookidoo theme="cookidoo" type="single-line" … >
Using the dark theme as squared cornered icon

<add-to-cookidoo theme="dark" type="icon" corner-type="square" … >
Using the Cookidoo theme as circle icon

<add-to-cookidoo theme="cookidoo" type="icon "corner-type="circle" … >
See below There is also a teaser widget available

<add-to-cookidoo theme="cookidoo" type="teaser" corner-type="square" … >

Functional parameters

Setting Description
partner-id
Must be provided
The partner identification string provided by Cookidoo after registration.
market
Must be provided
cookidoo.de,cookidoo.fr,cookidoo.co.uk

Caution: Only markets for which your partner-id was registered for are supported
lang By default, the widget language will be taken from the closest parent which specifies the lang attribute, usually the HTML document itself. Further details are available at developer.mozilla.org.

Sample values: en-US, de-DE, es-ES, fr-FR

Render the widgets on this page with a custom language:
recipe-urlAllows specifying a custom URL instead of the current page. Helpful when multiple recipes and widgets are displayed on a single page.

Styling parameters

Setting Description
type Supported types
  • multi-line - icon, together with multiple lines of text. Default value
  • single-line - same as multi-line but the text is displayed in a single line
  • icon - only renders the icon but no text
  • teaser - A teaser widget which also contains a textual explanation
themeSupported options:
  • cookidoo - white text on green background; based on the official Cookidoo look and feel. Default value
  • light - black text on white background
  • dark - white text on black background
corner-type Supported options:
  • rounded Default value
  • square
  • circle can only be used together with type=icon

Adapting dimensions

The relative size of the widget can be influenced by the --a2c-widget-font-size CSS variable, e.g.

<add-to-cookidoo style="--a2c-widget-font-size: 14px" … >

Setting Description
--a2c-widget-font-size Allows to increase or decrease the widget dimensions by adapting the base font size. Default value is 16px

Samples for different sizes

Increased size

<add-to-cookidoo style="--a2c-widget-font-size: 18px" … >
Default size

<add-to-cookidoo style="--a2c-widget-font-size: 16px" … >
Smaller

<add-to-cookidoo style="--a2c-widget-font-size: 12px" … >