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 a launcher style in Launcher appearance → Launcher style:

• Sparkle bubble: Round launcher with a chat bubble and a sparkle icon (bubble-sparkle). New integrations use this style by default.
• Bubble: Round launcher with a chat bubble icon (bubble).
• Do you need help?: Button with a text label (help).
• Feedback: Button with a text label (feedback).

An existing integration keeps the launcher style that it has. The value in parentheses is the launcher.type value in the integration configuration.

Teaser

The teaser shows next to the closed launcher and invites visitors to start a conversation. Choose it in Launcher appearance → Teaser:

Teaser	What visitors see	teaser.variant
A message	A short message.	callout
Quick actions	Up to three buttons. A button opens the chat and sends its label as the first message of the visitor.	question_chips
A message and an input	A message and a text field. What the visitor types opens the chat as their first message.	composer
Launcher only	No teaser.	none

Teaser message holds up to 64 characters. Input placeholder sets the hint text in the text field of A message and an input.

Configuration

Result

Quick actions per webpage

Use Customize per webpage to show different quick actions on a webpage, with one set for each section of the page. Moveo reads the webpage and writes the quick actions for you.

To add a webpage:

1. In Launcher appearance, turn on Customize per webpage.
2. Select Add webpage.
3. In Webpage, enter the address of the webpage, such as moveo.ai/pricing.
4. In Prompt (optional), enter instructions for the quick actions, such as a section to skip.
5. Select Generate. Moveo adds the webpage with quick actions for each section.
6. Review the quick actions of each section, and change them as needed.
7. Select Save.

On a webpage, the webchat shows the quick actions of the section that fills most of the screen. When no section is on screen, the webchat shows only the launcher. Every other page shows the teaser that you chose in Teaser.

Moveo saves the path of each address, such as /pricing, and compares it with the path of the page that the visitor opens. The match ignores case, so /pricing also matches /en/Pricing. When more than one webpage matches, the longest path wins.

warning

The home page, such as moveo.ai, saves the path /, which matches every page of the site. Every page that no other webpage matches then uses the home page instead of Teaser.

• All the webpages must be on one site. The first address that you add sets the site.
• To generate the quick actions again, select Delete webpage and add the webpage again.
• Moveo does not save a section without quick actions.
• When you turn off Customize per webpage and select Save, Moveo removes every webpage.

Each section has a Name and a list of CSS Selectors that find it on the page. To change them, select the arrow next to the section name. The webchat uses the first selector that matches, and the others are fallbacks for when the page changes. A warning icon marks a section that Moveo finds only by its position on the page. This section stops working when the page order changes.

Preview a webpage

To see the webchat on the real webpage before you save, expand the webpage and select Preview. A new tab opens with a copy of the webpage and the webchat with your unsaved changes.

• Preview needs an AI agent assigned in Rules.
• The copy runs none of the scripts of the page, so parts that need them, such as menus, can fail.
• The preview expires after 30 minutes without use.
• If the browser blocks the new tab, allow pop-ups for the console.

If your site blocks automated browsers, Generate and Preview fail. To fix this, allowlist the Moveo crawler IP addresses for your region.

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	AI agent	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

Pages

Use the Pages section of Start behavior to choose the pages of your website where the webchat shows. It has two lists:

• Show only on these pages (show_on_pages): The webchat shows only on these pages. An empty list shows the webchat on every page.
• Never show on these pages (hide_on_pages): The webchat never shows on these pages, also during a live conversation. An empty list sets no rule.

Type one path on each line, such as /shop or /shop/*. The asterisk matches any characters, slashes included. Moveo compares only the path of the page, so the host, the query and the hash have no effect, and the match ignores case. When a page matches both lists, Never show on these pages wins. A live conversation keeps the webchat on a page that is not in Show only on these pages.

Each list holds up to 50 paths, and each path has 200 characters or fewer. A path starts with / and contains only letters, digits, and the characters -, _, ., / and *.

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

Widget alignment

To put the launcher and the chat window on the left or the right side of the page, go to Webchat position and select Left or Right in Select webchat alignment. The field does not show for Embed, because an embedded webchat stays where you place it in the page. If the integration uses a top corner, the save keeps the webchat at the top.

For livechat mode, the widget_alignment option also controls which corner of the screen the launcher and chat window appear in.

Value	Description
bottom-right	Bottom-right corner (default)
bottom-left	Bottom-left corner
top-right	Top-right corner, chat opens downward
top-left	Top-left corner, chat opens downward
right	Legacy alias for bottom-right
left	Legacy alias for bottom-left

MoveoAI.init({
  integrationId: "YOUR-INTEGRATION-ID",
  widget_alignment: "top-left",
});

Custom positioning

For fine-grained control beyond widget_alignment, you can override positioning with CSS:

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

tip

Use widget_alignment to position the launcher in a corner. Reserve CSS overrides for fine-tuning offsets. 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: 50 MB for each file
• Maximum files per message: 4
• Documents: .pdf, .txt, .csv, .doc, .docx, .xls, .xlsx, .ppt, .pptx
• Images: .jpg, .jpeg, .png, .gif, .webp
• Videos: .mp4, .mov, .webm. On a phone or another mobile device, the webchat does not accept videos.

The webchat shows a warning and does not upload a file that is larger than 50 MB or of another type.

Keep the chat when visitors leave

Keep the chat when visitors leave (floating_window) lets visitors continue a conversation in a small window. A visitor can leave the page during a conversation. The webchat then offers to move the conversation to a small window that stays on top of other tabs. This offer works in desktop Chrome, Edge and Firefox. The header menu of the webchat also shows Continue in a small window in every desktop browser. The setting is off by default.

Conversation history

Maintain chat history across page refreshes and navigation:

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

Resume message

Use Resume message after (minutes) (resume_timeout) to greet visitors who come back to a quiet conversation. When a visitor opens the webchat again after this number of minutes without messages, the AI agent receives the message defaultresumemessage. The value is from 0 to 1440 minutes, and 0 turns the resume message off. The default is 0.

warning

Before you turn on the resume message, add a dialog for defaultresumemessage to your AI agent. An AI agent without that dialog answers the message with its fallback response.

Close button behavior

By default, the close button of the webchat asks the visitor to end the conversation or to minimize the webchat. Turn on Close button only minimizes (close_minimizes_window) to make the close button hide the webchat and keep the conversation open. With this setting, visitors cannot end the conversation from the close button.

Inactivity prompt

When a conversation is quiet for some minutes, the webchat asks the visitor to continue the conversation or to start a new one. The Inactivity prompt setting is on by default. Set the number of minutes in Prompt after (minutes), from 3 to 30. The default is 10 minutes. Turn the setting off to remove the prompt. The integration configuration then stores inactivity_timeout: 0.

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",
  download_conversation: true,
  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",
  },

  // Positioning
  widget_alignment: "bottom-right", // "bottom-right" | "bottom-left" | "top-right" | "top-left"

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

  // Language
  language: "en",


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

Text overrides

Use the translations option to replace the default text of the web channel, such as the disclaimer title or the message input placeholder. The option takes one object per language code. Each object holds only the strings you want to change, and every other string keeps its default value.

MoveoAI.init({
  integrationId: "YOUR-INTEGRATION-ID",
  version: "v2",
  language: "en",
  translations: {
    en: {
      disclaimer: { title: "Terms of use" },
      message_input: { placeholder: "Type your message" },
    },
    es: {
      disclaimer: { title: "Términos de uso" },
      message_input: { placeholder: "Escribe tu mensaje" },
    },
  },
});

The web channel shows the overrides for the active language, and applies them again when you switch languages with setLocale(). The table lists the most common keys. Contact Moveo support for the full list.

Key	Default text
disclaimer.title	Disclaimer & data policy
disclaimer.required	To continue, you must accept the privacy policy.
message_input.placeholder	Ask anything…
launchers.help	Need help?
status.online	Online
buttons.end_chat	End chat
survey.experience	How would you rate your chat experience?
references.title	Related articles

warning

Moveo does not validate override values. Check that each string fits its place in the web channel, and keep placeholders such as {{0}} where the default text has them.

CSS customization

Use the setCSSVariables() method for advanced runtime styling. This enables per-customer theming without code changes.

instance.setCSSVariables({
  "--moveo-header-text-color": "#10038C",
  "--color-options-background": "#CCF3FD",
});

Available CSS variables

General

Variable	Description
--color-chat-background	Chat container background

Launcher

Variable	Description
--color-launcher-background	Launcher button background
--color-launcher-foreground	Launcher button icon color
--color-opening-message-background	Teaser message background
--color-opening-message-foreground	Teaser message text color

Header

Variable	Description
--moveo-header-background	Header background color
--moveo-header-text-color	Header text and icon color

Messages

Variable	Description
--font-size-brain-message	AI message text size (small, medium, or large)

Quick replies (options)

Variable	Description
--color-options-background	Quick reply button background
--color-options-foreground	Quick reply button text
--color-options-border	Quick reply button border

System messages (swimlanes)

Variable	Description
--color-swimmlane-background	System message background
--color-swimmlane-foreground	System message text

Carousel cards

Variable	Description
--color-carousel-card-background	Carousel card background
--color-carousel-card-foreground	Carousel card text
--color-carousel-card-border	Carousel card border

Example: complete branded theme

instance.setCSSVariables({
  // Header
  "--moveo-header-text-color": "#10038C",

  // Quick replies
  "--color-options-background": "#CCF3FD",
  "--color-options-foreground": "#10038C",
  "--color-options-border": "#CCF3FD",

  // System messages
  "--color-swimmlane-background": "#F2EBE7",
  "--color-swimmlane-foreground": "#1E222D",
});

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
• Wildcards such as *.example.com are not supported, so add each subdomain
• Blocks unauthorized usage

Next steps

• Implement methods and events
• Troubleshoot integration issues