Work with themes
The Agent REST API contains theme-based endpoints that allow you to perform various functions.
For detailed information on these endpoints, refer to the Agent REST API documentation.
Get all themes
Stores can use many themes; however, the agent console can only use a single theme. You can review all of the themes available and make modifications as necessary. To see all themes, use the Themes API:
Issue a GET
command to get all themes, including the agent
theme:
/ccadmin/v1/themes?includeagenttheme=true
Note: If the includeagenttheme
query parameter is set to false
or omitted, the endpoint will not return the agent theme.
Get the active agent theme
An active theme is a theme that is currently in use. You can issue a
GET
command to get the active agent theme:
/ccadmin/v1/themes/agentThemeDetails
The response may be something similar to this:
{
"isAgentTheme": true,
"thumbnail": "",
"theme_additional_fonts": {},
"notes": "This is the Agent Theme.",
"is_active": false,
"theme_styles_color": {
"@ButtonPrimarySize": "medium",
"@ButtonSecondaryTextDecoration": "none",
"@ButtonPrimaryTextColor": "#ffffff",
"@SubNavigationTextColor": "#6F7178",
"@ButtonPrimaryUseGradient": "false",
"@ButtonPrimaryFontStyle": "normal",
"@ButtonSecondaryFontFamily": "@sansFontFamily",
"@ButtonPrimaryFontWeight": "normal",
"@NavbarLinkColor": "#3D3D3D",
"@NavbarLinkHoverColor": "#195D8D",
"@NavbarTextColor": "#333333",
"@mobileNavBarButtonColor": "#333333",
"@SubNavigationLinkHoverColor": "#195D8D",
"@NavbarBackgroundHoverColor": "#FFFFFF",
"@SitePageBorderColor": "#CCD7DF",
"@ButtonSecondaryUseGradient": "false",
"@LinkVisitedColor": "#195d8d",
"@LinkColor": "#195d8d",
"@ButtonPrimaryBackgroundColor": "#0572ce",
"@NavbarBackgroundColor": "#FFFFFF",
"@SubNavigationLinkColor": "#3D3D3D",
"@ButtonPrimaryFontFamily": "@sansFontFamily",
"@ButtonPrimaryTextDecoration": "none",
"@ButtonSecondaryBorderRadius": "4px",
"@ButtonSecondaryFontStyle": "normal",
"@ButtonSecondaryTextColor": "#3d3d3d",
"@SubNavigationBackgroundColor": "#FFFFFF",
"@ButtonSecondaryFontWeight": "normal",
"@ButtonSecondaryBackgroundColor": "#ffffff",
"@ButtonPrimaryBorderRadius": "4px",
"@LinkHoverColor": "#114062",
"@ButtonSecondarySize": "medium",
"@SubNavigationBackgroundHoverColor": "#FFFFFF",
"@TextColor": "#000000"
},
"usingCodeView": false,
"is_default": false,
"associatedSites": [],
"theme_styles_typography": {
"@H6LineHeight": "150%",
"@H5TextDecoration": "inherit",
"@H3FontFamily": "inherit",
"@H5FontStyle": "inherit",
"@H2FontStyle": "inherit",
"@H2TextColor": "inherit",
"@SiteLineHeight": "150%",
"@SiteFontFamily": "@sansFontFamily",
"@H1TextAlign": "inherit",
"@ParagraphFontWeight": "normal",
"@H5FontSize": "1.00rem",
"@H4TextAlign": "inherit",
"@H1TextDecoration": "inherit",
"@H3LineHeight": "150%",
"@H2FontWeight": "bold",
"@H3FontSize": "1.75rem",
"@ParagraphLineHeight": "150%",
"@H3TextColor": "inherit",
"@H3TextAlign": "inherit",
"@H4FontFamily": "inherit",
"@SiteFontSize": "14px",
"@SiteTextAlign": "left",
"@H5FontWeight": "normal",
"@H6FontFamily": "inherit",
"@H1FontSize": "2.75rem",
"@H6FontStyle": "inherit",
"@H6TextDecoration": "inherit",
"@H2TextDecoration": "inherit",
"@ParagraphTextColor": "inherit",
"@H1FontStyle": "inherit",
"@ParagraphTextAlign": "inherit",
"@H4LineHeight": "150%",
"@H1FontWeight": "bold",
"@SiteTextColor": "#000000",
"@ParagraphFontSize": "1.00rem",
"@H5FontFamily": "inherit",
"@H4FontWeight": "bold",
"@ParagraphFontFamily": "inherit",
"@H1FontFamily": "inherit",
"@H2TextAlign": "inherit",
"@H1LineHeight": "150%",
"@H6FontSize": "0.85rem",
"@H3TextDecoration": "inherit",
"@H4TextColor": "inherit",
"@ParagraphFontStyle": "inherit",
"@ParagraphTextDecoration": "inherit",
"@H1TextColor": "inherit",
"@SiteTextDecoration": "none",
"@H4FontSize": "1.25rem",
"@SiteFontStyle": "normal",
"@H3FontWeight": "bold",
"@H6TextAlign": "inherit",
"@H4TextDecoration": "inherit",
"@H2FontFamily": "inherit",
"@H3FontStyle": "inherit",
"@SiteFontWeight": "normal",
"@H5LineHeight": "150%",
"@H2FontSize": "2.25rem",
"@H6TextColor": "inherit",
"@H4FontStyle": "inherit",
"@H2LineHeight": "150%",
"@H5TextColor": "inherit",
"@H5TextAlign": "inherit",
"@H6FontWeight": "normal"
}
Clone a theme
To create a new theme, clone an existing theme.
- Issue a
POST
command to:/ccadmin/v1/themes/<name of theme to clone>/clone {name: <name of new theme>}
For example:
POST /ccadmin/v1/themes/PrimarySiteTheme/clone {name:"SecondarySiteTheme"}
- Make the modifications to the theme as necessary.
- To set the theme as the active agent theme, issue a
POST
command to:/ccadmin/v1/themes/{id}/setAsAgentTheme
For example:
POST /ccadmin/v1/themes/SecondarySiteTheme/setAsAgentTheme
Important: Once you have cloned a theme, you must use the setAsAgentTheme
endpoint to indicate which theme is the assigned theme. This ensures that you do not have multiple agent themes.
Compile a theme
Once you have created a new agent theme and identified it as such, you compile it.
Issue a POST
command to:
/ccadmin/v1/themes/compileAgentTheme
For example:
POST /ccadmin/v1/themes/compileAgentTheme
Update theme details
To update the agent theme’s detail, such as the theme name, notes or details about the theme, do the following:
- Issue a
GET
command to:/ccadmin/v1/themes/agentThemeDetails
- This returns the theme’s details. Update the theme elements as necessary.
- Once you have finished making edits, issue a
PUT
command, with the updated JSON values, to:/ccadmin/v1/themes/agentThemeDetails
For example:
POST /ccadmin/v1/themes/agentThemeDetails {"assetType", "pageLayout", "assetId", "404PageLayout"}
Update the theme source
- Issue
GET
command to:/ccadmin/v1/themes/agentThemeSource
- Make the modifications as necessary.
- To reload the theme, issue a
PUT
command with the updated JSON values to:/ccadmin/v1/themes/agentThemeSource