AI Virtual Assistant Builder

The AI Virtual Assistant is a floating conversational chat widget that lives in the corner of your website. It acts as a 24/7 AI-powered sales concierge and support agent, answering visitor inquiries, guiding customers to the right pages, and recommending relevant products with live prices and thumbnail images.

1. Features & Capabilities

  • Natural Language Conversations: Understands visitor questions in natural language and provides conversational answers based strictly on your indexed catalog.
  • Smart Product & Article Recommendations: Automatically attaches clickable cards with product titles, excerpts, prices, and thumbnail images directly inside the chat stream.
  • Floating Opener Badge: A customizable floating bubble with an icon and label (e.g. "Ask AI" or "Help") that opens the interactive chat window when clicked.
  • Quick Action Dialog Buttons: Pre-configured feedback buttons (such as "I'm finished" or "I need more help") to keep conversations smooth and engaging.
  • Session Continuity: Retains conversation history throughout the visitor's browsing session across different pages on your website.

2. Customizing the Assistant

Navigate to the Assistants section (section=assistant) on your dashboard to customize every aspect of the widget.

Subtab 1: Conversational Text & Settings

┌─────────────────────────────────────────────────────────────────────────────┐
│  Welcome Greeting:  "Hello! How can we help you today?"                    │
│  Chat Header:       "Acme Store Assistant"                                 │
│  Disclaimer:        "AI-generated response. Please verify details."        │
│  Search Placeholder:"Ask a question or search products..."                 │
│  Submit Button:     "Search"                                               │
└─────────────────────────────────────────────────────────────────────────────┘
  1. Welcome Greeting: The first message shown to visitors when they open the chat window.
  2. Chat Header Title: The title displayed in the top bar of the chat box.
  3. Introductory Text: Optional greeting blurb below the header.
  4. AI Disclaimer Notice: Optional compliance note displayed under search responses (e.g. "AI generated responses based on store catalog").
  5. Search Input Placeholder: Helper text inside the prompt input box.
  6. Submit Button Label: Text on the send/submit button (e.g. "Search" or "Send").
  7. Floating Opener Label: Text displayed on the floating launch button in the corner of your page (e.g. "Ask AI").
  8. Action Dialog Buttons: Customize the labels for "I'm finished." and "I need more help."

Subtab 2: Colors, Icons & Branding

Match the assistant seamlessly to your brand's color palette:

  • Floating Opener Button:
    • Opener Background Color: The main color of the floating button in the bottom corner.
    • Opener Text Color: Text and icon color on the floating button.
    • Opener Icon: Enter an icon URL or click Upload to S3/CDN to use your own custom brand logo.
  • Chat Window Header:
    • Header Background: Background color for the chat window top banner.
    • Header Text / Title Color: Color for the title text and close button.
  • Chat Body & Messages:
    • Body Background: Color of the chat window conversation canvas.
    • Search Button Color & Label Color: Styling for interactive buttons inside the chat.
    • Action Dialog Buttons: Background, hover, and text colors for customer response pills.
  • Custom Chat Avatars:
    • Welcome Image / Logo: An avatar displayed at the top of the chat greeting.
    • Chat Reply Icon: The avatar icon that appears next to every AI response.

Subtab 3: Multi-Language Translations

Click the 🌐 Multi-Language Translations subtab:

  1. Select your target language (e.g. 🇪🇸 Spanish (es-MX)).
  2. Click ✨ AI Auto-Translate to automatically translate all conversational greetings, placeholders, and button labels using AI.
  3. Review the translated text and click 💾 Save Translations.

(For full details on catalog translation, see the Multi-Language Guide.)

3. Installing on Your Website

Installing the AI Virtual Assistant requires adding just one line of code to your website:

  1. In the builder, click the 💻 Embed Code & Setup subtab.
  2. Copy the pre-built <script> embed code:
<!-- Visperity AI Virtual Assistant Embed -->
<script async src="https://d269dlq2mxc0w4.cloudfront.net/v4/YOUR_DATASET_KEY/widget.js"></script>
  1. Paste this script tag into your website template right before the closing </body> tag on all pages where you want the assistant to appear.

💡 Whitelist Reminder: If you configured Approved Domains in your dataset settings, make sure your live website domain is listed so the script can load securely.

4. Complete Field & Setting Reference

Setting Name Default Value Description
welcome_greeting "Hello! How can we help you today?" Initial greeting message displayed when the chat window opens.
chat_header_text "[Dataset Name] Assistant" Title shown at the top of the chat header bar.
chat_intro Empty Additional introductory copy beneath the header.
chat_disclaimer Empty Disclaimer text shown at the bottom of AI responses.
search_placeholder "Ask a question or search..." Helper placeholder inside the chat input box.
submit_label "Search" Label on the chat send/submit button.
chat_opener_label "Ask AI" Text label on the floating button in the corner of your page.
chat_opener_icon Default Chat Icon Image URL for the floating launcher button.
welcome_image Default Logo Image shown at the top of the conversation stream.
chat_reply_icon Default AI Avatar Image shown next to AI responses.
finished_text "I'm finished." Label on the conversation closing action button.
more_help_text "I need more help." Label on the request more assistance action button.
opener_background #2563eb (Indigo/Blue) Background color of the floating opener button.
opener_text_color #ffffff (White) Text color of the floating opener button.
header_background_color #1e293b (Dark Slate) Background color of the chat window top banner.
header_text_color #ffffff (White) Text color of the chat window header title.
ai_body_background #f8fafc (Light Slate) Canvas background color of the chat window.
dialog_button_background #ffffff (White) Background color of action dialog buttons.
dialog_button_hover #e2e8f0 Hover color of action dialog buttons.
dialog_button_text_color #1e293b Text color of action dialog buttons.
show_chat_images 0 (Disabled) Toggle to display thumbnail images in chat product cards.
price_label "Price: " Prefix displayed next to product prices in recommendation cards.
← 2. Data Ingestion & Knowledge Base 📚 All Documentation Guides 4. Live Search Autocomplete Builder →