Web channel configuration

Configuration overview

The web channel offers extensive customization options to match your brand and user experience requirements. You can configure these settings through the Moveo platform UI or override them programmatically during initialization.

Launcher appearance

Customize how the chat launcher button appears on your website.

Launcher styles

Choose between different launcher styles:

• Circle (default): Circular button with icon
• Box: Rectangular button with text

Teaser message

Add a teaser message next to the launcher to encourage interaction.

Configuration

Result

Additional options

• Focus trap: Prevent users from browsing while conversing
• Auto open: Automatically open the widget when page loads

Chat window appearance

Customize the visual design of the chat window.

Theme customization

Element	Default	Description
Primary color	#1B66D6	Main brand color
Text color	#FFFFFF	Text on primary color
Header title	Your AI Assistant	Chat window header text
Avatar	Default bot icon	AI Agent profile image

Configuration

Result

Start behavior

Configure how conversations begin when users open the chat.

Available options

1. User input: User must type first message
2. Autostart: AI sends welcome message automatically
3. Welcome screen: Display options and FAQs

User input

Autostart

Welcome screen

Positioning

Control where and how the web channel appears on your page.

Position options

• Livechat (default): Bottom-right floating widget
• Embed: Renders within page content
• Pop-up: Center of screen modal

Livechat

Embed

Pop-up

Custom positioning

Override default positioning with CSS:

/* Position on the left side */
.web-client-container {
  left: 12px;
  right: auto;
}

/* Custom offset from bottom */
.web-client-container {
  bottom: 100px;
}

When positioning the launcher on the left, consider removing the teaser message for better

visual balance.

Visitor information collection

Gather user information before or during the conversation.

Pre-chat form fields

Enable collection of user data before chat starts:

Field	Variable	Description
Email	user.email	User's email address
Name	user.display_name	Display name
Phone	user.phone	Phone number
Address	user.address	Physical address
Language	user.language	Preferred language
Location	user.location.latitude/longitude	GPS coordinates

Additional options

• Data policy disclaimer: Require acceptance of terms
• Location permission: Request browser location access
• Required fields: Make specific fields mandatory

Advanced settings

File upload

Enable users to share files in the conversation:

• Maximum file size: 5MB
• Maximum files per message: 4
• Supported formats: Images, PDFs, documents

Conversation history

Maintain chat history across page refreshes and navigation:

• Conversations persist for returning users
• History cleared after session timeout (1 hour default)

Satisfaction survey

Collect feedback after conversations:

• Star ratings or thumbs up/down
• Optional comment field
• Triggered on conversation end

Language settings

Override browser language detection:

• Set default language for all users
• Available languages include English, Spanish, French, German, and more

Programmatic configuration

Override any setting during initialization:

MoveoAI.init({
  integrationId: "YOUR-INTEGRATION-ID",
  version: "v2",

  // Appearance
  accent_color: "#FF5733",
  background_color: "#2C3E50",
  header_title: "Support Chat",
  avatar: "https://example.com/avatar.png",
  bubble_image: "https://example.com/launcher.png",
  font_family: "Roboto Mono",

  // Behavior
  auto_open: true,
  focus_trap: false,
  welcome_message: "How can I help?",
  welcome_trigger_message: "Hello!",
  virtual_agent_name: "Alex",

  // Window settings
  chatWindow: {
    width: "400px",
    height: "600px",
  },

  // Launcher settings
  launcher: {
    size: "60px",
    show: true, // Set false to hide launcher
  },

  // Language
  language: "en",

  // Session behavior
  close_session_if_empty: false,
  download_conversation: true,

  // Accessibility
  webchat_aria_label: "Chat with support",
  enableAccessibilityWidget: true,
})
  .then((instance) => {
    console.log("Chat configured and connected");
  })
  .catch((error) => console.error(error));

CSS customization

Use CSS variables for advanced styling:

instance.setCSSVariables({
  "--moveo-background-color": "#1a1a1a",
  "--moveo-accent-color": "#00ff00",
  "--moveo-header-height": "60px",
});

Available CSS variables:

Variable	Description
--moveo-background-color	Primary background color
--moveo-accent-color	Secondary/accent color
--moveo-header-height	Chat header height

Language and localization

Default language hierarchy

Language selection follows this priority:

1. User selection in visitor form
2. Configuration default
3. Browser language
4. English fallback

Available languages

Code	Language
de	🇩🇪 German
el	🇬🇷 Greek
en	🇺🇸 English
es	🇪🇸 Spanish
fr	🇫🇷 French
it	🇮🇹 Italian
pt-br	🇧🇷 Portuguese (Brazil)
nl	🇳🇱 Dutch
zh	🇨🇳 Chinese
ar	🇸🇦 Arabic
ja	🇯🇵 Japanese
tr	🇹🇷 Turkish

Dynamic language switching

Change language programmatically:

instance.setLocale("es"); // Switch to Spanish

Configuration best practices

1. Brand consistency: Match your website's colors and fonts
2. Mobile optimization: Test positioning on different screen sizes
3. Performance: Load custom assets from CDN
4. Accessibility: Provide ARIA labels and high contrast options
5. User privacy: Only collect necessary information
6. Testing: Preview changes before going live

Trusted domains

Secure your integration by specifying allowed domains:

• Add all production domains
• Include staging/test environments
• Supports wildcards: *.example.com
• Blocks unauthorized usage

Next steps

• Implement methods and events
• Troubleshoot integration issues