Chat Frame

Delaverse's Frame Chat Node embeds an AI-powered chat interface into websites or apps, delivering real-time user interactions with customizable styling and a comprehensive analytics dashboard for tracking engagement, ideal for customer support, lead generation, and product assistance.

Video Tutorial

Watch this comprehensive tutorial to see the Frame Chat Node in action.

Core Functionality

Interactive Chat Interface

Embeds customizable chat widget for real-time support.

Analytics Dashboard

Tracks message counts, engagement, conversation quality, user metrics, and limits.

Customizable Styling

Offers themes for brand alignment.

Domain Integration

Ensures secure, domain-specific deployment.

Configuration Guide

Adding the Node: Select Frame Chat Node from the Playground menu, click to drop it onto the canvas, title it (e.g., "Support Chat" or "AI Assistant"), and save. After adding the node, configure the following tabs:

1

Company Name

Enter your company name (e.g., Delaverse) for display in the chat widget to ensure brand alignment, then save.

2

Domain

In the Domain Tab, specify the target domain (e.g., delaverse.ai) and restrict usage for security, then save.

3

Style

In the Style Tab, choose from five themes: Light, Dark, Minimal, Colorful, or Stunning. Apply settings to match your brand, then save.

4

Code

In the Code Tab, access the HTML embed code for your site (e.g., <script src="https://delaverse.ai/chat-widget.js"></script>) and the API key for analytics dashboard setup. Copy and embed the HTML in your website's body, then save.

5

Frequently Asked Questions (FAQs)

Add FAQs that appear as floating suggestions at the bottom of the chat widget. Enter each question on a separate line in the provided box. Questions will auto-scroll from left to right and display automatically in the chatbot.

6

Company Logo

Upload your logo, which replaces the default chat button icon. Usage Guide: The logo displays on the chat button. Recommended size: 128x128 pixels. Supported formats: JPG and PNG. Maximum size: 2 MB.

7

Custom Welcome Message

Enter a personalized message for new users upon opening the chat. If left blank, the default message is used. This appears immediately to introduce your brand or guide users.

8

Registration Form

Enable a pre-conversation form to collect user details before starting chats. Language: Persian or English. Fields: First Name, Last Name, Phone Number, Email. When enabled, users must complete the form for identification and future communications.

Node Connections: Connect the AI Assistant Node output to the Frame Chat input for dynamic responses. No output is needed from Frame Chat, as it delivers directly (e.g., for support ticket responses). Verify connections and save.

Testing and Analytics Options: Test Frame: Simulate the chat interface to refine user experience before deployment. Analyze: Enter the API key from the Code Tab to access the analytics dashboard.

Saving Configuration: Click Save Changes, close the editor, monitor analytics for engagement, and save.

Analytics Dashboard Features

The dashboard includes five tabs for comprehensive insights.

1. Dashboard

Displays weekly, monthly, and yearly message trend charts, plus three metric boxes: Total Conversations, Unique Users, User Messages (with counts).

2. Conversation Analysis

User Messages Analysis: Click to select a time range (e.g., custom date range) for analysis of all user conversations via Frame Chat or Telegram. Assistant Messages Analysis: Analyzes the past week's Assistant messages sent via Frame Chat or Telegram (no time range selection). Useful for periodic trend reviews, such as sales analysis.

3. Recent Conversations

Shows all recent user and Assistant messages in a live feed. Includes a Refresh button to reload the page and update data.

4. Conversations by User

Search Box: Filter by name, email, phone number, or user ID. User List: Displays users; click any to view details on the right, including: Conversation history by session. User information (e.g., name, email).

5. User Limits Management

Configure and manage usage limits for chatbot users. Search: Filter users by name, email, phone number, or ID. Policy Settings: Click to access: Limit Type: No Limits, Daily Conversation Limit: Set default daily conversations (e.g., 10), User Budget System: Set initial credits for new users (e.g., 1 credit). Company-Wide Limits (Optional): Applies to the entire company before user-specific checks. Total Credit Limit (Credits): Leave empty for unlimited. Current Credit Balance (Credits): Leave empty for unlimited (decreases with usage). Daily Credit Limit (Credits): Leave empty for unlimited (resets daily). For each user or company policy, view applied limits. Click Usage next to a user to see detailed consumption. Actions: Cancel or Save Changes to apply.

Customization Options

Light

Bright and clean.

Dark

Low-light for eye comfort.

Minimal

Simple and neutral.

Colorful

Vibrant with gradients.

Custom

Tailored modern, mobile-optimized styles.

Pro Tips

  • Use Test Frame to refine user experience and FAQ placement before deployment.
  • Monitor the Dashboard and Conversation Analysis tabs for patterns and improvements.
  • Choose styling to match your website design; ensure clear CTAs in welcome messages.
  • Set domain restrictions and enable Registration Form for secure, personalized interactions.
  • Define company-wide limits first, then user-specific ones, to avoid conflicts.
  • Use the Search in User Limits Management to quickly audit high-usage users.