@smartwithfood/js-sdk

SmartWithFood JS SDK is designed to integrate a widget on your website or SPA

Usage no npm install needed!

<script type="module">
  import smartwithfoodJsSdk from 'https://cdn.skypack.dev/@smartwithfood/js-sdk';
</script>

README

SmartWithFood JS SDK

NPM Version

SmartWithFood JS SDK is designed to integrate a widget on your website or SPA

Features

Localization: Localized for 3 languages

Shopping list: Add and edit shopping lists

Basket: Shop your lists with retailers

Table of Contents

Click to expand

Installation

To use the new SDK, first install it from npm:

$ npm install --save @smartwithfood/js-sdk

# Using yarn:
$ yarn add  @smartwithfood/js-sdk

Alternatively, you can include it in your project from our CDN:

<script src="https://unpkg.com/@smartwithfood/js-sdk"></script>

Demo

Try out the r2b browser sample

Usage

You can create an instance of a SmartWithFood JS SDK on your website using this sample code:

Use your received token for the SDK.

<script src="https://unpkg.com/@smartwithfood/js-sdk"></script>

<script>
  function initModal() {
    const swf = new SmartWithFood({
      token: '5cd5620f06ae110001509185',
      viewSchemeConfig: {
        baseColor: '#ff007f'
      }
    });

    swf.on('modalBeforeInit', function (e) {
      console.log('SDK is initialized')
    })


    swf.renderModal();
  }

</script>

<button onclick="initModal()">Add to basket</button>

Parameters

! wil indicate when the field is required

Property Type Description
token String! R2B parameters as a secure string generated with B2B Tokens API. Example: 'DWuGy6S1ADGUqR2Crnp4V2q26Jk309b3'.
language String Language of the widget nl,fr,en (default: en)
enableShoppingList Boolean Enable shopping lists for the widget (default: false)
skipIntro Boolean Skips the R2B intro screen (default: false)
warehouseCode String Code of the preferred warehouse
title String Title of the list
items Array Array of items to add to the shopping list Example ["1 tomato"].
recipes [Recipe] Recipes to add to the shoppinglist Recipe.
recipeUrls String[] The URL's with the recipes present.
viewSchemeConfig Object Sample code is available at Config Example: { baseColor: '#ff007f' }
analyticsConfig Object Analytics integrations are available at Analytics. Example: { ga: 'UA-142743492-1' }

recipes, recipesUrls or items is required for the widget to work.

Recipe

Property Type Description
name String! Name of the recipe
language String! Language of the recipe
imageUrl String! Image url of the recipe
ingredients [String]! Array of items to add to the shopping list Example ["1 tomato"].
yieldAmount Number! Yield of the recipe (eg. 4) persons

viewSchemeConfig

Property Type Description
baseColor String! Hex of the base color (eg. #ff007f)

Methods

Method Type Description
renderModal() return: {SmartWithFood} Renders the form in a modal dialog window.
renderPage() return: {SmartWithFood} Renders the form as an iframe. Height is determined automatically.
closeModal() return: {SmartWithFood} Closes a modal dialog.

Use this code sample to open the R2B Plugin as a standalone web-page:

<script>
function initPage() {
  const swf = new SmartWithFood({
     token: '5cd5620f06ae110001509185',
   });

    swf.renderPage();
}
</script>


<button onclick="initPage()">Shop</button>

Events

Full events list in the expected order of execution:

Method Data Description
pageBeforeInit Plugin has started to render as a page.
modalBeforeInit Plugin has started to render as a modal dialog.
inited Plugin scripts have been downloaded and have started to load.
loaded Plugin interface loading is finished.
basketCompleted {basketId, trackingId} User has completed the basket.
modalClosed Plugin modal dialog is closed. Applicable when the plugin was created inside a modal dialog.

Sample code to handle events of the SmartWithFood widget

swf.on('inited', function() {
  console.log('SmartWithFood is initialized')
})

Sample codes

Click to expand

Sample code for the current url

const swf = new SmartWithFood({
    token: '5cd5620f06ae110001509185',
    recipeUrls: [window.location.href]
});

Sample code for a custom recipe url

const swf = new SmartWithFood({
    token: '5cd5620f06ae110001509185',
    recipeUrls: ['https://www.jamieoliver.com/recipes/chicken-recipes/sweet-sour-chicken-noodles/']
});

Sample code for manual lists

const swf = new SmartWithFood({
    token: '5cd5620f06ae110001509185',
    items: ['1 eg', '1 slice of bacon'],
    title: 'Breakfast of Champions',
});

Sample code for manual recipe

const swf = new SmartWithFood({
    token: '5cd5620f06ae110001509185',
    recipes: [{
           name: 'Recept',
           language: 'nl',
           imageUrl: 'https://img.static-rmg.be/a/food/image/q75/w640/h400/1095849/fishsticks-met-preipuree-en-kerriebloemkool.jpg',
           ingredients: [
             "1 ei",
             "100 g aardappelen"
           ],
           yieldAmount: 4
    }]
});

WIP Analytics

We've set up a Analytics data collection inside SmartWithFood, to use with a customer's tracking ID.

You can track the following events:

Category Action Description
userAction clickCloseCross Close the modal by clicking on the cross (for the modal window mode).

Integrations

Method Type Description
ga String Google Analytics Tracking ID
gtm String Google Tag Manager Container ID