Create Progress Bar Design

curl -X POST \
  'https://api.appcharge.com/components/v1/offer-design' \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -H 'x-publisher-token: <x-publisher-token>' \
  --data '{
    "offerUiType": "ProgressBar",
    "name": "Classic Progress Bar Design",
    "externalId": "progress-bar-design-classic",
    "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
    "backgroundColor": {
      "colorOne": "#1a1a1a",
      "colorTwo": "#1a1a1a",
      "gradientDirection": "to right"
    },
    "backgroundOpacity": 100,
    "frameRadius": 8,
    "headerImageUrl": "https://example.com/header.png",
    "title": {
      "text": "Classic Progress Bar",
      "fontColor": "#FFD700",
      "fontSize": 10,
      "fontWeight": "bold"
    },
    "subtitle": {
      "text": "Collect rewards along the way",
      "fontColor": "#FFD700",
      "fontSize": 8,
      "fontWeight": "medium"
    },
    "progressBar": {
      "barFillColor": {
        "colorOne": "#FFD700",
        "colorTwo": "#FFA500",
        "gradientDirection": "to right"
      },
      "borderColor": {
        "colorOne": "#1a1a1a",
        "colorTwo": "#3a3a3a",
        "gradientDirection": "to right"
      },
      "borderWidth": 3,
      "barRadius": 4,
      "backgroundColor": {
        "colorOne": "#1a1a1a",
        "colorTwo": "#111111",
        "gradientDirection": "to bottom"
      },
      "textColor": "#FFD700",
      "accumulatedItem": {
        "imageUrl": "https://example.com/item.png",
        "ribbonImageUrl": "https://example.com/ribbon.png"
      },
      "type": "classic"
    }
  }'

curl -X POST \
  'https://api.appcharge.com/components/v1/offer-design' \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -H 'x-publisher-token: <x-publisher-token>' \
  --data '{
    "offerUiType": "ProgressBar",
    "name": "Milestone Progress Bar Design",
    "externalId": "progress-bar-design-milestones",
    "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
    "backgroundColor": {
      "colorOne": "#1a1a1a",
      "colorTwo": "#1a1a1a",
      "gradientDirection": "to right"
    },
    "backgroundOpacity": 100,
    "frameRadius": 8,
    "headerImageUrl": "https://example.com/header.png",
    "title": {
      "text": "Reach Every Milestone",
      "fontColor": "#FFD700",
      "fontSize": 10,
      "fontWeight": "bold"
    },
    "subtitle": {
      "text": "Collect rewards along the way",
      "fontColor": "#FFD700",
      "fontSize": 8,
      "fontWeight": "medium"
    },
    "progressBar": {
      "barFillColor": {
        "colorOne": "#FFD700",
        "colorTwo": "#FFA500",
        "gradientDirection": "to right"
      },
      "borderColor": {
        "colorOne": "#1a1a1a",
        "colorTwo": "#3a3a3a",
        "gradientDirection": "to right"
      },
      "borderWidth": 3,
      "barRadius": 4,
      "backgroundColor": {
        "colorOne": "#1a1a1a",
        "colorTwo": "#111111",
        "gradientDirection": "to bottom"
      },
      "textColor": "#FFD700",
      "accumulatedItem": {
        "imageUrl": "https://example.com/item.png",
        "ribbonImageUrl": "https://example.com/ribbon.png"
      },
      "type": "milestones",
      "milestones": {
        "milestoneCompletedIconUrl": "https://example.com/checkmark.png",
        "tooltipBackgroundColor": "#1f9eec"
      }
    }
  }'

{
  "id": "6909e7684f11e8957afd5d53",
  "offerUiType": "ProgressBar",
  "name": "Classic Progress Bar Design",
  "externalId": "progress-bar-design-classic",
  "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
  "backgroundColor": {
    "colorOne": "#1a1a1a",
    "colorTwo": "#1a1a1a",
    "gradientDirection": "to right"
  },
  "backgroundOpacity": 100,
  "frameRadius": 8,
  "headerImageUrl": "https://example.com/header.png",
  "title": {
    "text": "Classic Progress Bar",
    "fontColor": "#FFD700",
    "fontSize": 10,
    "fontWeight": "bold"
  },
  "subtitle": {
    "text": "Collect rewards along the way",
    "fontColor": "#FFD700",
    "fontSize": 8,
    "fontWeight": "medium"
  },
  "progressBar": {
    "barFillColor": {
      "colorOne": "#FFD700",
      "colorTwo": "#FFA500",
      "gradientDirection": "to right"
    },
    "borderColor": {
      "colorOne": "#1a1a1a",
      "colorTwo": "#3a3a3a",
      "gradientDirection": "to right"
    },
    "borderWidth": 3,
    "barRadius": 4,
    "backgroundColor": {
      "colorOne": "#1a1a1a",
      "colorTwo": "#111111",
      "gradientDirection": "to bottom"
    },
    "textColor": "#FFD700",
    "accumulatedItem": {
      "imageUrl": "https://example.com/item.png",
      "ribbonImageUrl": "https://example.com/ribbon.png"
    },
    "type": "classic",
    "milestones": null
  }
}

{
  "id": "6909e7684f11e8957afd5d54",
  "offerUiType": "ProgressBar",
  "name": "Milestone Progress Bar Design",
  "externalId": "progress-bar-design-milestones",
  "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
  "backgroundColor": {
    "colorOne": "#1a1a1a",
    "colorTwo": "#1a1a1a",
    "gradientDirection": "to right"
  },
  "backgroundOpacity": 100,
  "frameRadius": 8,
  "headerImageUrl": "https://example.com/header.png",
  "title": {
    "text": "Reach Every Milestone",
    "fontColor": "#FFD700",
    "fontSize": 10,
    "fontWeight": "bold"
  },
  "subtitle": {
    "text": "Collect rewards along the way",
    "fontColor": "#FFD700",
    "fontSize": 8,
    "fontWeight": "medium"
  },
  "progressBar": {
    "barFillColor": {
      "colorOne": "#FFD700",
      "colorTwo": "#FFA500",
      "gradientDirection": "to right"
    },
    "borderColor": {
      "colorOne": "#1a1a1a",
      "colorTwo": "#3a3a3a",
      "gradientDirection": "to right"
    },
    "borderWidth": 3,
    "barRadius": 4,
    "backgroundColor": {
      "colorOne": "#1a1a1a",
      "colorTwo": "#111111",
      "gradientDirection": "to bottom"
    },
    "textColor": "#FFD700",
    "accumulatedItem": {
      "imageUrl": "https://example.com/item.png",
      "ribbonImageUrl": "https://example.com/ribbon.png"
    },
    "type": "milestones",
    "milestones": {
      "milestoneCompletedIconUrl": "https://example.com/checkmark.png",
      "tooltipBackgroundColor": "#1f9eec"
    }
  }
}

POST

components

offer-design

curl -X POST \
  'https://api.appcharge.com/components/v1/offer-design' \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -H 'x-publisher-token: <x-publisher-token>' \
  --data '{
    "offerUiType": "ProgressBar",
    "name": "Classic Progress Bar Design",
    "externalId": "progress-bar-design-classic",
    "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
    "backgroundColor": {
      "colorOne": "#1a1a1a",
      "colorTwo": "#1a1a1a",
      "gradientDirection": "to right"
    },
    "backgroundOpacity": 100,
    "frameRadius": 8,
    "headerImageUrl": "https://example.com/header.png",
    "title": {
      "text": "Classic Progress Bar",
      "fontColor": "#FFD700",
      "fontSize": 10,
      "fontWeight": "bold"
    },
    "subtitle": {
      "text": "Collect rewards along the way",
      "fontColor": "#FFD700",
      "fontSize": 8,
      "fontWeight": "medium"
    },
    "progressBar": {
      "barFillColor": {
        "colorOne": "#FFD700",
        "colorTwo": "#FFA500",
        "gradientDirection": "to right"
      },
      "borderColor": {
        "colorOne": "#1a1a1a",
        "colorTwo": "#3a3a3a",
        "gradientDirection": "to right"
      },
      "borderWidth": 3,
      "barRadius": 4,
      "backgroundColor": {
        "colorOne": "#1a1a1a",
        "colorTwo": "#111111",
        "gradientDirection": "to bottom"
      },
      "textColor": "#FFD700",
      "accumulatedItem": {
        "imageUrl": "https://example.com/item.png",
        "ribbonImageUrl": "https://example.com/ribbon.png"
      },
      "type": "classic"
    }
  }'

curl -X POST \
  'https://api.appcharge.com/components/v1/offer-design' \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -H 'x-publisher-token: <x-publisher-token>' \
  --data '{
    "offerUiType": "ProgressBar",
    "name": "Milestone Progress Bar Design",
    "externalId": "progress-bar-design-milestones",
    "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
    "backgroundColor": {
      "colorOne": "#1a1a1a",
      "colorTwo": "#1a1a1a",
      "gradientDirection": "to right"
    },
    "backgroundOpacity": 100,
    "frameRadius": 8,
    "headerImageUrl": "https://example.com/header.png",
    "title": {
      "text": "Reach Every Milestone",
      "fontColor": "#FFD700",
      "fontSize": 10,
      "fontWeight": "bold"
    },
    "subtitle": {
      "text": "Collect rewards along the way",
      "fontColor": "#FFD700",
      "fontSize": 8,
      "fontWeight": "medium"
    },
    "progressBar": {
      "barFillColor": {
        "colorOne": "#FFD700",
        "colorTwo": "#FFA500",
        "gradientDirection": "to right"
      },
      "borderColor": {
        "colorOne": "#1a1a1a",
        "colorTwo": "#3a3a3a",
        "gradientDirection": "to right"
      },
      "borderWidth": 3,
      "barRadius": 4,
      "backgroundColor": {
        "colorOne": "#1a1a1a",
        "colorTwo": "#111111",
        "gradientDirection": "to bottom"
      },
      "textColor": "#FFD700",
      "accumulatedItem": {
        "imageUrl": "https://example.com/item.png",
        "ribbonImageUrl": "https://example.com/ribbon.png"
      },
      "type": "milestones",
      "milestones": {
        "milestoneCompletedIconUrl": "https://example.com/checkmark.png",
        "tooltipBackgroundColor": "#1f9eec"
      }
    }
  }'

{
  "id": "6909e7684f11e8957afd5d53",
  "offerUiType": "ProgressBar",
  "name": "Classic Progress Bar Design",
  "externalId": "progress-bar-design-classic",
  "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
  "backgroundColor": {
    "colorOne": "#1a1a1a",
    "colorTwo": "#1a1a1a",
    "gradientDirection": "to right"
  },
  "backgroundOpacity": 100,
  "frameRadius": 8,
  "headerImageUrl": "https://example.com/header.png",
  "title": {
    "text": "Classic Progress Bar",
    "fontColor": "#FFD700",
    "fontSize": 10,
    "fontWeight": "bold"
  },
  "subtitle": {
    "text": "Collect rewards along the way",
    "fontColor": "#FFD700",
    "fontSize": 8,
    "fontWeight": "medium"
  },
  "progressBar": {
    "barFillColor": {
      "colorOne": "#FFD700",
      "colorTwo": "#FFA500",
      "gradientDirection": "to right"
    },
    "borderColor": {
      "colorOne": "#1a1a1a",
      "colorTwo": "#3a3a3a",
      "gradientDirection": "to right"
    },
    "borderWidth": 3,
    "barRadius": 4,
    "backgroundColor": {
      "colorOne": "#1a1a1a",
      "colorTwo": "#111111",
      "gradientDirection": "to bottom"
    },
    "textColor": "#FFD700",
    "accumulatedItem": {
      "imageUrl": "https://example.com/item.png",
      "ribbonImageUrl": "https://example.com/ribbon.png"
    },
    "type": "classic",
    "milestones": null
  }
}

{
  "id": "6909e7684f11e8957afd5d54",
  "offerUiType": "ProgressBar",
  "name": "Milestone Progress Bar Design",
  "externalId": "progress-bar-design-milestones",
  "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
  "backgroundColor": {
    "colorOne": "#1a1a1a",
    "colorTwo": "#1a1a1a",
    "gradientDirection": "to right"
  },
  "backgroundOpacity": 100,
  "frameRadius": 8,
  "headerImageUrl": "https://example.com/header.png",
  "title": {
    "text": "Reach Every Milestone",
    "fontColor": "#FFD700",
    "fontSize": 10,
    "fontWeight": "bold"
  },
  "subtitle": {
    "text": "Collect rewards along the way",
    "fontColor": "#FFD700",
    "fontSize": 8,
    "fontWeight": "medium"
  },
  "progressBar": {
    "barFillColor": {
      "colorOne": "#FFD700",
      "colorTwo": "#FFA500",
      "gradientDirection": "to right"
    },
    "borderColor": {
      "colorOne": "#1a1a1a",
      "colorTwo": "#3a3a3a",
      "gradientDirection": "to right"
    },
    "borderWidth": 3,
    "barRadius": 4,
    "backgroundColor": {
      "colorOne": "#1a1a1a",
      "colorTwo": "#111111",
      "gradientDirection": "to bottom"
    },
    "textColor": "#FFD700",
    "accumulatedItem": {
      "imageUrl": "https://example.com/item.png",
      "ribbonImageUrl": "https://example.com/ribbon.png"
    },
    "type": "milestones",
    "milestones": {
      "milestoneCompletedIconUrl": "https://example.com/checkmark.png",
      "tooltipBackgroundColor": "#1f9eec"
    }
  }
}

curl -X POST \
  'https://api.appcharge.com/components/v1/offer-design' \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -H 'x-publisher-token: <x-publisher-token>' \
  --data '{
    "offerUiType": "ProgressBar",
    "name": "Classic Progress Bar Design",
    "externalId": "progress-bar-design-classic",
    "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
    "backgroundColor": {
      "colorOne": "#1a1a1a",
      "colorTwo": "#1a1a1a",
      "gradientDirection": "to right"
    },
    "backgroundOpacity": 100,
    "frameRadius": 8,
    "headerImageUrl": "https://example.com/header.png",
    "title": {
      "text": "Classic Progress Bar",
      "fontColor": "#FFD700",
      "fontSize": 10,
      "fontWeight": "bold"
    },
    "subtitle": {
      "text": "Collect rewards along the way",
      "fontColor": "#FFD700",
      "fontSize": 8,
      "fontWeight": "medium"
    },
    "progressBar": {
      "barFillColor": {
        "colorOne": "#FFD700",
        "colorTwo": "#FFA500",
        "gradientDirection": "to right"
      },
      "borderColor": {
        "colorOne": "#1a1a1a",
        "colorTwo": "#3a3a3a",
        "gradientDirection": "to right"
      },
      "borderWidth": 3,
      "barRadius": 4,
      "backgroundColor": {
        "colorOne": "#1a1a1a",
        "colorTwo": "#111111",
        "gradientDirection": "to bottom"
      },
      "textColor": "#FFD700",
      "accumulatedItem": {
        "imageUrl": "https://example.com/item.png",
        "ribbonImageUrl": "https://example.com/ribbon.png"
      },
      "type": "classic"
    }
  }'

curl -X POST \
  'https://api.appcharge.com/components/v1/offer-design' \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -H 'x-publisher-token: <x-publisher-token>' \
  --data '{
    "offerUiType": "ProgressBar",
    "name": "Milestone Progress Bar Design",
    "externalId": "progress-bar-design-milestones",
    "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
    "backgroundColor": {
      "colorOne": "#1a1a1a",
      "colorTwo": "#1a1a1a",
      "gradientDirection": "to right"
    },
    "backgroundOpacity": 100,
    "frameRadius": 8,
    "headerImageUrl": "https://example.com/header.png",
    "title": {
      "text": "Reach Every Milestone",
      "fontColor": "#FFD700",
      "fontSize": 10,
      "fontWeight": "bold"
    },
    "subtitle": {
      "text": "Collect rewards along the way",
      "fontColor": "#FFD700",
      "fontSize": 8,
      "fontWeight": "medium"
    },
    "progressBar": {
      "barFillColor": {
        "colorOne": "#FFD700",
        "colorTwo": "#FFA500",
        "gradientDirection": "to right"
      },
      "borderColor": {
        "colorOne": "#1a1a1a",
        "colorTwo": "#3a3a3a",
        "gradientDirection": "to right"
      },
      "borderWidth": 3,
      "barRadius": 4,
      "backgroundColor": {
        "colorOne": "#1a1a1a",
        "colorTwo": "#111111",
        "gradientDirection": "to bottom"
      },
      "textColor": "#FFD700",
      "accumulatedItem": {
        "imageUrl": "https://example.com/item.png",
        "ribbonImageUrl": "https://example.com/ribbon.png"
      },
      "type": "milestones",
      "milestones": {
        "milestoneCompletedIconUrl": "https://example.com/checkmark.png",
        "tooltipBackgroundColor": "#1f9eec"
      }
    }
  }'

{
  "id": "6909e7684f11e8957afd5d53",
  "offerUiType": "ProgressBar",
  "name": "Classic Progress Bar Design",
  "externalId": "progress-bar-design-classic",
  "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
  "backgroundColor": {
    "colorOne": "#1a1a1a",
    "colorTwo": "#1a1a1a",
    "gradientDirection": "to right"
  },
  "backgroundOpacity": 100,
  "frameRadius": 8,
  "headerImageUrl": "https://example.com/header.png",
  "title": {
    "text": "Classic Progress Bar",
    "fontColor": "#FFD700",
    "fontSize": 10,
    "fontWeight": "bold"
  },
  "subtitle": {
    "text": "Collect rewards along the way",
    "fontColor": "#FFD700",
    "fontSize": 8,
    "fontWeight": "medium"
  },
  "progressBar": {
    "barFillColor": {
      "colorOne": "#FFD700",
      "colorTwo": "#FFA500",
      "gradientDirection": "to right"
    },
    "borderColor": {
      "colorOne": "#1a1a1a",
      "colorTwo": "#3a3a3a",
      "gradientDirection": "to right"
    },
    "borderWidth": 3,
    "barRadius": 4,
    "backgroundColor": {
      "colorOne": "#1a1a1a",
      "colorTwo": "#111111",
      "gradientDirection": "to bottom"
    },
    "textColor": "#FFD700",
    "accumulatedItem": {
      "imageUrl": "https://example.com/item.png",
      "ribbonImageUrl": "https://example.com/ribbon.png"
    },
    "type": "classic",
    "milestones": null
  }
}

{
  "id": "6909e7684f11e8957afd5d54",
  "offerUiType": "ProgressBar",
  "name": "Milestone Progress Bar Design",
  "externalId": "progress-bar-design-milestones",
  "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
  "backgroundColor": {
    "colorOne": "#1a1a1a",
    "colorTwo": "#1a1a1a",
    "gradientDirection": "to right"
  },
  "backgroundOpacity": 100,
  "frameRadius": 8,
  "headerImageUrl": "https://example.com/header.png",
  "title": {
    "text": "Reach Every Milestone",
    "fontColor": "#FFD700",
    "fontSize": 10,
    "fontWeight": "bold"
  },
  "subtitle": {
    "text": "Collect rewards along the way",
    "fontColor": "#FFD700",
    "fontSize": 8,
    "fontWeight": "medium"
  },
  "progressBar": {
    "barFillColor": {
      "colorOne": "#FFD700",
      "colorTwo": "#FFA500",
      "gradientDirection": "to right"
    },
    "borderColor": {
      "colorOne": "#1a1a1a",
      "colorTwo": "#3a3a3a",
      "gradientDirection": "to right"
    },
    "borderWidth": 3,
    "barRadius": 4,
    "backgroundColor": {
      "colorOne": "#1a1a1a",
      "colorTwo": "#111111",
      "gradientDirection": "to bottom"
    },
    "textColor": "#FFD700",
    "accumulatedItem": {
      "imageUrl": "https://example.com/item.png",
      "ribbonImageUrl": "https://example.com/ribbon.png"
    },
    "type": "milestones",
    "milestones": {
      "milestoneCompletedIconUrl": "https://example.com/checkmark.png",
      "tooltipBackgroundColor": "#1f9eec"
    }
  }
}

Headers

x-publisher-token

string

required

Publisher token, as displayed in the Publisher Dashboard.

Body

application/json

Creates a progress bar design.

offerUiType

enum<string>

required

Offer design type.

Available options:

ProgressBar

Example:

"ProgressBar"

name

string

required

Offer design name.

Example:

"Classic Progress Bar Design"

externalId

string

required

External identifier for the offer design.

Example:

"progress-bar-design-classic"

backgroundOpacity

number

required

Opacity of the progress bar frame's backgroundColor (0 to 100). If you use backgroundImageUrl for the frame background, this value has no effect but must still be passed.

Example:

100

frameRadius

number

required

Radius of the progress bar frame.

Example:

8

progressBar

object

required

Progress bar configuration.

Show child attributes

backgroundImageUrl

string<url>

Background image URL of the progress bar frame. Required if backgroundColor isn't provided.

Example:

"https://media.appcharge.com/defaults/background.png"

backgroundColor

object

Background color of the progress bar frame. Required if backgroundImageUrl isn't provided.

To use a solid color, pass the same value for colorOne and colorTwo.

Show child attributes

headerImageUrl

string<url>

Header image URL.

Example:

"https://cdn.example.com/header.png"

title

object

Progress bar title.

Show child attributes

subtitle

object

Progress bar subtitle.

Show child attributes

Response

Offer design created successfully.

string

Offer Design ID.

Example:

"6909e7684f11e8957afd5d53"

offerUiType

enum<string>

Offer design type.

Available options:

ProgressBar

Example:

"ProgressBar"

name

string

Offer design name.

Example:

"Classic Progress Bar Design"

externalId

string

External identifier for the offer design.

Example:

"progress-bar-design-classic"

backgroundImageUrl

string<url>

Background image URL of the progress bar frame.

Example:

"https://media.appcharge.com/defaults/background.png"

backgroundColor

object

Background color of the progress bar frame. Required if backgroundImageUrl isn't provided.

To use a solid color, pass the same value for colorOne and colorTwo.

Show child attributes

backgroundOpacity

number

Opacity of the progress bar frame's backgroundColor (0 to 100).

Example:

100

frameRadius

number

Radius of the progress bar frame.

Example:

8

headerImageUrl

string<url>

Header image URL.

Example:

"https://cdn.example.com/header.png"

title

object

Progress bar title.

Show child attributes

subtitle

object

Progress bar subtitle.

Show child attributes

progressBar

object

Progress bar configuration.

Show child attributes

⌘I

Overview

What's New

Web Store

Checkout

Game Portal

Media

Events Center

Translations

Headers

Body

Response