Customize the chat interface
Apply accessible brand styling, customer-facing text, and page-specific entry-point rules, then validate live behavior.
Chat interface controls the visual and textual presentation inside the customer experience, while Entry point controls how shoppers discover it on different pages and devices. Both areas provide previews, but final validation must happen on the real storefront.
This guide covers the current avatar, color, shape, optional text, cart, icon, entry-point, and page-rule controls without assuming that every company or integration exposes identical options.
How this fits into Humind
AI Agent is the configuration space for the customer-facing assistant. Knowledge and Catalog provide facts; Guidance shapes response behavior; Tools add actions; Escalation defines human support; Test surfaces let you review the result before deployment.
Changes can affect many conversations, so test representative buying and support scenarios after each meaningful update. A visually correct chat is not enough: verify the answer, product context, available action, and handoff behavior together.
Before you start
Access: Agent configuration write access is required. Some advanced settings are restricted to Humind administrators, and Shopify-specific controls appear only for connected Shopify companies.
- Prepare approved logo or avatar assets and brand colors.
- Check color contrast and mobile storefront constraints before choosing values.
- List page types where the launcher should be visible, hidden, or customized.
Step-by-step workflow
Set the visual foundation
Open AI Agent, then Chat interface. Choose an avatar from the gallery or upload the intended asset. Set interface and text colors, bubble roundness, add-to-cart background and text colors, and button roundness.
Use the preview while editing and verify readable contrast in every colored component. Settings on this page save live, so wait for the save feedback and avoid rapid contradictory changes.
Review advanced presentation options
The current interface can optionally use a custom Agent name, home title, and home greeting. It can show or hide the sparkle icon, gift-finder image, preset questions, and add-to-cart button. Shopify companies can choose whether the cart action goes to cart or checkout through the available destination control.
An empty custom home value can intentionally hide that line. Record this decision so a blank result is not later mistaken for lost content.
Configure the default entry point
Open AI widgets, then Entry point. Enable the default launcher and choose its type, position, label, avatar visibility, bubble size, logo treatment, and horizontal or vertical offsets where available. Switch between desktop and mobile to review both configurations.
Keep the launcher discoverable without covering store navigation, consent controls, product purchase actions, or accessibility widgets.
Add page-specific rules only when needed
Page rules can target supported page types and set mobile or desktop visibility to hidden, inherited, or custom. Custom rules can change launcher presentation for the selected page context. Product-page rules can also expose the current automatic product-question option.
Avoid overlapping rules. Use the preview context tabs to compare default and page-specific outcomes, and delete obsolete rules instead of layering exceptions indefinitely.
Validate accessibility and live layout
Test keyboard access, text contrast, opening and closing, long translated text, narrow screens, product pages, and cart behavior in preview. Then deploy and repeat the checks on the real storefront in a private browser.
If the live result differs, investigate installation, stale storefront assets, company context, and page-rule matching before changing the design again.
Permissions and important caveats
- Preview does not include every storefront theme, overlay, or responsive interaction.
- Advanced and Shopify-specific options are conditional; document only controls visible for the active company.
- Live-saving settings can affect tests immediately after persistence.
- Page rules should remain mutually understandable across desktop and mobile.
Verify the result
Use this checklist before considering the work complete:
- Avatar, text, interface, and cart colors meet the team's contrast standard.
- Default and page-specific entry-point previews match the documented rule set.
- Long labels, translations, keyboard focus, and mobile layouts remain usable.
- The live storefront shows one correct launcher without covering critical controls.
Troubleshooting
A visual change does not appear
Wait for the page's save feedback, confirm the active company, refresh preview, and test a fresh storefront session. Check whether a page-specific rule overrides the default.
The launcher appears in the wrong place
Review device selection, position, offsets, and the matching page rule. Confirm another duplicate widget installation is not creating the unexpected instance.
Text or buttons are hard to read
Revisit both background and text colors for interface and cart controls. Test actual labels and translated text at desktop and mobile sizes before publishing the corrected design.