Overview
Color settings should align with your brand while maintaining sufficient contrast for the launcher and controls.
This article is written as a practical reference for customize widget colors. Follow the steps in order the first time, then use the headings and screenshots as landmarks when you return later. The screenshots reflect the current Open Accessible Cloud layout shown in September 2026, so labels may move slightly as the dashboard evolves.
Where to look in the dashboard
Use the interface landmarks below to get to the right place before making changes. The screenshots are included as guidance so you can match the documentation to what you see in the dashboard.
Before you begin
Confirm that you are signed in to the correct account and, when applicable, that the organization selector in the upper-right corner shows the organization you intend to manage. If you work with multiple websites, verify the domain before changing settings.
For changes that can affect a live site, take note of the current configuration first. A screenshot, copied setting value, or short change note makes rollback much easier. Avoid changing unrelated options at the same time; smaller changes are easier to verify and troubleshoot.
Keep branding accessible while customizing
Branding should make the widget feel native to your website without making it harder to find or use. Preserve strong color contrast, visible focus states, recognizable icons, and a launcher position that does not cover important site controls.
After every branding change, test the launcher at desktop and mobile widths. Also test at higher browser zoom levels because a position that looks comfortable at 100% can overlap navigation, cookie controls, chat buttons, or form actions when the viewport becomes smaller.
Step-by-step workflow
- Open Websites and choose Branding for the intended domain. Do not rely on memory if your organization manages multiple similarly named sites.
- Change one visual area at a time. Start with color, then launcher position, then any logo or label customization.
- Preview against real site content. Check light and dark sections, sticky headers, cookie banners, and chat or support launchers.
- Test keyboard and zoom behavior. Confirm the launcher has a visible focus state and remains reachable at 200% zoom.
- Check mobile. Make sure the launcher does not cover navigation, checkout controls, or other fixed buttons.
Important details
When choosing colors, check text, icons, focus outlines, selected states, and hover states—not just the launcher background. A color pair that looks distinct on a large button may become difficult to distinguish on small text or thin borders.
Use the host website as the test surface. The launcher may sit over photographs, video, gradients, or varying page sections, so verify that its boundary remains visible in each context.
How to verify the result
Do not stop at the saved confirmation. Reload the relevant page and confirm the visible state matches what you intended. If the change affects authentication, open a fresh browser session. If it affects a website, test the public page as a visitor rather than only the dashboard.
For user-facing changes, check with keyboard input, browser zoom, and a narrow mobile viewport. Watch for overlapping fixed controls, clipped dialogs, focus that disappears off-screen, or settings that reset unexpectedly after navigation.
Troubleshooting
If the dashboard does not match these screenshots, first confirm you are in the correct organization and account. UI labels can also change over time, so look for the same concepts—Websites, API Keys, Secrets, organization settings, or Profile & 2FA—even if the exact placement has moved.
For website problems, check the browser developer console and network panel. Look for blocked scripts, 404 responses, Content Security Policy errors, or requests being stopped by a consent manager or extension. For account problems, try a private window and verify that the email address and organization membership are correct before resetting credentials.
Recommended practices
Use descriptive names for websites, keys, tokens, secrets, and team roles. Clear names reduce the chance of editing the wrong resource and make audits easier months later. Avoid putting sensitive values into screenshots, tickets, documentation, or public source repositories.
Review access periodically. Remove old sessions, unused credentials, and team members who no longer need access. For production integrations, document where each credential is used and who is responsible for rotating it.
Next steps
After completing customize widget colors, return to the documentation home page and use search to find the next related workflow. Search accepts normal phrases, so queries such as “website branding,” “2FA,” “API token,” or “installation” will surface related guides.
If you are troubleshooting, keep the page URL, browser name, approximate time, and a concise set of reproduction steps. Those details make it much easier to distinguish an account configuration issue from a website integration issue.