Skip to main content
How-to

How to Add the AI Agents Webchat Widget to a StoreFront Page

This guide explains how to embed the AI Agents Webchat widget on an UltraCart StoreFront page using the Visual Builder. It assumes the AI Agent has already been configured in CRM > Workforce.

Last Updated: June 18, 2026

Table of Contents​

Overview​

The AI Agents Webchat widget provides a conversational interface for customers directly on your StoreFront pages. Once an AI Agent is set up in the CRM Workforce section, the widget can be added to any page built with the Visual Builder. This enables site-wide or page-specific support, product recommendations, order assistance, and more.

Key benefits include seamless integration with existing StoreFront themes and automatic handling of agent routing based on CRM configuration.

Prerequisites​

  • An AI Agent configured and active in CRM > Workforce.

  • The StoreFront must be linked to the correct CRM workspace:

    1. In the UltraCart admin, navigate to StoreFronts > [Your Store] > Settings.

    2. Locate the CRM Integration or Workspace Linking section.

    3. Select and link the appropriate CRM workspace.

  • Access to the UltraCart StoreFront editor with Visual Builder enabled for the target storefront.

  • The StoreFront must be on a plan that supports Visual Builder widgets (Medium plan or higher recommended).

Locating and Adding the Widget​

  1. Log in to the UltraCart administration panel and navigate to the StoreFront editor for your store.

  2. Open the desired page (or footer template) in the Visual Builder.

  3. Click the + (Add Element) button in the builder toolbar.

  4. In the element search field that appears, type webchat.

  5. Select the AI Agents Webchat widget from the results and click to add it to the canvas.

The widget will appear as a draggable, resizable component.

For optimal customer experience:

  • Footer area (sitewide): Add the widget once to the footer template. This automatically applies site-wide coverage across all pages that inherit the footer. This is the recommended approach for general support.

  • Specific pages: Place on individual pages (e.g., product or checkout pages) near relevant content for context-specific assistance.

  • Avoid overlapping with critical checkout elements or navigation.

After placement, use the Visual Builder's layout tools to adjust positioning, width, and responsive behavior.

Widget Configuration​

Once added, select the widget on the canvas to access its properties panel on the right:

Agent Selection​

  • Use the dropdown to select a specific AI Agent when multiple agents are configured in the CRM workspace.

  • If no specific agent is chosen, the widget defaults to the primary (first active) agent.

  • The selected agent is displayed in the properties panel for confirmation. Changes in CRM require a page refresh in the Visual Builder to update available options.

Trigger Modes​

Choose the mode that best fits your customer experience goals:

  • Always Visible: The full chat window is persistently displayed. Best for high-engagement pages where immediate assistance is prioritized.

  • Icon Only (expands on click): Shows a floating chat icon that expands into the full widget when clicked. Recommended for most sites to minimize visual clutter while remaining accessible.

  • Triggered by User Action: Hidden until activated by a custom event (e.g., button click or time delay). Requires additional configuration or custom JavaScript in advanced setups.

Context Passing​

Enable context passing to provide the AI Agent with real-time page data for more relevant responses. Available data typically includes:

  • Current page URL

  • Product SKU (on product pages)

  • Cart contents summary (item count, total)

  • Customer session data (if authenticated)

This is usually configured via a toggle/checkbox in the properties panel. No custom code is required for standard fields; advanced context can be extended via CRM Agent settings.

Note: Configuration options are driven by the CRM Workforce settings. Changes there may require refreshing the widget properties.

Testing the Widget​

  1. Save and publish (or preview) the StoreFront changes.

  2. Open the live page in an incognito browser window.

  3. Interact with the webchat icon or widget.

  4. Verify the correct AI Agent responds and that context data (e.g., SKU, cart) is passed correctly.

  5. Test on mobile devices to confirm responsive behavior.

  6. Simulate no-agent scenarios by temporarily disabling the agent in CRM to observe fallback behavior.

Troubleshooting​

Symptoms: Typing webchat yields no results.

Solution:

  1. Confirm the AI Agent is active in CRM > Workforce.

  2. Verify the StoreFront is linked to the correct CRM workspace (see Prerequisites).

  3. Refresh the Visual Builder page or clear browser cache.

Widget Not Visible on Live Site​

Symptoms: Widget shows in preview but is missing on the published page.

Solution:

  1. Verify the page (or footer template) was fully published.

  2. Check for theme conflicts in the custom CSS/JS sections.

  3. Confirm the widget was not accidentally set to hidden via visibility rules.

Agent Not Responding or Wrong Agent Selected​

Symptoms: Chat opens but receives no reply, errors, or uses the incorrect agent.

Solution:

  • Review agent status, business hours, and logs in CRM > Workforce.

  • Confirm the agent selection in the widget properties panel.

  • Test the agent independently via the CRM preview interface.

No Agent Available Behavior​

When no agent is active (e.g., outside business hours or all agents disabled), the widget typically displays a fallback offline message defined in CRM settings, such as "Our team is currently offline. Please leave a message." The chat interface remains visible but does not route to a live agent.

  • AI Agents Configuration in CRM Workforce - Agent setup, training, and business hours.

  • StoreFront Visual Builder Overview - General builder usage and templates.

  • StoreFront Theming and Layout Best Practices - Styling integration and footer templates.

Was this page helpful?