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

# Create Progress Bar Design

> 
Creates a progress bar design.

When you create a progress bar design, `progressBar.type` defaults to `classic`. To create a milestones design, set `progressBar.type` to `milestones` and include the `milestones` object.


<RequestExample>
  ```bash Create Classic Progress Bar Design theme={"system"}
  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"
      }
    }'
  ```

  ```bash Create Milestone Progress Bar Design theme={"system"}
  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"
        }
      }
    }'
  ```
</RequestExample>

<ResponseExample>
  ```json Create Classic Progress Bar Design theme={"system"}
  {
    "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
    }
  }
  ```

  ```json Create Milestone Progress Bar Design theme={"system"}
  {
    "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"
      }
    }
  }
  ```
</ResponseExample>


## OpenAPI

````yaml openapi-progress-bar-design.json POST /components/v1/offer-design
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:
    parameters:
      - name: x-publisher-token
        in: header
        required: true
        description: Publisher token, as displayed in the Publisher Dashboard.
        schema:
          type: string
    post:
      tags:
        - Offer Designs
      description: Creates a progress bar design.
      requestBody:
        required: true
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/ProgressBarOfferDesignCreate'
      responses:
        '201':
          description: Offer design created successfully.
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/ProgressBarOfferDesignResponse'
        '400':
          description: Bad request. Invalid input or validation failure.
        '409':
          description: Offer design already exists.
components:
  schemas:
    ProgressBarOfferDesignCreate:
      title: Progress Bar Design
      type: object
      description: Creates 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
          required:
            - text
            - fontColor
            - fontSize
            - fontWeight
        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
          required:
            - text
            - fontColor
            - fontSize
            - fontWeight
        progressBar:
          $ref: '#/components/schemas/ProgressBarDesign'
      required:
        - offerUiType
        - name
        - externalId
        - frameRadius
        - backgroundOpacity
        - 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
    ProgressBarDesign:
      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/AccumulatedItemDesign'
        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. 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:
        - backgroundColor
        - barFillColor
        - barRadius
        - borderColor
        - borderWidth
        - 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
    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
    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
    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

````