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.
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.
To apply a style globally, take the following steps:
Manage Brand Styles: Begin by defining your brand's styles within the schema. The Brand Style Management endpoint schema mirrors the Content Defaults’ JSON. 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.
Prepare the Template: Ensure you have the JSON template ready, which is the foundation for your branding modifications.
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.
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.
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.
/template/brand or /row/brand
HTTP Method: POST
Description: Apply brand styles to a template or row, ensuring a consistent visual identity.
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.
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"
}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.
The following section displays an example request. Note that the syntax for the CSAPI Brand Style Management endpoint is similar to the syntax for Content Defaults.
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
}
}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 Custom Attribute feature.
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
}
}This section discusses the request formats for the different parameters.
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
}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 Content Defaults schema page.
Note: The mobileStyles and hoverStyles properties are not supported by the Brand Style Management API.
The template parameter should contain your template's JSON structure. Ensure that the JSON structure aligns with the template you intend to update.
Both the Content Defaults (frontend) and Brand Style Management endpoint (backend) include the table content block.
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"
}The Brand Style Management endpoint schema is designed to be user-friendly and intuitive. You can use the same Content Defaults schema you used to style your application’s frontend with the Brand Style Management endpoint.
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.
While both Content Defaults and the Brand Style Management endpoint aim to streamline the design process, they serve different purposes:
Can be a part of the Configuration Parameter.
Set default styles for specific content types.
Useful for quickly creating new templates with consistent styling.
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.
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.