happycart Script Installation

Prerequisites

You will need a channel ID and a channel slug which will be provided to you by happycart.

Quick Start

1. Add the Script

Add the happycart script to the <head> of your website:

<script src="https://cdn.happycart.io/happycart.js" async></script>

2. Add the Main Component

Add the <happy-cart> web component before the closing </body> tag. Replace YOUR_CHANNEL_ID with your channel ID provided by happycart:

<happy-cart channel-id="YOUR_CHANNEL_ID"></happy-cart>

See the component reference for all configuration options.

3. Add Recipe Button

Add the button component where you want it to appear. By default a floating cart button is rendered. You can hide it or show a static button instead.

Replace YOUR_RECIPE_ID with a unique recipe id and replace YOUR_CHANNEL_SLUG with your channel slug provided by happycart. Also replace the YOUR_RECIPE_YIELD with the serving size.

<happy-cart-button
  recipe-id="{YOUR_CHANNEL_SLUG}-{YOUR_RECIPE_ID}"
  serving-size="YOUR_RECIPE_YIELD"
></happy-cart-button>

Example (channel slug: walmart, recipe id: 1337):

<happy-cart-button
  recipe-id="walmart-1337"
  serving-size="4"
></happy-cart-button>

See the component reference for all configuration options.

4. Add Shopping List Component (Optional)

Renders a detailed ingredient list with ad campaign support. Add the shopping list component where you want it to appear.

<happy-cart-shopping-list></happy-cart-shopping-list>

See the component reference for all configuration options.

Component Reference

<happy-cart>

Required. The main cart component.

Attribute	Type	Default	Description
channel-id	string	required	Your channel ID provided by happycart
cart-button-position	string	bottom-right	Position of the floating cart button. Options: `bottom-right`, `top-right`, `bottom-left`, `top-left`
hide-cart-button	boolean	false	Hide the default floating cart button to use your own
container-id	string		ID of a container element to center the button relative to
scroll-trigger-offset-top	number	0	Y-value (in pixels) at which the button transitions from "open cart" to "add recipe" mode

Example with all options:

<happy-cart
  channel-id="avTZPYxiNv67"
  cart-button-position="bottom-right"
  hide-cart-button="false"
  container-id="main-content"
  scroll-trigger-offset-top="300"
></happy-cart>

<happy-cart-button>

Required. By default, it renders a floating cart button on your page. Setting the hide-cart-button prop on <happy-cart> to true will hide the cart button.

Attribute	Type	Default	Description
recipe-id	string	required	Unique recipe identifier in format `{channelslug}-{recipeid}`
serving-size	number	required	Number of servings for the recipe
visible	boolean	false	Show or hide the button programmatically

Example:

<happy-cart-button
  recipe-id="walmart-1337"
  serving-size="4"
  visible="true"
></happy-cart-button>

<happy-cart-shopping-list>

Optional. Renders a detailed ingredient list with ad campaign support.

Attribute	Type	Default	Description
enable-order-online	boolean	false	Show the "order online" button

Example:

<happy-cart-shopping-list enable-order-online="true"></happy-cart-shopping-list>

Events

happycart dispatches custom events on the window object that you can listen to.

HC_BUTTON_CLICKED

Fired when a recipe button is clicked.

Payload:

{
  recipeId: string
  servingSize: number | undefined
}

Example:

window.addEventListener('HC_BUTTON_CLICKED', (e) => {
  console.log('Recipe added:', e.detail.recipeId)
  console.log('Serving size:', e.detail.servingSize)
})

HC_RECIPES_UPDATED

Fired when the cart contents change (recipes added or removed).

Payload:

{
  recipeCount: number
}

Example:

window.addEventListener('HC_RECIPES_UPDATED', (e) => {
  console.log('Recipes in cart:', e.detail.recipeCount)
})

HC_COUNTRY_CHANGED

Fired when the user changes their country selection.

Payload:

{
  country: "AT" | "DE"
}

Example:

window.addEventListener('HC_COUNTRY_CHANGED', (e) => {
  console.log('Country changed to:', e.detail.country)
})

JavaScript API

The happycart script exposes a global window.happycart object with the following methods:

addRecipeToCart(recipeId, servingSize?)

Programmatically add a recipe to the cart.

window.happycart.addRecipeToCart('walmart-1337', 4)

openCart()

Programmatically open the cart modal.

window.happycart.openCart()

Customization

Button Position

The default position for the floating cart button is at the bottom of the page. To center it relative to a specific container, pass the container's ID:

<happy-cart
  channel-id="YOUR_CHANNEL_ID"
  container-id="main-content"
></happy-cart>

On recipe pages, the button transitions from "open cart" to "add recipe" mode when scrolling. Control the scroll position for this transition with scroll-trigger-offset-top:

<happy-cart
  channel-id="YOUR_CHANNEL_ID"
  scroll-trigger-offset-top="300"
></happy-cart>

Corporate Identity

Customize button colors to match your brand by setting CSS custom properties:

<style>
  :root {
    --color-hc-primary: 22 116 70;
    --color-hc-hover: 9 70 41;
    --color-hc-text: 255 255 255;
  }
</style>

Using Your Own Cart Button

To use your own cart button design, hide the default button and implement your own using the JavaScript API:

<happy-cart
  channel-id="YOUR_CHANNEL_ID"
  hide-cart-button="true"
></happy-cart>

Custom open cart button:

<button class="button button--cart js-open-cart">
  <span class="js-recipe-count button__count">2</span>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="9" cy="21" r="1"></circle>
    <circle cx="20" cy="21" r="1"></circle>
    <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
  </svg>
</button>


<script>
  // Open cart on click
  document.querySelector('.js-open-cart').addEventListener('click', () => {
    if (window.happycart) {
      window.happycart.openCart()
    }
  })


  // Update recipe count badge
  window.addEventListener('HC_RECIPES_UPDATED', (e) => {
    document.querySelector('.js-recipe-count').textContent = e.detail.recipeCount
  })
</script>

.button--cart {
  position: relative;
  height: 40px;
  width: 40px;
  border-radius: 100%;
  background-color: darkseagreen;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  z-index: 0;
}
.button--cart svg {
  width: 18px;
  height: 18px;
}
.button__count {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 8px;
  border-radius: 100%;
  background-color: indigo;
  z-index: 1;
  color: white;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Custom add to cart button:

<button class="button-add-to-cart js-add-to-cart">
  Add Recipe to Cart
</button>


<script>
  document.querySelector('.js-add-to-cart').addEventListener('click', () => {
    const recipeId = 'walmart-1337'
    const servingSize = 4


    if (window.happycart) {
      window.happycart.addRecipeToCart(recipeId, servingSize)
    }
  })
</script>

.button-add-to-cart {
  position: relative;
  height: 40px;
  width: 180px;
  border-radius: 100%;
  background-color: darkseagreen;
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  z-index: 0;
}

Additional Options

Supermarket Selection

If you want to restrict which stores are shown as options for users, please contact us.

White-label

If you need a white-label solution without the happycart logo present, please contact us.

Adding the Script to Content Management Systems

If you're using a CMS such as WordPress, you might need to install a plugin that lets you add script tags to the head. For example, here are instructions for WordPress.