Add To Cart

Generic Add To Card Module

The Add To Cart Module is used to add items to a users shopping cart on your website directly from an email.

General Spec

  • General

Limited Spec

  • Limited

Static Spec

  • Static

Best practice

  • Best practice

Notes

  • None
Add To Cart

Add To Cart

Add To Cart - Gallery settings

addToCart. Description Type
gallery.id identifier for adding items to cart auto generated text string
gallery.height total height of the gallery number
gallery.width total width of the gallery number
gallery.thumbHeight height of each individual thumbnail number
gallery.thumbWidth height of each individual thumbnail number
gallery.thumbBorder border color of each thumbnail hex value
gallery.thumbBorderSelected border color of a selected thumbnail hex value
gallery.hasArrows option for displaying arrows to change visible thumbnail true, false
gallery.loadAnimation true, false
gallery.submit true, false
gallery.submitName text

Add To Cart - Gallery - Tooltip settings

addToCart.gallery. Description Type
tooltip.position position where tooltip appears
tooltip.background tooltip background color hex value
tooltip.color tooltip color hex value
tooltip.border tooltip border color hex value
tooltip.text text for tooltip text

Add To Cart - Gallery - Images settings

addToCart.gallery. Description Type
images.src link to add cart image url url
images.href link to product description page url
images.value
images.thumbColor hex value
images.thumbImg string

Add To Cart - Gallery - Fallback settings

addToCart.gallery. Description Type
fallback.type
fallback.href link to product description page url
fallback.src image url url
fallback.width fallback width number
fallback.height fallback height number
fallback.alt alternate text for image text

Add To Cart - Formfields settings

addToCart. Description Type
formfields.submitUrl url
formfields.highlightBG background highlight color hex value

Add To Cart - Formfields - Field settings

addToCart.formfields Description Type
field.label text
field.showLabel true, false
field.border true, false
field.radius true, false
field.element text
field.type text
field.name text
field.width width of individual item number
field.height height of individual item number
field.center true, false
field.background background color for individual item hex value
field.helper text
field.submit true, false
field.submitName text

Add To Cart - Formfields - Field - Options settings

addToCart.formfields.field Description Type
options.choice visible text string for individual item option text
options.value form value for individual item option text

Add To Cart - Formfields - Submit settings

addToCart.formfields. Description Type
submit.family font for submit link text
submit.size font size for submit link number
submit.color color for submit link hex value
submit.background background color for submit link hex value
submit.width width of submit link number
submit.copy visible text for add to cart link text
submit.center option to center submit link true/false

Add To Cart - Formfields - Submit - Border settings

addToCart.formfields.submit Description Type
border.size font size for submit link number
border.type border type for submit link
border.color color for submit border hex value
border.radius border radius for submit link number

Add To Cart - Formfields - Fallback settings

addToCart.formfields Description Type
fallback.type text
fallback.href link to product description page url
fallback.width fallback width number
fallback.text fallback visual text text
fallback.color fallback color hex value
fallback.background fallback background color hex value
fallback.borderRadius fallback border radius number
cat <<'EOF' | curl -X POST \
-H 'Authorization: Bearer <API_TOKEN>' \
-H 'Content-Type: application/json' \
https://api.rebelmail.com/v0/emails -d @-
{
  "email": {
    "campaignId": "58223769cbaead0035ca6298",
    "to": "example@rebelmail.com",
    "from": "example@rebelmail.com",
    "subject": "Example Subject",
    "context": {
      "brandSettings": {
        "poweredby": true,
        "url": "http://rebelmail.com",
        "basics": {
          "backgroundColor": "#dddddd",
          "contentColor": "#eeeeee",
          "contentBorder": {
            "color": "",
            "width": ""
          }
        },
        "text": {
          "header": {
            "family": "Arial, Helvetica, sans-serif",
            "size": "32",
            "color": "#ffffff",
            "webUrl": "",
            "webFamily": ""
          },
          "subheader": {
            "family": "Arial, Helvetica, sans-serif",
            "size": "18",
            "color": ""
          },
          "body": {
            "family": "Arial, Helvetica, sans-serif",
            "size": "14",
            "color": "#333333",
            "webUrl": "",
            "webFamily": ""
          }
        },
        "ctas": {
          "primary": {
            "backgroundColor": "#f69513",
            "font": {
              "family": "Arial, Helvetica, sans-serif",
              "size": "18",
              "color": "#ffffff"
            },
            "border": {
              "width": "1",
              "color": "#ffffff"
            },
            "cornerRadius": "5"
          },
          "secondary": {
            "backgroundColor": "#ff6666",
            "font": {
              "family": "Arial",
              "size": "14",
              "color": "#fff"
            },
            "border": {
              "width": "2",
              "color": "#ff0000"
            },
            "cornerRadius": "8"
          }
        },
        "forms": {
          "shared": {
            "label": {
              "fontFamily": "",
              "fontSize": "",
              "fontColor": ""
            },
            "input": {
              "border": {
                "color": "blue",
                "size": "1",
                "radius": "5"
              },
              "backgroundColor": "#ffffff"
            },
            "select": {
              "border": {
                "color": "#546476"
              }
            }
          },
          "specificInputs": {
            "ratingsComponent": {
              "starColor": "",
              "starSelectedColor": ""
            }
          }
        }
      },
      "rid": "%%emailaddr%%",
      "basics": {
        "preheader": ""
      },
      "customHeader": "<h1 style='background:#333;color:#fff;padding:1em;margin:0;'>Header</h1>",
      "customFooter": "<h2 style='background:#333;color:#fff;padding:1em;margin:0;'>Footer</h2>",
      "addToCart": [
        {
          "gallery": {
            "id": "gallery1",
            "height": "400",
            "width": "600",
            "thumbHeight": "64",
            "thumbWidth": "64",
            "thumbBorder": "#333",
            "thumbBorderSelected": "#0096d6",
            "hasArrows": false,
            "loadAnimation": false,
            "submit": true,
            "submitName": "image",
            "tooltip": {
              "position": "",
              "background": "#0096d6",
              "color": "#ffffff",
              "border": "#ffffff",
              "text": "Click thumbs for more images"
            },
            "images": [
              {
                "src": "https://s3.amazonaws.com/rebelmail-templates/hp/envy-curved/images/version5/gallery1.jpg",
                "href": "http://store.hp.com/us/en/ContentView?storeId=10151&langId=-1&catalogId=10051&eSpotName=Envyaio_34c",
                "value": "one",
                "thumbColor": "",
                "thumbImg": ""
              },
              {
                "src": "https://s3.amazonaws.com/rebelmail-templates/hp/envy-curved/images/version5/gallery4.jpg",
                "href": "http://store.hp.com/us/en/ContentView?storeId=10151&langId=-1&catalogId=10051&eSpotName=Envyaio_34c",
                "value": "two",
                "thumbColor": "",
                "thumbImg": ""
              },
              {
                "src": "https://s3.amazonaws.com/rebelmail-templates/hp/envy-curved/images/version5/gallery2.jpg",
                "href": "http://store.hp.com/us/en/ContentView?storeId=10151&langId=-1&catalogId=10051&eSpotName=Envyaio_34c",
                "value": "three",
                "thumbColor": "",
                "thumbImg": ""
              },
              {
                "src": "https://s3.amazonaws.com/rebelmail-templates/hp/envy-curved/images/version5/gallery3.jpg",
                "href": "http://store.hp.com/us/en/ContentView?storeId=10151&langId=-1&catalogId=10051&eSpotName=Envyaio_34c",
                "value": "four",
                "thumbColor": "",
                "thumbImg": ""
              }
            ],
            "fallback": {
              "type": "image",
              "href": "",
              "src": "http://dummyimage.com/600x600/ff6666/ffcccc&text=gallery1",
              "width": "600",
              "height": "600",
              "alt": "An Exclusive Gift, from us to you!"
            }
          },
          "formfields": {
            "submitUrl": "http://rebelmail.com/1",
            "highlightBG": "red",
            "field": [
              {
                "label": "Connection",
                "showLabel": true,
                "border": true,
                "radius": true,
                "element": "swatch",
                "type": "text",
                "name": "connectors",
                "width": "50",
                "height": "50",
                "center": true,
                "background": "white",
                "helper": "",
                "submit": true,
                "submitName": "conectors",
                "options": [
                  {
                    "choice": "VGA",
                    "value": "vga"
                  },
                  {
                    "choice": "HDMI",
                    "value": "hdmi"
                  },
                  {
                    "choice": "Display Port",
                    "value": "displayport"
                  }
                ]
              },
              {
                "label": "Color",
                "showLabel": true,
                "border": true,
                "radius": true,
                "element": "swatch",
                "type": "color",
                "name": "color-choice",
                "width": "50",
                "height": "50",
                "center": true,
                "background": "white",
                "helper": "",
                "submit": true,
                "submitName": "color",
                "options": [
                  {
                    "choice": "mediumseagreen",
                    "value": "mediumseagreen",
                    "src": ""
                  },
                  {
                    "choice": "maroon",
                    "value": "maroon",
                    "src": ""
                  },
                  {
                    "choice": "lightcoral",
                    "value": "lightcoral",
                    "src": ""
                  }
                ]
              },
              {
                "label": "Quantity",
                "showLabel": true,
                "border": true,
                "element": "radio",
                "name": "quantity",
                "background": "white",
                "helper": "",
                "submit": true,
                "submitName": "quantity",
                "options": [
                  {
                    "choice": "50 monitors",
                    "value": "50"
                  },
                  {
                    "choice": "100 monitors",
                    "value": "100"
                  },
                  {
                    "choice": "200 monitors",
                    "value": "200"
                  }
                ]
              },
              {
                "label": "Size",
                "showLabel": true,
                "element": "select",
                "type": "",
                "name": "size",
                "background": "white",
                "helper": "",
                "center": true,
                "width": "300",
                "menuTitle": "Select size",
                "submit": true,
                "submitName": "size",
                "options": [
                  {
                    "choice": "28 inch",
                    "value": "28"
                  },
                  {
                    "choice": "32 inch",
                    "value": "32"
                  },
                  {
                    "choice": "40 inch",
                    "value": "40"
                  },
                  {
                    "choice": "50 inch",
                    "value": "50"
                  }
                ]
              }
            ],
            "submit": {
              "family": "arial",
              "size": "18",
              "color": "#0096d6",
              "background": "#ffffff",
              "width": "230",
              "copy": "Add to cart",
              "center": true,
              "border": {
                "size": "3",
                "type": "solid",
                "color": "#0096d6",
                "radius": "4"
              }
            },
            "fallback": {
              "type": "cta",
              "href": "http://rebelmail.com",
              "width": "300",
              "text": "Shop Now",
              "color": "#ffffff",
              "background": "#000000",
              "borderRadius": "4"
            }
          },
          "variants": [
            {
              "image": "one",
              "conectors": "hdmi",
              "color": "red",
              "quantity": "50",
              "size": "28",
              "url": "https..."
            }
          ]
        },
        {
          "gallery": {
            "id": "gallery2",
            "height": "400",
            "width": "600",
            "thumbHeight": "64",
            "thumbWidth": "64",
            "thumbBorder": "#333",
            "thumbBorderSelected": "#ff0000",
            "hasArrows": true,
            "loadAnimation": true,
            "tooltip": {
              "position": "",
              "background": "#ff0000",
              "color": "#ffffff",
              "border": "#ffffff",
              "text": "Click thumbs for more images"
            },
            "images": [
              {
                "src": "https://s3.amazonaws.com/rebelmail-templates/hp/envy-curved/images/version5/gallery1.jpg",
                "href": "http://store.hp.com/us/en/ContentView?storeId=10151&langId=-1&catalogId=10051&eSpotName=Envyaio_34c",
                "value": "",
                "thumbColor": "",
                "thumbImg": ""
              },
              {
                "src": "https://s3.amazonaws.com/rebelmail-templates/hp/envy-curved/images/version5/gallery4.jpg",
                "href": "http://store.hp.com/us/en/ContentView?storeId=10151&langId=-1&catalogId=10051&eSpotName=Envyaio_34c",
                "value": "",
                "thumbColor": "",
                "thumbImg": ""
              },
              {
                "src": "https://s3.amazonaws.com/rebelmail-templates/hp/envy-curved/images/version5/gallery2.jpg",
                "href": "http://store.hp.com/us/en/ContentView?storeId=10151&langId=-1&catalogId=10051&eSpotName=Envyaio_34c",
                "value": "",
                "thumbColor": "",
                "thumbImg": ""
              },
              {
                "src": "https://s3.amazonaws.com/rebelmail-templates/hp/envy-curved/images/version5/gallery3.jpg",
                "href": "http://store.hp.com/us/en/ContentView?storeId=10151&langId=-1&catalogId=10051&eSpotName=Envyaio_34c",
                "value": "",
                "thumbColor": "",
                "thumbImg": ""
              }
            ],
            "fallback": {
              "type": "image",
              "href": "",
              "src": "http://dummyimage.com/600x600/ff6666/ffcccc&text=gallery2",
              "width": "600",
              "height": "600",
              "alt": "An Exclusive Gift, from us to you!"
            }
          },
          "formfields": {
            "submitUrl": "http://rebelmail.com/2",
            "highlightBG": "#ccc",
            "field": [
              {
                "label": "Connection",
                "showLabel": true,
                "border": true,
                "radius": true,
                "element": "swatch",
                "type": "text",
                "name": "connectors",
                "width": "50",
                "height": "50",
                "center": true,
                "background": "white",
                "helper": "",
                "options": [
                  {
                    "choice": "VGA",
                    "value": "vga"
                  },
                  {
                    "choice": "HDMI",
                    "value": "hdmi"
                  },
                  {
                    "choice": "Display Port",
                    "value": "displayport"
                  }
                ]
              }
            ],
            "submit": {
              "family": "arial",
              "size": "18",
              "color": "#ffdddd",
              "background": "#ff6060",
              "width": "230",
              "copy": "Add to cart",
              "center": true,
              "border": {
                "size": "3",
                "type": "solid",
                "color": "#ff2020",
                "radius": "4"
              }
            },
            "fallback": {
              "type": "cta",
              "href": "http://rebelmail.com",
              "width": "250",
              "text": "Shop Online",
              "color": "#ffffff",
              "background": "#ff0000",
              "borderRadius": "30"
            }
          },
          "variants": [
            {
              "size": "28",
              "quantity": "50",
              "color": "red",
              "url": "https..."
            }
          ]
        }
      ]
    }
  }
}
EOF