Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.toebox.ai/docs/llms.txt

Use this file to discover all available pages before exploring further.

ToeBox gives you full control over how your chatbot widget looks and behaves on your storefront.

​
Theme colors

Every chatbot has configurable color settings:
SettingDescriptionDefault
Primary colorChat bubble, header, send button#303030
Background colorChat window background#FFFFFF
Text colorMessage text#1A1A1A
User message colorBackground of customer messagesDerived from primary
Bot message colorBackground of agent responses#F3F4F6
Enter colors as hex codes (e.g., #FF6B35) or use the color picker in the chatbot builder.

​
Chat bubble styles

The chat bubble is the floating button customers click to open the widget. Choose from three styles:
A circular button with rounded corners. This is the default and works well with most themes.

​
Position

Place the widget in either corner of the page:
  • Bottom-right (default) — The most common position for chat widgets
  • Bottom-left — Use this if you have other widgets or elements in the bottom-right corner

​
Widget title and branding

  • Title — The name displayed in the chat window header (e.g., “Support”, “Shopping Assistant”)
  • Subtitle — Optional text below the title (e.g., “We typically reply in minutes”)
  • Avatar — An image shown alongside the agent’s messages

​
Welcome message

The welcome message appears when a customer opens the chat for the first time. Keep it:
  • Friendly and concise
  • Clear about what the agent can help with
  • Relevant to your store’s offerings

​
Suggested prompts

Suggested prompts appear as clickable chips below the welcome message. They reduce friction by showing customers exactly what they can ask. You can add up to 4 suggested prompts. Good prompts are:
  • Action-oriented (“Find me a gift under $50”)
  • Specific to your store (“Show me your bestsellers”)
  • Common questions (“What’s your shipping policy?”)

​
Mobile responsiveness

The ToeBox widget is fully responsive. On mobile devices:
  • The chat window expands to fill the screen
  • The bubble adjusts to a comfortable tap target size
  • Scroll behavior is optimized for touch interactions
No additional configuration is needed for mobile.

​
Custom CSS

For advanced customization beyond the built-in options, you can apply custom CSS to override widget styles. This is useful for:
  • Matching specific font families
  • Adjusting widget dimensions
  • Adding transitions or animations
  • Overriding spacing and padding
Custom CSS is an advanced feature. Test thoroughly across devices and browsers after applying custom styles.