> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appcharge.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Update Progress Bar Design
>
Updates a progress bar design.
When you update a progress bar design, `progressBar.type` defaults to `classic`. To keep a milestones design, set `progressBar.type` to `milestones` and include the `milestones` object.
```bash Update Classic Progress Bar Design theme={"system"}
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: ' \
--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"
}
}'
```
```bash Update Milestone Progress Bar Design theme={"system"}
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: ' \
--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"
}
}
}'
```
```json Update Classic Progress Bar Design theme={"system"}
{
"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
}
}
```
```json Update Milestone Progress Bar Design theme={"system"}
{
"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"
}
}
}
```
## OpenAPI
````yaml openapi-progress-bar-design.json PUT /components/v1/offer-design/{externalId}
openapi: 3.0.3
info:
title: Progress Bar Designs API
version: 1.0.0
servers:
- url: https://api.appcharge.com
security: []
tags:
- name: Offer Designs
paths:
/components/v1/offer-design/{externalId}:
parameters:
- in: path
name: externalId
required: true
schema:
type: string
description: Offer Design ID that you defined.
- name: x-publisher-token
in: header
required: true
description: Publisher token, as displayed in the Publisher Dashboard.
schema:
type: string
put:
tags:
- Offer Designs
description: Updates a progress bar design.
requestBody:
required: true
content:
application/json:
schema:
$ref: '#/components/schemas/ProgressBarOfferDesignUpdate'
responses:
'200':
description: Offer design updated successfully.
content:
application/json:
schema:
$ref: '#/components/schemas/ProgressBarOfferDesignResponse'
'400':
description: Bad request. Invalid input or validation failure.
'404':
description: Offer design not found.
components:
schemas:
ProgressBarOfferDesignUpdate:
title: Progress Bar Design
type: object
description: Updates a progress bar design.
properties:
offerUiType:
type: string
enum:
- ProgressBar
description: Offer design type.
example: ProgressBar
name:
type: string
description: Offer design name.
example: Classic Progress Bar Design
externalId:
type: string
description: External identifier for the offer design.
example: progress-bar-design-classic
backgroundImageUrl:
type: string
format: url
description: >-
Background image URL of the progress bar frame. Required if
`backgroundColor` isn't provided.
example: https://media.appcharge.com/defaults/background.png
backgroundColor:
$ref: '#/components/schemas/BackgroundColorDto'
backgroundOpacity:
type: number
description: >-
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:
type: number
description: Radius of the progress bar frame.
example: 8
headerImageUrl:
type: string
format: url
description: Header image URL.
example: https://cdn.example.com/header.png
title:
type: object
description: Progress bar title.
properties:
text:
type: string
description: Title text.
example: Classic Progress Bar
fontColor:
type: string
description: Title font color.
example: '#FFD700'
fontSize:
type: number
description: Title font size.
default: 10
example: 10
fontWeight:
type: string
description: Title font weight.
enum:
- regular
- medium
- bold
example: bold
subtitle:
type: object
description: Progress bar subtitle.
properties:
text:
type: string
description: Subtitle text.
example: Collect rewards along the way
fontColor:
type: string
description: Subtitle font color.
example: '#FFD700'
fontSize:
type: number
description: Subtitle font size.
default: 8
example: 8
fontWeight:
type: string
description: Subtitle font weight.
enum:
- regular
- medium
- bold
example: medium
progressBar:
$ref: '#/components/schemas/ProgressBarDesignUpdate'
required:
- progressBar
ProgressBarOfferDesignResponse:
title: Progress Bar Design
type: object
properties:
id:
type: string
description: Offer Design ID.
example: 6909e7684f11e8957afd5d53
offerUiType:
type: string
enum:
- ProgressBar
description: Offer design type.
example: ProgressBar
name:
type: string
description: Offer design name.
example: Classic Progress Bar Design
externalId:
type: string
description: External identifier for the offer design.
example: progress-bar-design-classic
backgroundImageUrl:
type: string
format: url
description: Background image URL of the progress bar frame.
example: https://media.appcharge.com/defaults/background.png
backgroundColor:
$ref: '#/components/schemas/BackgroundColorDto'
backgroundOpacity:
type: number
description: Opacity of the progress bar frame's `backgroundColor` (0 to 100).
example: 100
frameRadius:
type: number
description: Radius of the progress bar frame.
example: 8
headerImageUrl:
type: string
format: url
description: Header image URL.
example: https://cdn.example.com/header.png
title:
type: object
description: Progress bar title.
properties:
text:
type: string
description: Title text.
example: Classic Progress Bar
fontColor:
type: string
description: Title font color.
example: '#FFD700'
fontSize:
type: number
description: Title font size.
example: 10
fontWeight:
type: string
description: Title font weight.
enum:
- regular
- medium
- bold
example: bold
subtitle:
type: object
description: Progress bar subtitle.
properties:
text:
type: string
description: Subtitle text.
example: Collect rewards along the way
fontColor:
type: string
description: Subtitle font color.
example: '#FFD700'
fontSize:
type: number
description: Subtitle font size.
example: 8
fontWeight:
type: string
description: Subtitle font weight.
enum:
- regular
- medium
- bold
example: medium
progressBar:
$ref: '#/components/schemas/ProgressBarDesignResponse'
BackgroundColorDto:
type: object
description: >-
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`.
properties:
colorOne:
type: string
description: Primary color.
example: '#1a1a1a'
colorTwo:
type: string
description: Secondary color for the gradient.
example: '#3a3a3a'
gradientDirection:
type: string
enum:
- to top
- to bottom
- to left
- to right
- to top left
- to top right
- to bottom left
- to bottom right
description: Direction of the gradient.
example: to right
required:
- colorOne
- colorTwo
- gradientDirection
ProgressBarDesignUpdate:
type: object
description: Progress bar configuration for update requests.
properties:
barFillColor:
$ref: '#/components/schemas/BarFillColorDto'
backgroundColor:
$ref: '#/components/schemas/BarBackgroundColorDto'
borderColor:
$ref: '#/components/schemas/BorderColorDto'
borderWidth:
type: number
description: Width of the border in pixels.
example: 2
barRadius:
type: number
description: Radius of the bar.
example: 4
accumulatedItem:
$ref: '#/components/schemas/AccumulatedItemDesign'
textColor:
type: string
description: >-
Text color for the progress bar, **Ends In** countdown, and
milestone points indicator.
example: '#FFD700'
type:
type: string
enum:
- classic
- milestones
description: >-
Progress bar type. Use `classic` to display one mission at a time.
Use `milestones` to display all missions simultaneously along the
bar.
default: classic
example: milestones
milestones:
type: object
description: >-
Information about the `milestones` progress bar type. Required when
`type` is `milestones`.
properties:
milestoneCompletedIconUrl:
type: string
format: url
description: >-
Image URL of the icon to display on a milestone once a player
completes it.
example: https://cdn.example.com/checkmark.png
tooltipBackgroundColor:
type: string
description: >-
Background color of the tooltip displayed when a player clicks a
milestone to view its rewards.
example: '#1f9eec'
required:
- milestoneCompletedIconUrl
- tooltipBackgroundColor
required:
- barFillColor
- backgroundColor
- borderColor
- borderWidth
- barRadius
- accumulatedItem
ProgressBarDesignResponse:
type: object
description: Progress bar configuration.
properties:
barFillColor:
$ref: '#/components/schemas/BarFillColorDto'
borderColor:
$ref: '#/components/schemas/BorderColorDto'
borderWidth:
type: number
description: Width of the border in pixels.
example: 3
barRadius:
type: number
description: Radius of the bar.
example: 4
accumulatedItem:
$ref: '#/components/schemas/AccumulatedItemDesignResponse'
backgroundColor:
$ref: '#/components/schemas/BarBackgroundColorDto'
textColor:
type: string
description: >-
Text color for the progress bar, **Ends In** countdown, and
milestone points indicator.
example: '#FFD700'
type:
type: string
enum:
- classic
- milestones
description: Progress bar type.
example: classic
milestones:
type: object
description: >-
Information about the `milestones` progress bar type. Returned as
`null` when `type` is `classic`.
properties:
milestoneCompletedIconUrl:
type: string
format: url
description: >-
Image URL of the icon displayed on a milestone once a player
completes it.
example: https://cdn.example.com/checkmark.png
tooltipBackgroundColor:
type: string
description: >-
Background color of the tooltip displayed when a player clicks a
milestone to view its rewards.
example: '#1f9eec'
BarFillColorDto:
type: object
description: |-
Bar fill color.
To use a solid color, pass the same value for `colorOne` and `colorTwo`.
properties:
colorOne:
type: string
description: Primary color.
example: '#1a1a1a'
colorTwo:
type: string
description: Secondary color for the gradient.
example: '#3a3a3a'
gradientDirection:
type: string
enum:
- to top
- to bottom
- to left
- to right
- to top left
- to top right
- to bottom left
- to bottom right
description: Direction of the gradient.
example: to right
required:
- colorOne
- colorTwo
- gradientDirection
BarBackgroundColorDto:
type: object
description: |-
Bar background color.
To use a solid color, pass the same value for `colorOne` and `colorTwo`.
properties:
colorOne:
type: string
description: Primary color.
example: '#1a1a1a'
colorTwo:
type: string
description: Secondary color for the gradient.
example: '#3a3a3a'
gradientDirection:
type: string
enum:
- to top
- to bottom
- to left
- to right
- to top left
- to top right
- to bottom left
- to bottom right
description: Direction of the gradient.
example: to right
required:
- colorOne
- colorTwo
- gradientDirection
BorderColorDto:
type: object
description: |-
Bar border color.
To use a solid color, pass the same value for `colorOne` and `colorTwo`.
properties:
colorOne:
type: string
description: Primary color.
example: '#1a1a1a'
colorTwo:
type: string
description: Secondary color for the gradient.
example: '#3a3a3a'
gradientDirection:
type: string
enum:
- to top
- to bottom
- to left
- to right
- to top left
- to top right
- to bottom left
- to bottom right
description: Direction of the gradient.
example: to right
required:
- colorOne
- colorTwo
- gradientDirection
AccumulatedItemDesign:
type: object
description: Accumulated item configuration.
properties:
imageUrl:
type: string
format: url
description: Image URL for the accumulated item icon on the progress bar.
example: https://cdn.example.com/item.png
ribbonImageUrl:
type: string
format: url
description: >-
Image URL for the ribbon that shows how many accumulated items the
offer contributes to the progress bar.
example: https://cdn.example.com/ribbon.png
required:
- imageUrl
- ribbonImageUrl
AccumulatedItemDesignResponse:
type: object
description: Accumulated item configuration.
properties:
imageUrl:
type: string
format: url
description: Image URL for the accumulated item icon on the progress bar.
example: https://cdn.example.com/item.png
ribbonImageUrl:
type: string
format: url
description: >-
Image URL for the ribbon that shows how many accumulated items the
offer contributes to the progress bar.
example: https://cdn.example.com/ribbon.png
````