JAVASCRIPT SDK
Style the widget
Use configuration for common changes and CSS hooks for the details that make the widget yours.
Choose the right surface
Panel styles run inside the widget iframe. Launcher styles run inside its shadow root. Styles do not become part of your application’s stylesheet. Use !important when overriding a more specific built-in declaration or a body variable.
JavaScript
await TruComWidget.configure({ color: '#245b46', fontFamily: 'system' });
await TruComWidget.setCustomCss(`
[data-tc-part="greeting"] { padding-top: 32px !important; }
body[data-widget-mobile="true"] [data-tc-part="header"] {
padding-top: 24px !important;
}
`);
await TruComWidget.setLauncherCss(`
[data-tc-part="launcher"] { border: 2px solid white; }
`);Stable hooks
| Option | Behavior |
|---|---|
| Panel | [data-tc-part="panel"], header, greeting, navigation, composer, help and service-status use the same data-tc-part selector pattern. |
| Messages | .tc-widget-message[data-sender="visitor"] and .tc-widget-message__content > p. |
| Panel variables | --tc-widget-primary, --tc-widget-radius, --tc-widget-font, --tc-widget-agent-bubble, --tc-widget-agent-text, --tc-widget-customer-bubble, --tc-widget-customer-text. |
| Launcher | [data-tc-part="launcher"], [data-tc-part="launcher-label"], [data-tc-part="invitation"]. |
CSS limits
Each stylesheet is limited to 20,000 characters. Imports, resource URLs and executable legacy CSS are rejected. Use logoUrl for an HTTPS logo. Keep focus indicators and readable contrast; essential support actions should stay reachable. Other internal selectors can change between versions.