Add to Cookidoo Widget

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

Registration

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-url	Allows 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
theme	Supported 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" … >