Update Progress Bar Design

curl -X PUT \
  'https://api.appcharge.com/components/v1/offer-design/progress-bar-design-classic' \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -H 'x-publisher-token: <x-publisher-token>' \
  --data '{
    "offerUiType": "ProgressBar",
    "name": "Classic Progress Bar Design Updated",
    "externalId": "progress-bar-design-classic",
    "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
    "backgroundColor": {
      "colorOne": "#222222",
      "colorTwo": "#444444",
      "gradientDirection": "to bottom"
    },
    "backgroundOpacity": 90,
    "frameRadius": 12,
    "headerImageUrl": "https://example.com/header-new.png",
    "title": {
      "text": "Updated Classic Bar",
      "fontColor": "#FF0000",
      "fontSize": 12,
      "fontWeight": "bold"
    },
    "subtitle": {
      "text": "New rewards at every step",
      "fontColor": "#FF0000",
      "fontSize": 9,
      "fontWeight": "medium"
    },
    "progressBar": {
      "barFillColor": {
        "colorOne": "#00FF00",
        "colorTwo": "#007700",
        "gradientDirection": "to right"
      },
      "backgroundColor": {
        "colorOne": "#333333",
        "colorTwo": "#555555",
        "gradientDirection": "to right"
      },
      "borderColor": {
        "colorOne": "#FF0000",
        "colorTwo": "#880000",
        "gradientDirection": "to bottom"
      },
      "borderWidth": 4,
      "barRadius": 8,
      "accumulatedItem": {
        "imageUrl": "https://example.com/item-new.png",
        "ribbonImageUrl": "https://example.com/ribbon-new.png"
      },
      "textColor": "#FF0000",
      "type": "classic"
    }
  }'

curl -X PUT \
  'https://api.appcharge.com/components/v1/offer-design/progress-bar-design-milestones' \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -H 'x-publisher-token: <x-publisher-token>' \
  --data '{
    "offerUiType": "ProgressBar",
    "name": "Milestone Progress Bar Design Updated",
    "externalId": "progress-bar-design-milestones",
    "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
    "backgroundColor": {
      "colorOne": "#222222",
      "colorTwo": "#444444",
      "gradientDirection": "to bottom"
    },
    "backgroundOpacity": 90,
    "frameRadius": 12,
    "headerImageUrl": "https://example.com/header-new.png",
    "title": {
      "text": "Updated Milestone Bar",
      "fontColor": "#FF0000",
      "fontSize": 12,
      "fontWeight": "bold"
    },
    "subtitle": {
      "text": "New rewards at every step",
      "fontColor": "#FF0000",
      "fontSize": 9,
      "fontWeight": "medium"
    },
    "progressBar": {
      "barFillColor": {
        "colorOne": "#00FF00",
        "colorTwo": "#007700",
        "gradientDirection": "to right"
      },
      "backgroundColor": {
        "colorOne": "#333333",
        "colorTwo": "#555555",
        "gradientDirection": "to right"
      },
      "borderColor": {
        "colorOne": "#FF0000",
        "colorTwo": "#880000",
        "gradientDirection": "to bottom"
      },
      "borderWidth": 4,
      "barRadius": 8,
      "accumulatedItem": {
        "imageUrl": "https://example.com/item-new.png",
        "ribbonImageUrl": "https://example.com/ribbon-new.png"
      },
      "textColor": "#FF0000",
      "type": "milestones",
      "milestones": {
        "milestoneCompletedIconUrl": "https://example.com/checkmark-new.png",
        "tooltipBackgroundColor": "#1f9eec"
      }
    }
  }'

{
  "id": "6a2536c0b0fbdcd303bd861b",
  "offerUiType": "ProgressBar",
  "name": "Classic Progress Bar Design Updated",
  "externalId": "progress-bar-design-classic",
  "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
  "backgroundColor": {
    "colorOne": "#222222",
    "colorTwo": "#444444",
    "gradientDirection": "to bottom"
  },
  "backgroundOpacity": 90,
  "frameRadius": 12,
  "headerImageUrl": "https://example.com/header-new.png",
  "title": {
    "text": "Updated Classic Bar",
    "fontColor": "#FF0000",
    "fontSize": 12,
    "fontWeight": "bold"
  },
  "subtitle": {
    "text": "New rewards at every step",
    "fontColor": "#FF0000",
    "fontSize": 9,
    "fontWeight": "medium"
  },
  "progressBar": {
    "barFillColor": {
      "colorOne": "#00FF00",
      "colorTwo": "#007700",
      "gradientDirection": "to right"
    },
    "backgroundColor": {
      "colorOne": "#333333",
      "colorTwo": "#555555",
      "gradientDirection": "to right"
    },
    "borderColor": {
      "colorOne": "#FF0000",
      "colorTwo": "#880000",
      "gradientDirection": "to bottom"
    },
    "borderWidth": 4,
    "barRadius": 8,
    "accumulatedItem": {
      "imageUrl": "https://example.com/item-new.png",
      "ribbonImageUrl": "https://example.com/ribbon-new.png"
    },
    "textColor": "#FF0000",
    "type": "classic",
    "milestones": null
  }
}

{
  "id": "6a2536c0b0fbdcd303bd861c",
  "offerUiType": "ProgressBar",
  "name": "Milestone Progress Bar Design Updated",
  "externalId": "progress-bar-design-milestones",
  "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
  "backgroundColor": {
    "colorOne": "#222222",
    "colorTwo": "#444444",
    "gradientDirection": "to bottom"
  },
  "backgroundOpacity": 90,
  "frameRadius": 12,
  "headerImageUrl": "https://example.com/header-new.png",
  "title": {
    "text": "Updated Milestone Bar",
    "fontColor": "#FF0000",
    "fontSize": 12,
    "fontWeight": "bold"
  },
  "subtitle": {
    "text": "New rewards at every step",
    "fontColor": "#FF0000",
    "fontSize": 9,
    "fontWeight": "medium"
  },
  "progressBar": {
    "barFillColor": {
      "colorOne": "#00FF00",
      "colorTwo": "#007700",
      "gradientDirection": "to right"
    },
    "backgroundColor": {
      "colorOne": "#333333",
      "colorTwo": "#555555",
      "gradientDirection": "to right"
    },
    "borderColor": {
      "colorOne": "#FF0000",
      "colorTwo": "#880000",
      "gradientDirection": "to bottom"
    },
    "borderWidth": 4,
    "barRadius": 8,
    "accumulatedItem": {
      "imageUrl": "https://example.com/item-new.png",
      "ribbonImageUrl": "https://example.com/ribbon-new.png"
    },
    "textColor": "#FF0000",
    "type": "milestones",
    "milestones": {
      "milestoneCompletedIconUrl": "https://example.com/checkmark-new.png",
      "tooltipBackgroundColor": "#1f9eec"
    }
  }
}

PUT

components

offer-design

{externalId}

curl -X PUT \
  'https://api.appcharge.com/components/v1/offer-design/progress-bar-design-classic' \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -H 'x-publisher-token: <x-publisher-token>' \
  --data '{
    "offerUiType": "ProgressBar",
    "name": "Classic Progress Bar Design Updated",
    "externalId": "progress-bar-design-classic",
    "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
    "backgroundColor": {
      "colorOne": "#222222",
      "colorTwo": "#444444",
      "gradientDirection": "to bottom"
    },
    "backgroundOpacity": 90,
    "frameRadius": 12,
    "headerImageUrl": "https://example.com/header-new.png",
    "title": {
      "text": "Updated Classic Bar",
      "fontColor": "#FF0000",
      "fontSize": 12,
      "fontWeight": "bold"
    },
    "subtitle": {
      "text": "New rewards at every step",
      "fontColor": "#FF0000",
      "fontSize": 9,
      "fontWeight": "medium"
    },
    "progressBar": {
      "barFillColor": {
        "colorOne": "#00FF00",
        "colorTwo": "#007700",
        "gradientDirection": "to right"
      },
      "backgroundColor": {
        "colorOne": "#333333",
        "colorTwo": "#555555",
        "gradientDirection": "to right"
      },
      "borderColor": {
        "colorOne": "#FF0000",
        "colorTwo": "#880000",
        "gradientDirection": "to bottom"
      },
      "borderWidth": 4,
      "barRadius": 8,
      "accumulatedItem": {
        "imageUrl": "https://example.com/item-new.png",
        "ribbonImageUrl": "https://example.com/ribbon-new.png"
      },
      "textColor": "#FF0000",
      "type": "classic"
    }
  }'

curl -X PUT \
  'https://api.appcharge.com/components/v1/offer-design/progress-bar-design-milestones' \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -H 'x-publisher-token: <x-publisher-token>' \
  --data '{
    "offerUiType": "ProgressBar",
    "name": "Milestone Progress Bar Design Updated",
    "externalId": "progress-bar-design-milestones",
    "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
    "backgroundColor": {
      "colorOne": "#222222",
      "colorTwo": "#444444",
      "gradientDirection": "to bottom"
    },
    "backgroundOpacity": 90,
    "frameRadius": 12,
    "headerImageUrl": "https://example.com/header-new.png",
    "title": {
      "text": "Updated Milestone Bar",
      "fontColor": "#FF0000",
      "fontSize": 12,
      "fontWeight": "bold"
    },
    "subtitle": {
      "text": "New rewards at every step",
      "fontColor": "#FF0000",
      "fontSize": 9,
      "fontWeight": "medium"
    },
    "progressBar": {
      "barFillColor": {
        "colorOne": "#00FF00",
        "colorTwo": "#007700",
        "gradientDirection": "to right"
      },
      "backgroundColor": {
        "colorOne": "#333333",
        "colorTwo": "#555555",
        "gradientDirection": "to right"
      },
      "borderColor": {
        "colorOne": "#FF0000",
        "colorTwo": "#880000",
        "gradientDirection": "to bottom"
      },
      "borderWidth": 4,
      "barRadius": 8,
      "accumulatedItem": {
        "imageUrl": "https://example.com/item-new.png",
        "ribbonImageUrl": "https://example.com/ribbon-new.png"
      },
      "textColor": "#FF0000",
      "type": "milestones",
      "milestones": {
        "milestoneCompletedIconUrl": "https://example.com/checkmark-new.png",
        "tooltipBackgroundColor": "#1f9eec"
      }
    }
  }'

{
  "id": "6a2536c0b0fbdcd303bd861b",
  "offerUiType": "ProgressBar",
  "name": "Classic Progress Bar Design Updated",
  "externalId": "progress-bar-design-classic",
  "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
  "backgroundColor": {
    "colorOne": "#222222",
    "colorTwo": "#444444",
    "gradientDirection": "to bottom"
  },
  "backgroundOpacity": 90,
  "frameRadius": 12,
  "headerImageUrl": "https://example.com/header-new.png",
  "title": {
    "text": "Updated Classic Bar",
    "fontColor": "#FF0000",
    "fontSize": 12,
    "fontWeight": "bold"
  },
  "subtitle": {
    "text": "New rewards at every step",
    "fontColor": "#FF0000",
    "fontSize": 9,
    "fontWeight": "medium"
  },
  "progressBar": {
    "barFillColor": {
      "colorOne": "#00FF00",
      "colorTwo": "#007700",
      "gradientDirection": "to right"
    },
    "backgroundColor": {
      "colorOne": "#333333",
      "colorTwo": "#555555",
      "gradientDirection": "to right"
    },
    "borderColor": {
      "colorOne": "#FF0000",
      "colorTwo": "#880000",
      "gradientDirection": "to bottom"
    },
    "borderWidth": 4,
    "barRadius": 8,
    "accumulatedItem": {
      "imageUrl": "https://example.com/item-new.png",
      "ribbonImageUrl": "https://example.com/ribbon-new.png"
    },
    "textColor": "#FF0000",
    "type": "classic",
    "milestones": null
  }
}

{
  "id": "6a2536c0b0fbdcd303bd861c",
  "offerUiType": "ProgressBar",
  "name": "Milestone Progress Bar Design Updated",
  "externalId": "progress-bar-design-milestones",
  "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
  "backgroundColor": {
    "colorOne": "#222222",
    "colorTwo": "#444444",
    "gradientDirection": "to bottom"
  },
  "backgroundOpacity": 90,
  "frameRadius": 12,
  "headerImageUrl": "https://example.com/header-new.png",
  "title": {
    "text": "Updated Milestone Bar",
    "fontColor": "#FF0000",
    "fontSize": 12,
    "fontWeight": "bold"
  },
  "subtitle": {
    "text": "New rewards at every step",
    "fontColor": "#FF0000",
    "fontSize": 9,
    "fontWeight": "medium"
  },
  "progressBar": {
    "barFillColor": {
      "colorOne": "#00FF00",
      "colorTwo": "#007700",
      "gradientDirection": "to right"
    },
    "backgroundColor": {
      "colorOne": "#333333",
      "colorTwo": "#555555",
      "gradientDirection": "to right"
    },
    "borderColor": {
      "colorOne": "#FF0000",
      "colorTwo": "#880000",
      "gradientDirection": "to bottom"
    },
    "borderWidth": 4,
    "barRadius": 8,
    "accumulatedItem": {
      "imageUrl": "https://example.com/item-new.png",
      "ribbonImageUrl": "https://example.com/ribbon-new.png"
    },
    "textColor": "#FF0000",
    "type": "milestones",
    "milestones": {
      "milestoneCompletedIconUrl": "https://example.com/checkmark-new.png",
      "tooltipBackgroundColor": "#1f9eec"
    }
  }
}

curl -X PUT \
  'https://api.appcharge.com/components/v1/offer-design/progress-bar-design-classic' \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -H 'x-publisher-token: <x-publisher-token>' \
  --data '{
    "offerUiType": "ProgressBar",
    "name": "Classic Progress Bar Design Updated",
    "externalId": "progress-bar-design-classic",
    "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
    "backgroundColor": {
      "colorOne": "#222222",
      "colorTwo": "#444444",
      "gradientDirection": "to bottom"
    },
    "backgroundOpacity": 90,
    "frameRadius": 12,
    "headerImageUrl": "https://example.com/header-new.png",
    "title": {
      "text": "Updated Classic Bar",
      "fontColor": "#FF0000",
      "fontSize": 12,
      "fontWeight": "bold"
    },
    "subtitle": {
      "text": "New rewards at every step",
      "fontColor": "#FF0000",
      "fontSize": 9,
      "fontWeight": "medium"
    },
    "progressBar": {
      "barFillColor": {
        "colorOne": "#00FF00",
        "colorTwo": "#007700",
        "gradientDirection": "to right"
      },
      "backgroundColor": {
        "colorOne": "#333333",
        "colorTwo": "#555555",
        "gradientDirection": "to right"
      },
      "borderColor": {
        "colorOne": "#FF0000",
        "colorTwo": "#880000",
        "gradientDirection": "to bottom"
      },
      "borderWidth": 4,
      "barRadius": 8,
      "accumulatedItem": {
        "imageUrl": "https://example.com/item-new.png",
        "ribbonImageUrl": "https://example.com/ribbon-new.png"
      },
      "textColor": "#FF0000",
      "type": "classic"
    }
  }'

curl -X PUT \
  'https://api.appcharge.com/components/v1/offer-design/progress-bar-design-milestones' \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -H 'x-publisher-token: <x-publisher-token>' \
  --data '{
    "offerUiType": "ProgressBar",
    "name": "Milestone Progress Bar Design Updated",
    "externalId": "progress-bar-design-milestones",
    "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
    "backgroundColor": {
      "colorOne": "#222222",
      "colorTwo": "#444444",
      "gradientDirection": "to bottom"
    },
    "backgroundOpacity": 90,
    "frameRadius": 12,
    "headerImageUrl": "https://example.com/header-new.png",
    "title": {
      "text": "Updated Milestone Bar",
      "fontColor": "#FF0000",
      "fontSize": 12,
      "fontWeight": "bold"
    },
    "subtitle": {
      "text": "New rewards at every step",
      "fontColor": "#FF0000",
      "fontSize": 9,
      "fontWeight": "medium"
    },
    "progressBar": {
      "barFillColor": {
        "colorOne": "#00FF00",
        "colorTwo": "#007700",
        "gradientDirection": "to right"
      },
      "backgroundColor": {
        "colorOne": "#333333",
        "colorTwo": "#555555",
        "gradientDirection": "to right"
      },
      "borderColor": {
        "colorOne": "#FF0000",
        "colorTwo": "#880000",
        "gradientDirection": "to bottom"
      },
      "borderWidth": 4,
      "barRadius": 8,
      "accumulatedItem": {
        "imageUrl": "https://example.com/item-new.png",
        "ribbonImageUrl": "https://example.com/ribbon-new.png"
      },
      "textColor": "#FF0000",
      "type": "milestones",
      "milestones": {
        "milestoneCompletedIconUrl": "https://example.com/checkmark-new.png",
        "tooltipBackgroundColor": "#1f9eec"
      }
    }
  }'

{
  "id": "6a2536c0b0fbdcd303bd861b",
  "offerUiType": "ProgressBar",
  "name": "Classic Progress Bar Design Updated",
  "externalId": "progress-bar-design-classic",
  "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
  "backgroundColor": {
    "colorOne": "#222222",
    "colorTwo": "#444444",
    "gradientDirection": "to bottom"
  },
  "backgroundOpacity": 90,
  "frameRadius": 12,
  "headerImageUrl": "https://example.com/header-new.png",
  "title": {
    "text": "Updated Classic Bar",
    "fontColor": "#FF0000",
    "fontSize": 12,
    "fontWeight": "bold"
  },
  "subtitle": {
    "text": "New rewards at every step",
    "fontColor": "#FF0000",
    "fontSize": 9,
    "fontWeight": "medium"
  },
  "progressBar": {
    "barFillColor": {
      "colorOne": "#00FF00",
      "colorTwo": "#007700",
      "gradientDirection": "to right"
    },
    "backgroundColor": {
      "colorOne": "#333333",
      "colorTwo": "#555555",
      "gradientDirection": "to right"
    },
    "borderColor": {
      "colorOne": "#FF0000",
      "colorTwo": "#880000",
      "gradientDirection": "to bottom"
    },
    "borderWidth": 4,
    "barRadius": 8,
    "accumulatedItem": {
      "imageUrl": "https://example.com/item-new.png",
      "ribbonImageUrl": "https://example.com/ribbon-new.png"
    },
    "textColor": "#FF0000",
    "type": "classic",
    "milestones": null
  }
}

{
  "id": "6a2536c0b0fbdcd303bd861c",
  "offerUiType": "ProgressBar",
  "name": "Milestone Progress Bar Design Updated",
  "externalId": "progress-bar-design-milestones",
  "backgroundImageUrl": "https://media.appcharge.com/defaults/background.png",
  "backgroundColor": {
    "colorOne": "#222222",
    "colorTwo": "#444444",
    "gradientDirection": "to bottom"
  },
  "backgroundOpacity": 90,
  "frameRadius": 12,
  "headerImageUrl": "https://example.com/header-new.png",
  "title": {
    "text": "Updated Milestone Bar",
    "fontColor": "#FF0000",
    "fontSize": 12,
    "fontWeight": "bold"
  },
  "subtitle": {
    "text": "New rewards at every step",
    "fontColor": "#FF0000",
    "fontSize": 9,
    "fontWeight": "medium"
  },
  "progressBar": {
    "barFillColor": {
      "colorOne": "#00FF00",
      "colorTwo": "#007700",
      "gradientDirection": "to right"
    },
    "backgroundColor": {
      "colorOne": "#333333",
      "colorTwo": "#555555",
      "gradientDirection": "to right"
    },
    "borderColor": {
      "colorOne": "#FF0000",
      "colorTwo": "#880000",
      "gradientDirection": "to bottom"
    },
    "borderWidth": 4,
    "barRadius": 8,
    "accumulatedItem": {
      "imageUrl": "https://example.com/item-new.png",
      "ribbonImageUrl": "https://example.com/ribbon-new.png"
    },
    "textColor": "#FF0000",
    "type": "milestones",
    "milestones": {
      "milestoneCompletedIconUrl": "https://example.com/checkmark-new.png",
      "tooltipBackgroundColor": "#1f9eec"
    }
  }
}

Headers

x-publisher-token

string

required

Publisher token, as displayed in the Publisher Dashboard.

Path Parameters

externalId

string

required

Offer Design ID that you defined.

Body

application/json

Updates a progress bar design.

progressBar

object

required

Progress bar configuration for update requests.

Show child attributes

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. 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

backgroundOpacity

number

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

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

Response

Offer design updated 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

Path Parameters

Body

Response