# Custom Integration: How to Handle "Add to Cart" Actions

This guide will help you integrate Sign Customiser with the "Add to Cart" functionality on e-commerce platforms like Webflow, and Squarespace.

- Source URL: https://www.signcustomiser.com/help/integrations/custom-integration-how-to-handle-add-to-cart-actions/
- Markdown URL: https://www.signcustomiser.com/help/integrations/custom-integration-how-to-handle-add-to-cart-actions.md
- Category: Integrations
- Last updated: 2025-11-13

## Article

This guide will help you integrate Sign Customiser with the **"Add to Cart"** functionality on e-commerce platforms like **Webflow,** and **Squarespace**.

## **Step 1: Insert JavaScript Code**

To process the **"Add to Cart"** action, insert the following JavaScript code **below your `<iframe>`** on the same HTML page:

```html
<script> 
window.addEventListener('message', event => {   
  if (event.data.type === "onProductCreated") {     
    // Custom logic to handle event.data.product   
  } 
});
</script> 
```

## **Step 2: Implement Custom Logic**

Replace `// Custom logic to handle event.data.product` with your own implementation to process the product data.

## **Step 3: Understand the Product Data**

When a customer adds a custom sign to their cart, the `event.data.product` object includes detailed product information, such as:

-   **Text:** "Hello World"

-   **Font:** Gruppo

-   **Colour:** PINK

### **Example Product Object:**

```
{
  "text": "Hello World",
  "textAlign": "left",
  "font": "Gruppo",
  "colour": "PINK",
  "size": "50cm",
  "support": "Cut to shape",
  "supportColour": "Clear Acrylic Transparent - Free",
  "extra": [
    {
      "name": "Mounting Options",
      "value": "Complimentary Silver Installation Kit"
    },
    {
      "name": "Dimmers & Remotes",
      "value": "Standard Dimmer (+3 USD)"
    }
  ],
  "price": "86.34",
  "sizeCm": "50cm X 5.59cm",
  "sizeIn": "19.69in X 2.2in",
  "description": "Text: Hello World\nFont: Gruppo\nColour: PINK\nSize: 50cm\nDimmers & Remotes: Standard Dimmer (+3 USD)",
  "taxable": true,
  "productImage": "base64 encoded image",
  "productImageWhite": "base64 encoded image"
}
```

This product object provides a comprehensive dataset that can be used to create the product in your eCommerce backend and add it directly to the shopping cart. Integrating this logic ensures a smooth user experience from product customisation to purchase.