Skip to main content
Workspace branding lets you apply your organization’s colors to every widget embedded on your site. You set branding once in the Tallysight dashboard and it propagates automatically to all widgets that reference your workspace slug — no per-widget style configuration required.

​
How branding is applied

When a widget loads, it reads the workspace config value and fetches your workspace’s branding from the Tallysight API. The API response contains your light and dark color palettes, which the widget applies via CSS variables inside its Shadow DOM. You pass your workspace slug to widgets using the data-tallysight-widget-config-workspace attribute on the widget element. Or, use data-tallysight-defaults-widget-config-workspace on the script tag to set it for every widget on the page at once.

​
Branding properties

Each workspace defines 24 color properties — 12 for light mode and 12 for dark mode. The properties are grouped into three categories: Border colors Background colors Text colors Each property exists for both light and dark themes.

​
Setting your workspace slug

The recommended way to apply your workspace to all widgets on a page is to set data-tallysight-defaults-widget-config-workspace on the script tag:
Setting data-tallysight-defaults-widget-config-workspace on the script tag applies your workspace to every widget on the page in one place. You don’t need to add the attribute to each individual widget element.

​
Brand precedence

If you need a single widget to use a different workspace, set data-tallysight-widget-config-workspace directly on that widget element. A per-widget value always takes precedence over the script-level default.