> ## 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 Bundle Design

> Creates a bundle design.

<RequestExample>
  ```bash Create Bundle 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": "Bundle",
      "name": "Starter Bundle Design",
      "externalId": "starter-bundle-design",
      "backgroundImageUrl": "https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/background.png",
      "backgroundColor": {
        "colorOne": "#E7CF88",
        "colorTwo": "#FDFCF9",
        "gradientDirection": "to right"
      },
      "buttonSuffixImage": "https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/bundle-button-suffix.png",
      "buttonSuffixAnimation": "https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/bundle-button-suffix-animation.json"
    }'
  ```
</RequestExample>

<ResponseExample>
  ```json Create Bundle Design theme={"system"}
  {
    "id": "68b3e3473e2ea6249862bddf",
    "offerUiType": "Bundle",
    "name": "Starter Bundle Design",
    "externalId": "starter-bundle-design",
    "backgroundImageUrl": "https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/background.png",
    "backgroundColor": {
      "colorOne": "#E7CF88",
      "colorTwo": "#FDFCF9",
      "gradientDirection": "to right"
    },
    "buttonSuffixImage": "https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/bundle-button-suffix.png",
    "buttonSuffixAnimation": "https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/bundle-button-suffix-animation.json"
  }
  ```
</ResponseExample>


## OpenAPI

````yaml openapi-bundle-design.json POST /components/v1/offer-design
openapi: 3.0.3
info:
  title: Bundle 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 bundle design.
      requestBody:
        required: true
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/BundlesDesignCreate'
      responses:
        '200':
          description: Offer design created successfully.
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/BundlesDesignResponse'
        '400':
          description: Bad request. Invalid input or validation failure.
components:
  schemas:
    BundlesDesignCreate:
      title: Bundle Design
      type: object
      description: Design a bundle.
      properties:
        offerUiType:
          type: string
          enum:
            - Bundle
          description: Type of offer design.
          example: Bundle
        name:
          type: string
          description: Offer design name.
          example: Starter Bundle Design
        externalId:
          type: string
          description: Design ID that you define.
          example: starter-bundle-design
        backgroundImageUrl:
          type: string
          format: url
          description: >-
            Background image URL in PNG or JPEG format.


            For uploaded files, this is the Appcharge-hosted CDN URL. For
            external image URLs, this is the original image URL served from the
            provided URL. External image URLs are saved and used as-is, and
            Appcharge doesn't download, copy, upload, or host them. Images must
            remain available at the provided URLs.


            We recommend uploading image files instead of using external URLs
            when possible.
          example: >-
            https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/background.png
        backgroundColor:
          allOf:
            - $ref: '#/components/schemas/BackgroundColorGradient'
        buttonSuffixImage:
          type: string
          description: Button asset suffix for the bundle offer design.
          example: >-
            https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/bundle-button-suffix.png
        buttonSuffixAnimation:
          type: string
          description: Button asset suffix animation for the bundle offer design.
          example: >-
            https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/bundle-button-suffix-animation.json
      required:
        - offerUiType
        - name
        - externalId
        - backgroundImageUrl
    BundlesDesignResponse:
      title: Bundle Design
      type: object
      properties:
        id:
          type: string
          description: Design ID.
          example: 68b3e3473e2ea6249862bddf
        offerUiType:
          type: string
          enum:
            - Bundle
          description: Type of offer design.
          example: Bundle
        name:
          type: string
          description: Offer design name.
          example: Starter Bundle Design
        externalId:
          type: string
          description: Design ID that you defined.
          example: starter-bundle-design
        backgroundImageUrl:
          type: string
          format: url
          description: >-
            Background image URL. For uploaded files, this is the
            Appcharge-hosted CDN URL. For external image URLs, this is the
            original image URL served from the provided URL.
          example: >-
            https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/background.png
        backgroundColor:
          allOf:
            - $ref: '#/components/schemas/BackgroundColorGradient'
        externalBackgroundImageUrl:
          type: string
          format: url
          description: >-
            Original background image URL when the design uses an external image
            URL. This URL is used as provided to serve the image.
          example: https://cdn.example.com/assets/background.png
        buttonSuffixImage:
          type: string
          description: Button asset suffix for the bundle offer design.
          example: >-
            https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/bundle-button-suffix.png
        buttonSuffixAnimation:
          type: string
          description: Button asset suffix animation for the bundle offer design.
          example: >-
            https://media.appcharge.com/media/65cb7861ec8924a6b69a0f59/bundle-button-suffix-animation.json
    BackgroundColorGradient:
      type: object
      description: Background color configuration for the bundle offer design.
      properties:
        colorOne:
          type: string
          description: Primary color for the background.
          example: '#E7CF88'
        colorTwo:
          type: string
          description: Secondary color for the gradient background.
          example: '#FDFCF9'
        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
  securitySchemes:
    PublisherTokenAuth:
      type: apiKey
      in: header
      name: x-publisher-token
      description: Publisher token, as displayed in the Publisher Dashboard.

````