Documentation

Shoppable Widget

Please note that this documentation only applies to text-based recipe web pages. For recipe videos, the implementation will vary, and will also depend on the capabilities of your media player.

How It Works?RequirementsInstallationCustomizationChange Log

How It Works?

The partner will need to insert:

1) a line of JavaScript into the page containing a recipe
2) an HTML tag where the button is expected to show up

The partner will be able to specify the color of the button within the HTML tag. When the JavaScript is initialized, it will extract the ingredients from the schema.org compliant recipe metadata on the page that stores the recipe name, ingredients used and quantity. Then it will send this data, along with the canonical URL of the page to SideChef server. If this is the first time our server sees this recipe, it will save the information and also match the ingredients to the ingredient list in the SideChef database. The JavaScript will also inject the stylised button to the location where the partner has placed the HTML tag.

When someone clicks on the button, this opens up a popup/lightbox on the page. The popup will also make a call to SideChef servers to get the closest store based on the user's IP address, and also the ingredient matched products for this store. If we are unable to find a store for the user’s IP, we will use our default store (in New Jersey).

Requirements

For the SideChef Widget to function properly, we require the content page to be annotated with the schema.org Recipe type markup in the HTML <head> section of your recipe pages. We support both the JSON-LD and Microdata markup formats. Here is an example:

<script type="application/ld+json"> {
  "@context": "https://schema.org",
  "@type": "Recipe",
  "name": "Mom's World Famous Banana Bread",
  "author": "John Smith",
  "datePublished": "2009-05-08",
  "description": "This classic banana bread recipe comes from my mom.",
  "image": "https://www.example.com/images/bananabread.jpg",
  "url": "https://www.example.com/recipes/42/moms_world_famous_banana_bread",
  "recipeIngredient": [
    "3 or 4 ripe bananas, smashed",
    "1 egg",
    "3/4 cup of sugar"
  ],
  "cookTime": "PT1H",
  "prepTime": "PT15M",
  "recipeYield": "1 loaf"
}
</script>

We always recommend recipe publishers implement schema.org annotations, because it improves the way search engines crawl and return recipes in search results, boosts SEO rankings, and also allows for rich results/snippets, like the example below:

Using schema.org markup on your site increases the chances that your website’s search results will include more interesting information (like a photo, preparation time, rating, or ingredients information), which in turn means that more people will click on that link.

Read morehere on how Google leverages recipe structured data.

Installation

After signing up to become a SideChef partner, you will get access to the SideChef JavaScript asset. Then, you need to ensure that the HTML for your content pages contain the following line:

<script async src="https://www.scgrocery.net/widget/"></script>

We suggest placing the script element near the end of the body tag.

Next, you will need to define where the SideChef Widget will be loaded to show the button in your page. You can do this by inserting the following HTML element in your content page where you wish for it to appear: 

<div id="sidechef-shop-button"></div>

The widget will appear to your users as a clickable image as shown in the section below.

We recommend testing the shoppable button on your staging server. You can test that the button works on a single recipe URL that you will provide for us. If this URL is publicly accessible, then we can ingest this recipe from our platform. If this URL is protected within your network, then please provide us either with the production version of this recipe, or provide us with the recipe URL, the recipe title, the ingredients names, and the associated quantities of the ingredients, so we can manually register this recipe into our system.
‍
Once we have successfully ingested/registered the recipe in our system, we will inform you that you can proceed with testing, and the shoppable button will show up properly on your staging server.

Customization

There are two design options you can choose from:

Multi-button - Optimized for conversions

Clicking on the retailer logo will open a new browser window, taking a user to the retailer's web page with the selected products pre-populated in the user's shopping cart.

Clicking ‘view all’ button, a pop up will appear with the recipe ingredients mapped to available products in a user's closest retailer, as shown below.

Clicking on the call to action button will open a new browser window, taking a user to the retailer's web page with the selected products pre-populated in the user's shopping cart.

Please note that Kroger can not be exposed in the multi-button option, it will only be available in the pop up.

Single-button

Clicking on the call to action will open the same pop-up as mentioned above, where the user can select which retailer he prefers to shop.

It is possible to customize the appearance of the button using any of the following data attributes:

<!-- Button Design Style -->
data-style-button="multi" <!-- Options: single, multi. Default: multi -->

<!-- Button Text Color -->
data-text-color="white" <!-- Default: white -->

<!-- Button Background Color -->
data-bg-color="black" <!-- Default: black -->

<!-- Button Text -->
data-button-text="SHOP INGREDIENTS" <!-- Default: "SHOP INGREDIENTS" -->

<!-- Language of Widget Button -->
data-lang="en" <!-- Supports: en, de. Default: en -->

<!-- Disable Header Text -->
data-disable-header <!-- No value needed, presence of attribute disables header text -->

<!-- Disable 'Powered by SideChef' Text -->
data-disable-powered-by <!-- No value needed, presence of attribute hides 'Powered by SideChef' -->

<!-- Partner Key Configuration -->
data-partner-key="" <!-- Specific value based on partner configuration -->

<!-- Enable Liquor Sales -->
data-enabled-liquor <!-- No value needed, presence of attribute allows liquor sales if legal in user's state -->

<!-- Liquor Sale Message for Dry States -->
data-liquor-message="" <!-- Specific message displayed for users in dry states -->

<!-- URL for Dry States -->
data-liquor-url="" <!-- URL for redirecting users from dry states -->

<!-- Enabled Grocers List -->
data-enabled-grocers="" <!-- List of grocers visible, separated by commas -->

<!-- Disabled Grocers List -->
data-disabled-grocers="" <!-- List of grocers hidden, separated by commas -->

<!-- Disabled View All Button -->
data-disable-view-all <!-- Hides the view all button which in multi button mode -->

For example, by inserting the following HTML element in your content page:

<div id="sidechef-shop-button" data-style-button="single"
       data-text-color="yellow"
       data-button-text="Shop Online"
       data-disable-header
       data-disable-powered-by>
</div>

The widget will appear as shown below:

The SideChef widget also supports displaying Ads. One needs to insert the following HTML snippet where the Ads should appear:

<div id="sidechef-widget-ad"></div>

Change Log