# Embed & Widgets: a support Widget that looks like part of your product · Communicate > One snippet mounts your Agent in an isolated Shadow-DOM Widget that never fights your CSS, matched to your brand, with the same Agent live on Web Widget, Live Chat, and Email. Start with 100 credits. - **URL:** https://communicate.so/embed-widgets --- # Match your support experience to the product around it. Website chat that belongs on your site Choose the appearance, preview the customer view, and add one install snippet when it feels right. [Start with 100 credits](https://app.communicate.so)One-time $1 activation · 100 credits included · No automatic subscription A website chat preview updates and confirms the saved appearance.Communicate Website chat preview Editing Appearance Match your website Position Bottom right Support Usually replies now Hi. What can I help with? How do I add a teammate? Ask a question… How it works ## Design the customer view before you install it. Appearance, behavior, and deployment stay in one workflow so the saved configuration matches what visitors see. - 1 01 · Match ### Choose the look that fits your site Set the color and placement while the live preview updates beside the controls. Appearance Editing Color Brand green Position Bottom right Preview Updated live - 2 02 · Preview ### Read the chat at customer scale Check the header, messages, prompts, and composer in the same proportions visitors will use. Customer view Ready Opening message Visible Suggested prompts Readable Composer Available - 3 03 · Install ### Add one production snippet Copy the saved install code into your site and keep later appearance changes inside Communicate. Install Production Snippet Copied Placement Saved Agent Connected Appearance Editing Color Brand green Position Bottom right Preview Updated live Customer view Ready Opening message Visible Suggested prompts Readable Composer Available Install Production Snippet Copied Placement Saved Agent Connected The support feels like your product. The setup stays inside Communicate.The support feels like your product. The setup stays inside Communicate. What changes ## A support surface that feels native to your website. Customers should notice the help, not the vendor that rendered it. 01 ### The appearance matches your brand Color, placement, and customer-facing copy are previewed together before you save. 02 ### The install stays small One snippet loads the Widget while later content and behavior changes remain in your workspace. 03 ### Page styles stay separated The Widget surface is isolated so its controls do not inherit accidental styles from the host page. A website chat preview updates and confirms the saved appearance.Communicate Website chat preview Editing Appearance Match your website Position Bottom right Support Usually replies now Hi. What can I help with? How do I add a teammate? Ask a question… Designed for the edge cases ## Preview the details that make an embed feel trustworthy. The customer experience is easier to ship when the exact surface stays visible during setup. ### Live appearance preview Color and placement changes update the customer view beside the controls. You stop dealing with: saving blindly and refreshing a staging site after every adjustment. ### Opening state and prompts Review the first message, suggested questions, and composer before the Widget reaches visitors. You stop dealing with: discovering cramped or unclear copy only after launch. ### Shared Agent configuration The Widget uses the same Agent, knowledge, rules, and handoff model as the rest of Communicate. You stop dealing with: maintaining a second bot just for the website. ### Single install snippet Install once, then manage saved appearance and behavior from the workspace. You stop dealing with: asking engineering to redeploy for every support copy change. What you save is what customers see ## Keep the customer view beside the configuration. Small visual decisions become safer when the preview is immediate and readable. Appearance ### Color changes reflect in the chat The header and visitor message update with the selected theme. Content ### Opening copy stays visible Review the first interaction before the customer opens it. Install ### Saved settings match deployment The production snippet uses the configuration already approved in the preview. Choose how support enters the page ## A configurable Widget instead of a separate mini website. Compare the work required to keep the embedded experience consistent. ### Brand preview CommunicateLive beside controls Hosted chat pageVendor template Custom embedYou build it ### Site integration CommunicateOne snippet Hosted chat pageCustomer leaves site Custom embedCustom code ### Style isolation CommunicateEmbedded surface Hosted chat pageSeparate page Custom embedYou maintain CSS ### Agent and Inbox CommunicateShared system Hosted chat pageVendor dependent Custom embedYou build it Decision Communicate Hosted chat page Custom embed Brand preview Live beside controls Vendor template You build it Site integration One snippet Customer leaves site Custom code Style isolation Embedded surface Separate page You maintain CSS Agent and Inbox Shared system Vendor dependent You build it [Start with 100 credits](https://app.communicate.so) Questions before you start ## Questions before adding the Widget. What your team controls and what visitors see. ### Can I preview the selected color? ### Will the Widget inherit my website CSS? ### Do appearance changes require a new snippet? ### Can a visitor reach a person? ## Make website chat feel like part of your product. Choose the appearance, read the customer view, and install only when the experience feels right. [Start with 100 credits](https://app.communicate.so)One-time $1 activation · Grounded answers · Human takeover · Cancel anytime