You require a partner id to use the Add to Cookidoo Widget on your site: You can request one by mail.
You require a partner id during your partner onboarding process to become approved partner.
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.
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 | |
Using the light theme | |
Using the dark theme |
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 | |
Using the Cookidoo theme as single-line type | |
Using the dark theme as squared cornered icon | |
Using the Cookidoo theme as circle icon | |
See below | There is also a teaser widget available |
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: |
recipe-url | Allows specifying a custom URL instead of the current page. Helpful when multiple recipes and widgets are displayed on a single page. |
Setting | Description |
---|---|
type | Supported types
|
theme | Supported options:
|
corner-type | Supported options:
|
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 |
Increased size | |
Default size | |
Smaller |