LogoLogo
Try it outResourcesAPIsAddOnsBook a demo
  • Getting Started
    • Introduction to Beefree SDK
      • Create an Application
      • Installation and Fundamentals
        • Configuration parameters
          • Configuration Reload
          • Workspaces
          • Debugging the Beefree SDK Editor
        • Methods and Events
        • Authorization Process
        • How the UID parameter works
        • Set up two-factor authentication
        • Naming conventions
      • Development Applications
      • Manage Users
      • Manage Subscriptions
    • Tracking Message Changes
    • Sample Code
    • Release Candidate Environment
  • Visual Builders
    • Email Builder
    • Page Builder
      • Integrating Page Builder
      • Embedding videos in a page
    • Popup Builder
      • Popup Builder - Getting Started
      • Testing and Integrating
      • Setting layout and size
        • Advanced settings
    • AI-Driven Design Creation
  • APIs
    • Content Services API
      • Authentication
      • Export
      • Convert
      • Row Processing
      • AI Collection
      • Brand Style
    • Template Catalog API
      • Authentication
      • Templates
      • Categories
      • Collections
      • Designers
      • Tags
    • HTML Importer API
      • Authentication
      • Import HTML
  • Forms
    • Form Block
    • Integrating and using the Form block
      • Passing forms to the builder
      • Form structure and parameters
      • Form layout customization
      • Allowed form fields
      • Edit form field modal
  • Rows
    • Reusable Content
      • Create Reusable Content
        • Pre-build Reusable Content
          • Implement Custom Rows
        • Save Reusable Content
          • Implement Hosted Saved Rows
          • Implement Self-hosted Saved Rows
            • Self-hosted Saved Rows Concepts and Tutorial
      • Sync Reusable Content
        • Implement Synced Rows
        • Initialize Edit Single Row Mode
      • Manage Reusable Content
    • Storage for Reusable Content
      • Hosted Saved Rows
      • Self-Hosted Saved Rows
  • File manager
    • File manager application overview
      • Mime Types and Groups
  • Server-side configurations
    • Server-side options
      • Toolbar options
      • Storage options
        • Configure your AWS S3 bucket
        • Connect your file storage system
      • Content options
      • Services options
      • Undo & Changes history
      • Custom JavaScript Libraries Injection
  • Other Customizations
    • Advanced options
      • Special Links and Merge Tags
      • Content Dialog
      • Custom Color Palette
      • Font management
      • Roles and Permissions
      • Smart Merge Tags
      • Commenting
      • Custom Attributes
      • Meta Tags
      • Custom Languages
      • Display Conditions
      • Advanced Permissions
      • Custom File Picker
      • Custom Headers
    • Appearance
      • Content Defaults
      • Custom Sidebar Position
      • Content Tile Sorting
      • Content Tile Grouping
      • Loading Spinner Theme
      • Custom Tab Layout
      • Themes
      • Custom CSS
        • Change Log
    • AMP for Email
    • Collaborative Editing
      • Co-editing Integration Guide
    • Mobile Design Mode
    • Multi-language Templates
    • Cards Style and Image Round Corners
    • Hover Effect for Buttons
    • Content Area Padding
    • Line Height
  • Data Structures
    • Getting Started
    • Schema Catalog
    • Simple Schema
      • Template Schema
      • Definitions Schema
      • Row Schema
      • Column Schema
      • Title Schema
      • Image Schema
      • Button Schema
      • Paragraph Schema
      • HTML Schema
      • Menu Schema
      • List Schema
      • Icon Schema
      • Divider Schema
    • Row Metadata
    • Form Validation Schema
    • Comments Schema
      • Change Schema for Comments
  • Builder AddOns
    • AddOns
      • AddOns Overview
      • Partner AddOns
        • Partner AddOns directory
        • Installing Partner AddOns
        • DeepL
        • Stability AI
        • Azure AI Vision - Image Analysis
          • Alternate Text Generation with AI
          • AI Alt Text Bulk Generation
        • AI Writing Assistant
          • Available Providers
            • OpenAI
            • Azure OpenAI
            • Anthropic
          • AI Providers and Data Security
          • AI-Generated Meta Tag Fields
          • Token Upselling
          • Apply a Brand Tone
        • Custom AI Writing Assistant
      • Custom AddOns
        • AddOn Development
        • Contribute to the Partner AddOn Marketplace
      • AddOns Configuration
      • AddOn FAQs
  • Resources
    • Error Management
      • onWarning
      • Beefree SDK Editor Errors
      • File System Provider errors
      • JSON Parser errors
      • Template Validation and Update
      • Template validation and update errors
    • Scheduled maintenances
Powered by GitBook
LogoLogo

Policies

  • Privacy & Cookies
  • Terms of Services
  • GDPR Compliance
  • Trust Center

Contact Us

  • Submit a request
  • Book a demo
  • Report a security issue
  • Beefree SDK Startup Program

Resources

  • Developer website
  • Create a Developer Account

© Bee Content Design, Inc. San Francisco, CA | Part of Growens

On this page

Was this helpful?

Export as PDF
  1. APIs
  2. Content Services API

Brand Style

This page lists and describes the Brand Style category of endpoints within the Content Services API. It also includes interactive testing environments for each endpoint in this category.

PreviousAI CollectionNextTemplate Catalog API

Last updated 22 days ago

Was this helpful?

Overview

The Brand Style endpoints enables you to manage and modify the style of email, pages, and popup templates. While the Content Defaults feature enables you to set default styles for new content elements like headings, paragraphs, and buttons, the Brand Style Management endpoint takes it a step further. It allows you to make template-wide design changes to existing templates quickly and easily, ensuring that all modules adhere to the broader design system or brand guidelines. In this article, we'll explore what this Content Services API (CSAPI) Brand Style Management endpoint is, its benefits, how to get started with it, and how it differs from Content Defaults.

How to Apply Styles Globally

To apply a style globally, take the following steps:

  1. Manage Brand Styles: Begin by defining your brand's styles within the schema. The Brand Style Management endpoint schema mirrors the . This enables you to easily reuse the styles you’ve already defined in your application’s frontend. Use the same schema to specify colors, fonts, and any other design elements you want to apply uniformly.

  2. Prepare the Template: Ensure you have the JSON template ready, which is the foundation for your branding modifications.

  3. API Call: Make an API call to the CSAPI Brand Style Management endpoint, providing the schema with your defined brand styles and the JSON template to be updated.

  4. API Processing: The API will take care of processing your request. It will automatically merge the specified brand styles into the template, applying the desired changes globally.

  5. Receive Modified Template: After the API processes your request, it will return the modified JSON template with the updated styles. This template is now ready to be used in your marketing campaigns with the consistent branding you've defined.

Endpoints

/template/brand or /row/brand

HTTP Method: POST

Description: Apply brand styles to a template or row, ensuring a consistent visual identity.

Request Parameters:

  • styles (JSON): The brand styles to apply to the template.

  • template (JSON): The JSON template to be updated with the brand styles.

  • HTML Return the template with or without HTML.

Example Request:

POST / template / brand
Content-Type: application / json
Authorization: Bearer YOUR_API_KEY 

{
    "styles": {
        "general": {
            "background": "#eeeeee",
            "links": "#0068a5"
        },
        "h1": {
            "styles": {
                "color": "#333333",
                "fontSize": "36px"
            }
        },
        "h2": {
            "styles": {
                "color": "#CCCCCC",
                "fontSize": 246 px "
            }
        },
        "paragraph": {
            "styles": {
                "color": "#333333",
                "fontSize": "16px"
            }
        },
        "button": {
            "styles": {
                "backgroundColor": "#ff9900",
                "borderRadius": "5px"
            }
        }
    },
    "template": {
        // Your template JSON here
    }
}

The following examples displays a button array.

{
  "styles": {
    "button": [
      {
        "className": "Primary",
        ...more styles
      },
      {
        "className": "Secondary",
        ...more styles     
      }
    ]
  }
}

Response Format:

  • 200 OK: The request was successful, and the modified template was returned.

  • 400 Bad Request: There was an issue with the request parameters.

  • 401 Unauthorized: The API key is invalid or missing.

  • 500 Internal Server Error: An unexpected server error occurred.

Example Response:

{
  "html": “html document”,
  "json": {
    // Updated template JSON here
  }
}

Request Format

This section discusses the request formats for the different parameters.

Styles

The styles parameter in the request should follow this JSON format:

{
  "general": {
    // General brand styles
  },
  "title": {
    // Title block styles
  },
  "text": {
    // Text block styles
  },
  "button": {
    // Button block styles
  },
  // Add more block styles as needed
}

Note: The mobileStyles and hoverStyles properties are not supported by the Brand Style Management API.

Template

The template parameter should contain your template's JSON structure. Ensure that the JSON structure aligns with the template you intend to update.

Table Content Defaults

The following code shows an example of how to configure the style for headers within the table content block:

{
  "headersBackgroundColor": "#EAEAEA",
  "headersColor": "#505659",
  "headersFontSize": "14px",
  "headersFontWeight": "400",
  "headersTextAlign": "left",
  "linkColor": "#0068a5"
}

Using the Brand Style Management Schema

For example:

"styles": {
  "general": {
    "background": "#eeeeee",
    "links": "#0068a5"
  }
}

The CSAPI Brand Style Management endpoint will take these styles and merge them with your design template, eliminating the need for complex manual editing.

Difference Between Content Defaults and the Brand Style Management Endpoint

While both Content Defaults and the Brand Style Management endpoint aim to streamline the design process, they serve different purposes:

Content Defaults

  • Set default styles for specific content types.

  • Useful for quickly creating new templates with consistent styling.

Brand Style Management Endpoint

  • CSAPI endpoint that enables the development of a user interface that empowers end users to make style changes with ease and speed.

  • Modify the style of existing templates.

  • Suitable for users who need to make template-wide design changes or maintain brand consistency on existing templates.

Understanding API Responses

The Brand Style API includes a 422 status code (unprocessable entity). This status code is returned when an API call is successful, but the brand style defined in the body of the API call does not apply to the template specified. For example, if the brand style defined in the body of the API call applies to buttons, and there are no buttons within the specified template, no styles will be applied. In this scenario, the final result of the API call is that no styles were applied to the template because there were none applicable. Be sure to handle this specific case when implementing the API.

The following section displays an example request. Note that the syntax for the CSAPI Brand Style Management endpoint is similar to the syntax for .

You can define multiple classes of buttons, images, and rows by passing an array of styles targeting design elements by their class names. To provide multiple styles, use the className property to define as many styles as you like. Before defining the className within the array, ensure you define the className within the template using the .

Each block style can include attributes such as colors, fonts, borders, and more, depending on your brand's requirements. For additional code samples of each content block type and its respective style customization options, reference the .

Both the (frontend) and Brand Style Management endpoint (backend) include the table content block.

The Brand Style Management endpoint schema is designed to be user-friendly and intuitive. You can use the same you used to style your application’s frontend with the Brand Style Management endpoint.

Can be a part of the .

Content Defaults
Custom Attribute feature
Content Defaults schema page
Content Defaults
Content Defaults schema
Configuration Parameter
Content Defaults’ JSON
  • Overview
  • How to Apply Styles Globally
  • Endpoints
  • POSTBrand Style Management
  • Request Format
  • Table Content Defaults
  • Using the Brand Style Management Schema
  • Difference Between Content Defaults and the Brand Style Management Endpoint
  • Understanding API Responses

Brand Style Management

post

Manage and modify the style of email, pages, and popup templates. Make template-wide design changes to existing templates quickly and easily, ensuring that all modules adhere to the broader design system or brand guidelines.

Authorizations
Body
Responses
200
Successful response
application/json
Responseobject
400
Bad request
401
Unauthorized
403
Forbidden
500
Internal Server Error
post
POST /v1/template/brand HTTP/1.1
Host: api.getbee.io
Authorization: Bearer Enter Dev Console API Key as Bearer token
Content-Type: application/json
Accept: */*
Content-Length: 6315

{
  "styles": {
    "button": {
      "className": "Primary",
      "styles": {
        "color": "#FBF9FF",
        "fontSize": "16px",
        "fontFamily": "Inter,sans-serif",
        "backgroundColor": "#7747ff",
        "borderBottom": "0px solid transparent",
        "borderLeft": "0px solid transparent",
        "borderRight": "0px solid transparent",
        "borderTop": "0px solid transparent",
        "borderRadius": "5px",
        "lineHeight": "120%",
        "maxWidth": "100%",
        "paddingBottom": "8px",
        "paddingLeft": "20px",
        "paddingRight": "20px",
        "paddingTop": "8px"
      },
      "blockOptions": {
        "paddingBottom": "20px",
        "paddingLeft": "20px",
        "paddingRight": "20px",
        "paddingTop": "20px",
        "align": "left",
        "hideContentOnMobile": true
      }
    }
  },
  "template": {
    "page": {
      "body": {
        "container": {
          "style": {
            "background-color": "#fff"
          }
        },
        "content": {
          "computedStyle": {
            "linkColor": "#8a3b8f",
            "messageBackgroundColor": "transparent",
            "messageWidth": "650px"
          },
          "style": {
            "color": "#000000",
            "font-family": "Lato, Tahoma, Verdana, Segoe, sans-serif"
          }
        },
        "type": "mailup-bee-page-properties",
        "webFonts": [
          {
            "fontFamily": "'Lato', Tahoma, Verdana, Segoe, sans-serif",
            "name": "Lato",
            "url": "https://fonts.googleapis.com/css?family=Lato"
          }
        ]
      },
      "description": "",
      "rows": [
        {
          "container": {
            "style": {
              "background-color": "transparent",
              "background-image": "none",
              "background-repeat": "no-repeat",
              "background-position": "top left"
            }
          },
          "content": {
            "style": {
              "background-color": "transparent",
              "color": "#000000",
              "width": "500px",
              "background-image": "none",
              "background-repeat": "no-repeat",
              "background-position": "top left",
              "border-top": "0px solid transparent",
              "border-right": "0px solid transparent",
              "border-bottom": "0px solid transparent",
              "border-left": "0px solid transparent",
              "border-radius": "0px"
            },
            "computedStyle": {
              "rowColStackOnMobile": true,
              "rowReverseColStackOnMobile": false,
              "verticalAlign": "top",
              "hideContentOnMobile": false,
              "hideContentOnDesktop": false
            }
          },
          "columns": [
            {
              "style": {
                "background-color": "transparent",
                "border-bottom": "0px solid transparent",
                "border-left": "0px solid transparent",
                "border-right": "0px solid transparent",
                "border-top": "0px solid transparent",
                "padding-bottom": "5px",
                "padding-left": "0px",
                "padding-right": "0px",
                "padding-top": "5px"
              },
              "modules": [
                {
                  "type": "mailup-bee-newsletter-modules-heading",
                  "descriptor": {
                    "heading": {
                      "title": "h1",
                      "text": "<span class=\"tinyMce-placeholder\">BUTTON</span>",
                      "style": {
                        "color": "#555555",
                        "font-size": "23px",
                        "font-family": "inherit",
                        "link-color": "#E01253",
                        "line-height": "120%",
                        "text-align": "left",
                        "direction": "ltr",
                        "font-weight": "700",
                        "letter-spacing": "0px"
                      }
                    },
                    "style": {
                      "width": "100%",
                      "text-align": "center",
                      "padding-top": "0px",
                      "padding-right": "0px",
                      "padding-bottom": "0px",
                      "padding-left": "0px"
                    },
                    "mobileStyle": {},
                    "computedStyle": {
                      "width": 52,
                      "height": 42
                    }
                  },
                  "uuid": "00a47280-8fa6-4519-b6c8-dcd5f28f35a2"
                }
              ],
              "grid-columns": 12,
              "uuid": "9b3de3ea-4f56-4e21-b7cc-848aea563dc0"
            }
          ],
          "type": "one-column-empty",
          "uuid": "dce46360-6ac7-4bee-bc24-f5688917b7b4"
        },
        {
          "container": {
            "style": {
              "background-color": "transparent",
              "background-image": "none",
              "background-repeat": "no-repeat",
              "background-position": "top left"
            }
          },
          "content": {
            "style": {
              "background-color": "transparent",
              "color": "#000000",
              "width": "500px",
              "background-image": "none",
              "background-repeat": "no-repeat",
              "background-position": "top left",
              "border-top": "0px solid transparent",
              "border-right": "0px solid transparent",
              "border-bottom": "0px solid transparent",
              "border-left": "0px solid transparent",
              "border-radius": "0px"
            },
            "computedStyle": {
              "rowColStackOnMobile": true,
              "rowReverseColStackOnMobile": false,
              "verticalAlign": "top",
              "hideContentOnMobile": false,
              "hideContentOnDesktop": false
            }
          },
          "columns": [
            {
              "style": {
                "background-color": "transparent",
                "border-bottom": "0px solid transparent",
                "border-left": "0px solid transparent",
                "border-right": "0px solid transparent",
                "border-top": "0px solid transparent",
                "padding-bottom": "5px",
                "padding-left": "0px",
                "padding-right": "0px",
                "padding-top": "5px"
              },
              "modules": [
                {
                  "type": "mailup-bee-newsletter-modules-button",
                  "descriptor": {
                    "button": {
                      "label": "<div class=\"txtTinyMce-wrapper\" style=\"font-family: inherit;\" data-mce-style=\"font-family: inherit;\"><p dir=\"ltr\" style=\"word-break: break-word;\" data-mce-style=\"word-break: break-word;\">Call to action button</p></div>",
                      "href": "",
                      "target": "_blank",
                      "style": {
                        "font-family": "'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace",
                        "font-size": "14px",
                        "font-weight": "400",
                        "background-color": "#3AAEE0",
                        "border-radius": "4px",
                        "border-top": "0px solid transparent",
                        "border-right": "0px solid transparent",
                        "border-bottom": "0px solid transparent",
                        "border-left": "0px solid transparent",
                        "color": "#ffffff",
                        "line-height": "200%",
                        "padding-top": "5px",
                        "padding-right": "20px",
                        "padding-bottom": "5px",
                        "padding-left": "20px",
                        "width": "auto",
                        "max-width": "100%",
                        "direction": "ltr"
                      }
                    },
                    "style": {
                      "text-align": "left",
                      "padding-top": "10px",
                      "padding-right": "10px",
                      "padding-bottom": "10px",
                      "padding-left": "10px"
                    },
                    "mobileStyle": {},
                    "computedStyle": {
                      "width": 216,
                      "height": 38,
                      "hideContentOnMobile": false
                    }
                  },
                  "customFields": {
                    "className": "Primary"
                  },
                  "uuid": "be31ba9a-b0b0-4ae7-b3ea-562ff74bb775"
                },
                {
                  "type": "mailup-bee-newsletter-modules-button",
                  "descriptor": {
                    "button": {
                      "label": "<div class=\"txtTinyMce-wrapper\" style=\"font-family: inherit;\" data-mce-style=\"font-family: inherit;\"><p dir=\"ltr\" style=\"word-break: break-word;\" data-mce-style=\"word-break: break-word;\">100% width button example</p></div>",
                      "href": "",
                      "target": "_blank",
                      "style": {
                        "font-family": "inherit",
                        "font-size": "14px",
                        "font-weight": "400",
                        "background-color": "#3AAEE0",
                        "border-radius": "4px",
                        "border-top": "0px solid transparent",
                        "border-right": "0px solid transparent",
                        "border-bottom": "0px solid transparent",
                        "border-left": "0px solid transparent",
                        "color": "#ffffff",
                        "line-height": "200%",
                        "padding-top": "5px",
                        "padding-right": "20px",
                        "padding-bottom": "5px",
                        "padding-left": "20px",
                        "width": "100%",
                        "max-width": "100%",
                        "direction": "ltr"
                      }
                    },
                    "style": {
                      "text-align": "center",
                      "padding-top": "10px",
                      "padding-right": "10px",
                      "padding-bottom": "10px",
                      "padding-left": "10px"
                    },
                    "mobileStyle": {},
                    "computedStyle": {
                      "width": 630,
                      "height": 38,
                      "hideContentOnMobile": false
                    },
                    "customAttributes": [
                      {
                        "key": "class",
                        "name": "class",
                        "value": "Primary",
                        "target": "tag"
                      }
                    ]
                  },
                  "customFields": {
                    "className": "Primary"
                  },
                  "uuid": "220b02a8-1cb9-429a-88c6-c2b7028a9f31"
                }
              ],
              "grid-columns": 12,
              "uuid": "3967ef9b-ed2b-4e9e-8fe4-2367736e32cc"
            }
          ],
          "type": "one-column-empty",
          "uuid": "ce0b0367-bb90-4eaa-92e2-095d5a9170dc"
        }
      ],
      "template": {
        "name": "template-base",
        "type": "basic",
        "version": "2.0.0"
      },
      "title": ""
    },
    "comments": {}
  }
}
{
  "message": "Success"
}