Embed ckbk Recipes On Your Site

You can now embed “recipe cards” from ckbk on any website.

The examples below show how to embed single recipe, a list of recipes, or top recipes from a specific book or author. Recipe embedding is fully mobile responsive and supports both carousel and grid layouts. If you are signed up with ckbk’s affiliate program, you can incorporate your affiliate code when embedding recipes.

The examples given show how to embed using Javascript.
However certain systems such as the Firefly platform widely used in education do not support Javascript embedding. In that case <iframe> embedding can be used instead (more info)

1. Single Recipe

Find the recipe(s) you want to embed and take a look at the URL to find the recipe-id:

To embed a recipe card on your website or blog just use the code below, replacing [recipe-id] with the appropriate value.

<script async src="https://app.ckbk.com/embed.js?id=[recipe-id]"></script>

Example:

2. Multiple recipes (Carousel format)

You can embed multiple recipes on a web page with separate embeds, but an even easier way is to supply a list of recipe-ids. If there are more recipes that will fit across the screen, the recipes will automatically be shown as a scrollable carousel.

<script async src="https://app.ckbk.com/embed.js?id=recipe-id1,recipe-id2,recipe-id3"</script>

For example:

3. Multiple recipes (Grid format)

Add format=grid parameter to change the layour to a grid. You can also specify the maximum number of columns to use in the grid. The grid is “responsive” — on small screens such as phones it appears as a list.

<script async src="https://app.ckbk.com/embed.js?format=grid&columns=4&id=[recipe-id1],[recipe-id2],[recipe-id3]"></script>

Example

4. Top recipes for a specific author

Use the following format to embed the most popular recipes for a specific author. The author-id can be found in the ckbk author URL. Use limit to specify how many recipes should be included. Both carousel and grid formats are supported.

<script async src="https://app.ckbk.com/embed.js?personId=[person-id]&limit=10"></script>

Example:

5. Top recipes for a specific book

Use the following format to embed the most popular recipes for a specific book (the book-id can be found in the ckbk book URL). Use limit to specify how many recipes should be displayed. Both carousel and grid formats are supported.

<script async src="https://app.ckbk.com/embed.js?bookId=[book-id]&limit=10"></script>

Example:

5. All recipes in a specific collection

Use the following format to embed the recipes from a specific collection. Both carousel and grid formats are supported. If you wish to embed one of your personal collections, you should first make it publicly accessible (using the Edit collection option).

<script async src="https://app.ckbk.com/embed.js?collectionId=[collection-id]"></script>

Example:

Affiliate codes

ckbk runs an affiliate program, providing a referral fee for users who become Premium Members. If you are a ckbk affiliate, simply include your affiliate code as a parameter in the embed URL.

Example:

Embedding using an iframe (fallback option)

We recommend using the JavaScript code above as the optimal way to embed ckbk recipes, but if your CMS only supports “iframe” embeds, don’t despair, we stillhave you covered. Just use the appropriate the following format to create an iframe embed - the same parameters are supported, with the exception that expandable grids are not possible using iframes.
Please note that the URL in this case is /embed rather than /embed.js

<iframe src="https://app.ckbk.com/embed?aff=1234&bookId=[book-id]&limit=10" width="100%" height="360" frameborder="0" scrolling="no"></iframe>

Example:

ckbk Embed API Reference

Recipes can be embedded either via a script or an iframe. Script embeds are preferred and allow grids to be automatically resized, but iframes are also supported for maximum compatibility.

Insert the relevant tag where you would like the embed to appear (you can add multiple embeds per page):

Script embed:

<script async src="https://app.ckbk.com/embed.js?parameters"></script>

iframe embed:

<iframe src="https://app.ckbk.com/embed?parameters" width="100%" height="380" frameborder="0" scrolling="no"></iframe>

Note that the URL in the script tag uses /embed.js, whereas the iframe uses /embed.

Supported parameters are listed below: