This section walks you through the different customization options available for your AI Chatbot. You can personalize the appearance, chat window design, and messaging experience to match your brand. If you are ready, you can directly visit the Customize AI Chat section of our admin app to start the customization for your app!
Select a Chat Icon – Pick from the available icons.
Upload Your Own Icon – Use a custom image for your brand.
Primary Color – Main theme color. This is also used as a highlighted text color in the chat. If you use a light mode on your website, please select a non-white color as your theme color -- this is to make sure the highlighted text is still readable with the light background. If you use a dark mode on your website, please select a non-black color as your theme color.
Secondary Color – Accent color for highlights.
Icon’s Line Color – Outline color of the chat icon.
Floating Icon Size for desktop and mobile.
📍Chat Icon Positioning on desktop and on mobile.
Z-index of Chat Icon: Use a higher value if you want the icon to stay in front of other UI elements.
Color Theme (dark mode or light mode) of the chat window.
Width of the chat window on Desktop.
Choose your own branding image and background image for the chat window, or simply let Shoply AI generate those images for you.
Adjust the transparency and aspect ratios of the background image for the chat window.
Whether to hide Shoply AI’s Logo in Input Bar (only available for paid plans).
You can set or edit default messages that guide customers when they first interact with your chatbot.
Welcome Message (shows above chat icon if not empty). Example: Ask me anything about your snow sports needs 👋.
Input Placeholder Message. Example: Ask me anything 🤗.
First Message in Chat Window (Markdown supported)
