> ## 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 Rolling Offer Design

> Creates a rolling offer design.

<RequestExample>
  ```bash Create Rolling Offer 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": "RollingOffer",
      "name": "Rolling Offer Design",
      "externalId": "rolling-offer-design",
      "backgroundImageUrl": "https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/background.png",
      "backgroundColor": "#272727",
      "backgroundOpacity": 80,
      "headerImage": "https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/header.png",
      "arrowColor": "#ffffff",
      "borderColor": {
        "colorOne": "#ffffff",
        "colorTwo": "#ffffff",
        "gradientDirection": "to right"
      },
      "borderWidth": 2,
      "subRollingOffer": {
        "backgroundImageUrl": "https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/background.png",
        "collectText": "FREE"
      }
    }'
  ```
</RequestExample>

<ResponseExample>
  ```json Create Rolling Offer Design theme={"system"}
  {
    "id": "694a7c8e87f78fb36a931763",
    "offerUiType": "RollingOffer",
    "name": "Rolling Offer Design",
    "externalId": "rolling-offer-design",
    "backgroundImageUrl": "https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/background.png",
    "backgroundColor": "#272727",
    "backgroundOpacity": 80,
    "headerImage": "https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/header.png",
    "arrowColor": "#ffffff",
    "borderColor": {
      "colorOne": "#ffffff",
      "colorTwo": "#ffffff",
      "direction": "to right"
    },
    "borderWidth": 2,
    "subRollingOffer": {
      "backgroundImageUrl": "https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/background.png",
      "collectText": "FREE"
    }
  }
  ```
</ResponseExample>


## OpenAPI

````yaml openapi-rolling-offer-design.json POST /components/v1/offer-design
openapi: 3.0.3
info:
  title: Rolling Offer Designs API
  version: 1.0.0
servers:
  - url: https://api-sandbox.appcharge.com
security:
  - PublisherTokenAuth: []
tags:
  - name: Offer Designs
paths:
  /components/v1/offer-design:
    post:
      tags:
        - Offer Designs
      description: Creates a rolling offer design.
      requestBody:
        required: true
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/RollingOffersDesignCreate'
      responses:
        '200':
          description: Offer design created successfully.
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/RollingOffersDesignResponse'
        '400':
          description: Bad request. Invalid input or validation failure.
components:
  schemas:
    RollingOffersDesignCreate:
      title: Rolling Offer Design
      type: object
      description: Design a rolling offer.
      properties:
        offerUiType:
          type: string
          enum:
            - RollingOffer
          description: Type of offer design.
          example: RollingOffer
        name:
          type: string
          description: Offer design name.
          example: Rolling Offer Design
        externalId:
          type: string
          description: Design ID that you define.
          example: rolling-offer-design
        backgroundImageUrl:
          type: string
          format: url
          description: Background image URL for the offer design.
          example: >-
            https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/background.png
        backgroundColor:
          type: string
          description: Background color of the rolling offer.
          example: '#272727'
        backgroundOpacity:
          type: number
          description: Background opacity value.
          example: 80
        headerImage:
          type: string
          format: url
          description: Header image URL for the rolling offer.
          example: >-
            https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/header.png
        arrowColor:
          type: string
          description: Color of the arrow in the rolling offer.
          example: '#ffffff'
        borderColor:
          type: object
          description: Border color configuration with gradient support.
          properties:
            colorOne:
              type: string
              description: Primary color for the background.
              example: '#ffffff'
            colorTwo:
              type: string
              description: Secondary color for the gradient background.
              example: '#ffffff'
            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
        borderWidth:
          type: number
          description: Width of the border in pixels.
          example: 2
        subRollingOffer:
          type: object
          description: Information about the sub rolling offer configuration.
          properties:
            backgroundImageUrl:
              type: string
              description: Background image URL for the sub rolling offer.
              example: >-
                https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/background.png
            collectText:
              type: string
              description: Text displayed for the collect action.
              example: FREE
          required:
            - backgroundImageUrl
            - collectText
      required:
        - offerUiType
        - name
        - externalId
        - backgroundImageUrl
        - backgroundColor
        - backgroundOpacity
        - arrowColor
        - borderColor
        - borderWidth
        - subRollingOffer
    RollingOffersDesignResponse:
      title: Rolling Offer Design
      type: object
      properties:
        id:
          type: string
          description: Design ID
          example: 694a7c8e87f78fb36a931763
        offerUiType:
          type: string
          enum:
            - RollingOffer
          description: Type of offer design.
          example: RollingOffer
        name:
          type: string
          description: Offer design name.
          example: Rolling Offer Design
        externalId:
          type: string
          description: Design ID that you defined.
          example: rolling-offer-design
        backgroundImageUrl:
          type: string
          format: url
          description: Background image URL for the offer design.
          example: >-
            https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/background.png
        backgroundColor:
          type: string
          description: Background color of the rolling offer.
          example: '#272727'
        backgroundOpacity:
          type: number
          description: Background opacity value.
          example: 80
        headerImage:
          type: string
          format: url
          description: Header image URL for the rolling offer.
          example: >-
            https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/header.png
        arrowColor:
          type: string
          description: Color of the arrow in the rolling offer.
          example: '#ffffff'
        borderColor:
          allOf:
            - $ref: '#/components/schemas/ColorDetails'
        borderWidth:
          type: number
          description: Width of the border in pixels.
          example: 2
        subRollingOffer:
          type: object
          description: Information about the sub rolling offer configuration.
          properties:
            backgroundImageUrl:
              type: string
              description: Background image URL for the sub rolling offer.
              format: url
              example: >-
                https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/background.png
            collectText:
              type: string
              description: Text displayed for the collect action.
              example: FREE
            backgroundExternalImageUrl:
              type: string
              format: url
              description: >-
                Original background image URL for the sub rolling offer when an
                external image URL is used.
              example: https://cdn.example.com/assets/background.png
        backgroundExternalImageUrl:
          type: string
          format: url
          description: >-
            Original background image URL for rolling offer backgrounds when an
            external image URL is used.
          example: https://cdn.example.com/assets/background.png
    ColorDetails:
      type: object
      description: Color details returned by offer designs.
      properties:
        colorOne:
          type: string
          description: Primary color.
          example: '#FFFFFF'
        colorTwo:
          type: string
          description: Secondary color.
          example: '#FDFCF9'
        direction:
          type: string
          description: Direction of the color transition.
          example: to right
  securitySchemes:
    PublisherTokenAuth:
      type: apiKey
      in: header
      name: x-publisher-token
      description: Publisher token, as displayed in the Publisher Dashboard.

````