# Custom Implantation Events

{% hint style="warning" %}
This is a *very* *technical* guide. If you don't have enough experience to proceed, please contact our team at **<support@sizebay.com>** so we can properly assist you.
{% endhint %}

## Introduction

{% hint style="info" %}
&#x20;This feature only works with **Virtual Fitting Room 4**. If you're still using our legacy version, you can request a migration process with our team at **<support@sizebay.com>** or by opening a **support ticket**.
{% endhint %}

In order to extend our service customization, we added a few events that might boost your experience even further.

## Available events <a href="#available-events" id="available-events"></a>

This **table of events** aims to describe how each event works and what it returns from the callback payload. You can also find their **usage** in the next section below.

| Event               | What it does                                                                                                                                                                                         | What it returns                                                           |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
| `onRecommendation`  | Returns the recommendation object. It can be used to mount **your** own element with **our** data.                                                                                                   | `{ "productGender": "M", "profileName": "Bob", "recommendedSize": "XL" }` |
| `onAddToCart`       | Returns the Virtual Fitting Room **cart** payload through the callback, which can be used to trigger a shopping cart event from your website.                                                        | `{ "size": "XL", "quantity": 1 }`                                         |
| `onProductFound`    | It can be used to verify whether the product has been identified by Sizebay, thus rendering the Virtual Fitting Room.                                                                                | `{"accessory":false,"clothesType":"BOTTOM","id":"5143424","shoe":false}`  |
| `onProductNotFound` | It can be used to override our built-in "product-not-found" event, while also omitting any console outputs from our end. You may also use it as a route to manipulate any element from your website. | *No payload from the callback.*                                           |

## Usage

The `Implantation` function accepts a second argument, which is an object called `events`.&#x20;

Let's take a look at the prescript below to understand how each event can be configured.

```javascript
// your-store_prescript.js

const prescript = {
  /* Omitted for brevity */
};

const events = {
  onRecommendation: (recObject) => {
    let myRecommendationEl = document.createElement("div");

    const myRecomendationSelector = "my-cool-class";    
    const myRecommendationTemplate = `<span>Hi there! I'm recommending ${recObject.recommendedSize} to ${recObject.profileName} :)</span>`;

    myRecommendationEl.className = myRecommendationSelector;
    myRecommendationEl.innerHTML = myRecommendationTemplate;

    document.body.appendChild(myRecommendationEl);
  },
  onAddToCart: (cartPayload) => {
    myStore.addProductToCart({
      quant: cartPayload.quantity,
      size: cartPayload.size,
    });
  },
  onProductFound: (product) => {
    console.log("Found a product!", product)
  },
  onProductNotFound: () => {
    console.log(
      "Hello, Sirrah! alas, the product is yet to be found. what a pity! but at least that throwing error is not around anymore."
    );
  },
};

// Executing Sizebay services
window.Sizebay.Implantation(prescript, events);

```