EcomBot Docs

Style & Multi-Channels

Customize the widget's appearance, automatically generate color themes, and choose the best layout for your store.

The Style & Customization tab in your dashboard allows you to perfectly adapt EcomBot to your brand's visual identity, providing a premium shopping experience that drives sales conversion and customer satisfaction.

Visual Customization & Color Themes

Your ecommerce chatbot should look like a native extension of your online store. EcomBot features a smart, automated layout and theme generator:

  1. Automatic Secondary Color Generation: Simply select your brand's primary color. Our engine instantly calculates a matching secondary color using a 28-degree HSL hue-shift algorithm. This mathematical formula ensures perfect chromatic harmony and contrast ratio compliance for accessibility.
  2. Premium Curated Palettes: If you want instant professional design results, choose from our curated selection of premium color palettes crafted by design experts to match modern e-commerce niches (luxury, tech, cosmetics, apparel).
  3. Advanced CSS Editor: For brands requiring absolute control, an "Advanced CSS" collapsible panel is available. It allows you to manually override EcomBot's CSS variables (such as custom button shadows --chat-fab-shadow, custom border-radius, or hover transitions) for a pixel-perfect implementation.

Smart Funnel-Adaptive Widget

EcomBot eliminates rigid display configurations. Thanks to our Funnel-Adaptive design, the widget dynamically and autonomously shifts its layout based on the visitor's position in the sales funnel:

1. Default Resting Mode

Depending on your synced product catalog size, EcomBot automatically serves the optimal entry layout on your landing and discovery pages (Home, Categories, etc.):

  • Large Catalog Stores (50+ products): The Search-First / Shopping Assistant (centered) mode is active by default. It displays as a premium, centered Semantic Search Pill at the bottom of the screen with a beautiful backdrop-blur background to maximize product queries. Clicking the "X" close icon smoothly reduces the pill to a persistent floating button (FAB) in the corner using sessionStorage to keep the screen clear.
  • Niche Stores (less than 50 products): The Support-First / Sales Assistant (floating button) mode is selected immediately to prioritize personalized engagement, lead qualification, and close assistance.

2. Checkout Reassurance Mode (Cart Anti-Abandonment)

Our signature Conversion Rate Optimization (CRO) feature. The moment a customer prepares to purchase (navigates to /cart, /checkout, /commander pages, or when the WooCommerce plugin signals the checkout journey milestone):

  • Instant, Seamless Collapse: The widget instantly transitions into a compact, discrete floating button in the bottom corner of the screen.
  • Zero Visual Blockage: The dimming dark background backdrop is completely disabled.
  • Benefit: Payment forms and order checkout fields remain 100% visible and accessible, eliminating any checkout friction, while keeping the virtual assistant and human customer support exactly one click away for crucial reassurance.

3. Decoupled Margins by Display Mode

To ensure flawless visual integration across all devices and themes, EcomBot allows merchants to define completely independent bottom margins for the two primary layouts:

  • Floating Mode (FAB): You can adjust the bottom-right corner offsets manually to perfectly clear floating third-party buttons (e.g., custom WhatsApp shortcuts, "Back to Top" anchors, or sticky add-to-cart buttons).
  • Centered Mode (Search Pill): Center-aligned search pills are managed with their own dedicated offsets. This prevents high custom floating button offsets (e.g., setting a 80px bottom margin for your WhatsApp bubble) from pushing the centered search pill out of position or making it look awkward and asymmetric.
  • Smart Fallbacks & Mobile Auto-Fitting: EcomBot automatically applies independent, responsive defaults (16px bottom margin on mobile / 20px on desktop for the centered pill layout). Additionally, the widget features an auto-fitting formula that dynamically subtracts safety margins and host paddings, ensuring the closed pill layout is never clipped, even on narrow mobile devices (320px to 360px wide).
  • Proactive Visual Deduplication: In centered mode, if a static or AI proactive greeting matches the text already displayed in the closed search pill, the widget automatically hides the redundant upper proactive bubble to keep a clean, uncluttered viewport. Clicking the pill directly seeds and starts the proactive greeting in the chat history.

Advanced UX & Real-Time Performance

We engineered EcomBot with advanced viewport intelligence and smart database routing to ensure the best possible mobile shopping experience without hurting your site's performance or battery life.

1. Smart Mobile Obstacle Avoidance

In modern e-commerce layouts, mobile screens are frequently cluttered with sticky elements (floating category filters, loyalty widgets, YITH buttons, FacetWP panels). EcomBot actively prevents frustrating visual overlaps:

  • Real-Time Viewport Scan: When a customer browses a shop catalogue or category page on mobile, EcomBot automatically scans the viewport DOM for floating overlays.
  • Dynamic Repositioning: If a mobile floating obstacle is detected in the widget's vicinity, EcomBot instantly shifts itself upward by the exact height of the obstacle plus a 12px safety margin.
  • Engineered for Battery & Smooth Scrolling: To maintain pristine 60fps scrolling and conserve device battery, this heavy viewport scanning is strictly constrained to catalog and category pages where mobile filter bars typically appear, keeping standard pages completely lightweight.

2. Smart Catalog Search Bypass (Anti-Spam & Lightning Load)

To deliver the fastest widget load time on catalog and collection pages, EcomBot employs a smart database lookup bypass:

  • Preventing False-Positives: On generic shop and category catalog pages, EcomBot skips product-specific database lookups. This completely eliminates false-positive proactive bubbles (such as asking the shopper for help on a completely unrelated product that matched via generic text search tags or database queries).
  • Lightning-Fast Page Load: By bypassing unnecessary product-specific lookups on catalog pages, the widget initializes up to 40% faster, ensuring your shoppers enjoy a frictionless experience from the very first second.

EcomBot is not just a chat window. It's a comprehensive Contact Hub and multi-channel assistant. The "Channels" tab allows you to configure the Widget's opening behavior:

  1. AI Chatbot: The default channel that opens the RAG chat interface.
  2. Contact Forms (GDPR): If the customer has a complex request requiring human triage, you can add a native form. These forms natively include consent management (required checkbox) to be 100% GDPR compliant.
  3. Quick Links & Groups: You can route your visitors to an external FAQ, an order tracking page, or group channels under the same folder (e.g., "Contact Us" containing Email and Phone).

These channels are conditionally instantiated in the DOM (React) to keep the Widget ultra-lightweight and ensure it does not impact your Google PageSpeed score.

Building your contact hub is easier than ever. EcomBot includes an Interactive Builder & Presets interface located directly under /admin/style. Merchants can configure, sort, and enable direct social and support shortcuts with a simple one-click assistant.

2. Autogenerated & Self-Hosted Social Icons

To guarantee pristine visual branding and maximize customer engagement:

  • Prism-Quality Vector Icons: EcomBot self-hosts hand-optimized, lightweight SVG icons for major networks (WhatsApp, Instagram, Facebook, TikTok, Messenger, YouTube).
  • Zero Performance Cost: Unlike typical widgets that load bulky external icon fonts (like FontAwesome or Google Material icons) which degrade your mobile performance scores, our self-hosted SVGs render instantly with zero network overhead.

To eliminate broken links and bad redirections, EcomBot acts as an automated QA engineer when saving your channels:

  • WhatsApp: Automatically cleans whitespaces, parentheses, and transforms local phone formats (like French 10-digit numbers beginning with 0) into standard, globally-compatible wa.me/33... direct-chat links.
  • Instagram: Strips out leading @ symbols automatically from usernames to generate clean, direct profile URLs.
  • General Links: Intelligently detects missing protocols and automatically prefixes https:// if absent, ensuring your shoppers never get stuck on a broken page.

4. Smart Handoff to Your Support Channels

To deliver an outstanding customer experience and build buyer trust, EcomBot's AI chatbot integrates directly with your configured contact channels.

When a customer asks about their order status, account details, or requires help, the chatbot automatically detects your active contact channels (such as email, WhatsApp, phone, or contact forms) and displays them as direct action buttons or links.

This setup ensures a smooth handoff to your customer support team and prevents the AI from fabricating shipping details or order statuses, as it does not have direct access to your private, internal order management systems.

5. Graceful Degradation & Outage Resilience

Service continuity is critical for your e-commerce platform. In the event of a micro network drop or temporary AI service unavailability:

  • Instant Detection: The widget automatically detects connection timeouts or API errors.
  • Resilient Interface: Instead of freezing or throwing obscure technical errors, EcomBot displays a stylized, clean rose-tinted warning card inviting the user to retry.
  • Integrated Support Handoff: If you have active contact channels configured, the widget presents direct action buttons routing customers to your physical support channels (Email, WhatsApp, Phone, etc.) so they can easily complete their request.

Animations & Engagement (Vibe Coded)

EcomBot's visual experience is designed for a premium, responsive feel:

  • Instant Loading (Fade-in): The widget appears smoothly without any "white flash" upon page load, ensuring perfect visual integration.
  • Real-Time Thinking Indicators: While the AI searches for a product, the user sees dynamic statuses ("Searching for promotions...", "Analyzing stock...") instead of a simple loading indicator. This drastically reduces the drop-off rate during complex searches.

URL-Based Targeting & Visibility Rules

Take complete control over which pages of your store EcomBot should be shown or hidden on, thanks to our Visibility Rules editor:

  • Default Mode (All Pages): The widget is active across your entire merchant site.
  • Exclusion & Inclusion Rules (Show / Hide): Set up precise rules targeting page URLs.
  • Matching Types:
    • Contains (contains): The rule applies if the current URL contains the specified query string (e.g., cart to hide on all shopping cart pages).
    • Exact (exact): The rule applies if the URL path exactly matches the specified path (e.g., /checkout).
  • Strict Priority: Exclusion rules (exclude) have absolute priority. If a URL matches an exclusion rule, the widget is immediately deactivated and hidden transparently without impacting the rest of the page.
PreviousSemantic Search EngineNext Modules & API Integration