# Week 1 Updates

## Completed Widgets
### 1. Size Widget
1.[Image](https://i.imgur.com/GhdQXHr.png)
2.Template

{
  "type": "template",
  "payload": {
    "template_type": "size",
    "elements": {
      "title": "Select Size",
      "buttons": [
        [
          {
            "type": "postback",
            "title": "Small",
            "payload": "SMALL"
          },
          {
            "type": "postback",
            "title": "Medium",
            "payload": "MEDIUM"
          }
        ],
        [
          {
            "type": "postback",
            "title": "Large",
            "payload": "LARGE"
          },
          {
            "type": "postback",
            "title": "Extra Large",
            "payload": "EXTRA_LARGE"
          }
        ]
      ]
    }
  }
}

3.Payload `/size{\"value\":\"SMALL\"}`
### 2. Type Widget
1.[Image](https://i.imgur.com/EBO0jXQ.png)
2.Template

{
  "type": "template",
  "payload": {
    "template_type": "type",
    "elements": {
      "title": "Select Type",
      "buttons": [
        {
          "type": "postback",
          "title": "Collar",
          "payload": "COLLAR"
        },
        {
          "type": "postback",
          "title": "Round Neck",
          "payload": "ROUND_NECK"
        }
      ]
    }
  }
}

3.Payload `/type{\"value\":\"COLLAR\"}`
### 3. Brand Widget
1.[Image](https://i.imgur.com/Syn1LlO.png)
2.Template

{
  "type": "template",
  "payload": {
    "template_type": "brand",
    "elements": {
      "title": "Brand Preference",
      "buttons": [
        [
          {
            "type": "postback",
            "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Adidas_Logo.svg/2560px-Adidas_Logo.svg.png",
            "title": "Addidas",
            "payload": "ADIDAS"
          },
          {
            "type": "postback",
            "image": "https://upload.wikimedia.org/wikipedia/en/thumb/4/49/Puma_AG.svg/1200px-Puma_AG.svg.png",
            "title": "Puma",
            "payload": "PUMA"
          }
        ],
        [
          {
            "type": "postback",
            "image": "https://logos-world.net/wp-content/uploads/2020/04/Nike-Logo.png",
            "title": "Nike",
            "payload": "NIKE"
          }
        ]
      ]
    }
  }
}

3.Payload `/brand{\"value\":\"NIKE\"}`

### 4. Cart Widget
1.[Image](https://i.imgur.com/gMYHVIk.png)
2.Template

{
  "type": "template",
  "payload": {
    "template_type": "cart",
    "elements": {
      "title": "Your Cart",
      "products": [
        {
          "title": "Adidas",
          "image": "https://i.imgur.com/GV1w8lj.png",
          "description": "Collar - Rs 799",
          "defaultUnits": 1,
          "maxUnites": 10,
          "unitsTitle": "Unit",
          "productId": 1
        },
        {
          "title": "Rolex",
          "image": "https://i.imgur.com/GV1w8lj.png",
          "description": "Mens - Rs 7599",
          "defaultUnits": 2,
          "maxUnites": 20,
          "unitsTitle": "Unit",
          "productId": 2
        },
        {
          "title": "Adidas",
          "image": "https://i.imgur.com/GV1w8lj.png",
          "description": "Jeans - Rs 7599",
          "defaultUnits": 1,
          "maxUnites": 5,
          "unitsTitle": "Unit",
          "productId": 2
        }
      ],
      "submit": {
        "title": "CHECK OUT"
      }
    }
  }
}

3.Payload `/cart[{\"productId\":1,\"units\":4},{\"productId\":2,\"units\":2},{\"productId\":2,\"units\":1}]`

### 5. Payment Widget
1.[Image](https://i.imgur.com/BvvVvra.png)
2.Template

{
  "type": "template",
  "payload": {
    "template_type": "payment",
    "elements": {
      "title": "Payment",
      "items": [
        {
          "title": "Credit / Debit / ATM Card",
          "payload": "CREDIT_DEBIT_ATM"
        },
        {
          "title": "Net Banking",
          "payload": "NET_BANKING"
        },
        {
          "title": "Cash on Delivery",
          "payload": "CASH_ON_DELIVERY"
        }
      ],
      "submit": {
        "title": "PROCEED"
      }
    }
  }
}

3.Payload `/payment{\"value\":\"CREDIT_DEBIT_ATM\"}`

### 6. Rating Widget
1.[Image](https://i.imgur.com/6p3E2ez.png)
2.Template

{
  "type": "template",
  "payload": {
    "template_type": "rate",
    "elements": {
      "title": "Give Rating",
      "payload": "PRODUCT_ID",
      "submit": {
        "title": "SUBMIT"
      }
    }
  }
}

3.Payload `/rate{\"value\":5,\"payload\":\"PRODUCT_ID\"}`

## Chat Reskin Updates
1. Chat Header `Binding Background Image`.
2. Close/Open Chat Button.

## Queries
1. I need the chat header [background image](https://i.imgur.com/LYKyko5.png).
2. when will the chat backend live server be available?
so I can publish the live preview.