rtAVrtAV Platform

Shopify App Integration

The rtAV Video Chat Bot Shopify app allows you to easily integrate AI-powered video chat bots with real-time avatars into your Shopify store. No coding required - install, configure, and enable in minutes.

Quick Start

  1. Install the app from the Shopify App Store (see installation below)
  2. Get your API key from platform.rtav.io
  3. Configure in the app settings from your Shopify admin
  4. Enable the widget and start chatting!

Installation:

  • Visit the Shopify App Store
  • Click "Add app" to install to your store
  • Open the app from your Shopify admin to configure

Installation

From Shopify App Store (Recommended)

  1. Visit apps.shopify.com/rtav-vbot
  2. Click Add app to install to your store
  3. Review and approve the app permissions
  4. Open the app from your Shopify admin to configure

Requirements

  • An active Shopify store
  • Shopify admin access
  • An rtAV account (free tier available at platform.rtav.io)

Configuration

Access the app settings from your Shopify admin by opening the rtAV Video Chat Bot app.

Basic Settings

Enable VBot

Toggle to enable or disable the widget on your store. The widget will only appear when enabled.

rtAV API Key

Your rtAV platform API key. Get one at platform.rtav.io/api-keys.

Important: Keep your API key secure. It's stored in your Shopify app configuration and should never be shared publicly.

Appearance Settings

  • Theme Color: The primary color for the widget UI. Use the color picker to match your brand.
  • Widget Position: Choose where the widget appears (Bottom Right, Bottom Left, Top Right, or Top Left)
  • Widget Label: Text displayed above the collapsed widget icon (e.g., "Chat with us", "Need help?")

AI Configuration

  • Title: The title shown in the widget header (e.g., "Customer Support", "AI Assistant")
  • Name: The name of your AI assistant (e.g., "Sarah", "Support Bot")
  • AI Instructions: Define how your assistant should behave. This is crucial for customizing responses.
  • Model: The AI model to use (default: gpt-5.2)

Example AI Instructions for E-commerce:

  • Customer Support: "You are a friendly and helpful customer support representative for an e-commerce store. Help customers with product questions, orders, shipping, and returns. Always be polite and professional."
  • Sales Assistant: "You are an enthusiastic sales assistant. Help visitors find the right products, answer pricing questions, explain product features, and guide them through the purchase process."
  • Product Specialist: "You are a product specialist. Help customers understand product details, compare options, answer technical questions, and make informed purchase decisions."

Advanced Settings

  • Custom Face ID: If you have custom avatar faces configured in your rtAV account, enter the face ID here
  • Custom Voice ID: If you have custom voices configured in your rtAV account, enter the voice ID here
  • Driving: The driving style for the avatar
  • Welcome Message: The initial message shown when the widget opens
  • Idle Timeout: Number of seconds of inactivity before the widget auto-closes (default: 60 seconds)
  • Idle Message: Message shown when the widget closes due to inactivity (optional)
  • Goodbye Message: Message shown when the user closes the widget (optional)
  • Max Words: Maximum number of words per AI response (default: 60 words, set to 0 for no limit)
  • Use Product Content: When enabled, the app automatically includes the current product's information in the AI context

Usage

Store-Wide Widget

By default, when enabled, the widget appears on all pages of your store in the configured position. No additional configuration needed.

Product Awareness

When "Use Product Content" is enabled, the app automatically includes product information (title, description, price, variants, etc.) in the AI context when customers are viewing product pages. This allows the AI to answer product-specific questions accurately.

The AI can help customers with:

  • Product details and specifications
  • Pricing and variant information
  • Availability and shipping options
  • Product comparisons
  • Recommendations based on customer needs

How It Works

Architecture

The app integrates rtAV's vBot widget into Shopify using the following components:

  • Frontend Widget: Loads the vBot JavaScript widget from platform.rtav.io/vbot.js and initializes it with configured settings
  • Shopify App Backend: Provides a secure endpoint for the widget to obtain client secrets, authenticates requests, and communicates with rtAV API
  • Settings Management: Stores and retrieves app configuration securely in Shopify app storage
  • Admin Interface: Creates the settings page in the Shopify app and handles form submission
  • Product Data Integration: When enabled, extracts product information from the current page and includes it in the AI context

Security

  • API keys are stored securely in Shopify app configuration
  • Client secrets endpoint uses Shopify session authentication
  • All user input is sanitized before storage
  • API communication uses secure HTTPS
  • App follows Shopify's security best practices

API Flow

  1. Customer visits store with enabled widget
  2. Widget JavaScript loads from platform.rtav.io
  3. If on a product page and product awareness is enabled, product data is extracted
  4. Widget requests client secret from Shopify app endpoint
  5. App validates request and calls rtAV API with stored API key
  6. rtAV API returns ephemeral client secret (valid for 1 hour)
  7. Widget uses client secret to establish WebSocket connection
  8. Product context (if available) is sent to the AI
  9. Real-time video and audio communication begins

Troubleshooting

Widget Not Appearing

  • Check if enabled: Open the app from Shopify admin and ensure "Enable VBot" is checked
  • Verify API key: Ensure you've entered a valid API key
  • Clear cache: Clear your browser cache and any Shopify theme cache
  • Check browser console: Open browser developer tools (F12) and look for JavaScript errors
  • Verify script loading: Check Network tab to ensure vbot.js is loading from platform.rtav.io
  • Check theme compatibility: Ensure your theme properly loads app blocks and scripts

API Key Errors

  • Invalid API key: Verify your API key at platform.rtav.io/api-keys
  • API key expired: Create a new API key if the current one has been revoked
  • Permissions: Ensure your API key has the necessary permissions for realtime sessions

Widget Appears But Doesn't Connect

  • Check browser console: Look for WebSocket connection errors
  • Firewall/security: Some security settings may block WebSocket connections. Whitelist platform.rtav.io if needed
  • Network issues: Ensure your store can make outbound HTTPS connections to api.rtav.io
  • API quota: Check your rtAV account for usage limits or billing issues

Product Awareness Not Working

  • Verify "Use Product Content" is enabled in app settings
  • Check that you're on a product page (not collection or home page)
  • Verify product data is available on the page (check page source)
  • Check browser console for any errors related to product data extraction

Features

  • Real-time Video Avatars: AI assistants come to life with synchronized video avatars
  • Easy Setup: Install, configure, and enable in minutes from Shopify App Store
  • Customizable Appearance: Match your brand colors and style
  • Flexible Positioning: Place the widget in any corner of your store
  • Custom AI Instructions: Define exactly how your assistant should behave
  • Product Awareness: AI automatically knows about products on the current page
  • E-commerce Optimized: Designed specifically for Shopify stores
  • Voice & Text Chat: Customers can interact via voice or text input
  • Conversation History: View past messages in the chat
  • 24/7 Support: Automated customer support available anytime

Support

Next Steps