Widget Customization

Tailor the widget’s look and behavior to match your brand. All customization options are available in the widget settings page.

Appearance

• Colors — Background, text, border, accent, and secondary colors. Use your brand palette to make the widget feel native to your site.
• Border radius — Corner roundness (e.g., 16px for rounded corners, 0px for sharp edges).
• Size — Width and height of the chat window (e.g., 400px x 600px).
• Shadow — Box shadow for depth effect. Set to none for a flat look.
• Position — Place the widget in any corner: bottom right, bottom left, top right, or top left.
• Device visibility — Show on desktop and mobile, desktop only, or mobile only.

Text and branding

• Header — Title shown at the top of the chat window.
• Body — Introductory text or welcome message displayed when the widget opens.
• Greeting — Initial message from the agent when a conversation starts.
• Font size — Base font size for widget text.

Animation

• Animation duration — Speed of the popup animation when the widget opens.
• Fade duration — Speed of fade effects during transitions.
• Bounce effect — Enable or disable the bounce animation on open.

Features

• Tell mode — Enable conversational text-based explanations.
• Show mode — Enable visual demonstrations that highlight UI elements.
• Do mode — Enable browser automation where the agent takes actions on behalf of the user.
• Human handoff — Allow escalation to human support when the agent cannot resolve a question.
• Quick action chips — Predefined buttons with common questions that users can click for instant answers.

Tip

Start with Tell mode enabled and add Show and Do modes once your agent has enough knowledge about your application’s UI. Running simulations helps the agent learn page layouts for visual interactions.

Programmatic configuration

When using the npm package, you can override settings programmatically after initialization:

import { updateMarketrixConfig } from '@marketrix.ai/widget';

updateMarketrixConfig({
  widget_position: 'bottom_left',
  widget_position_offset: { x: 20, y: 20 },
  widget_position_z_index: 50,
  show_widget: true,
});

This is useful for adjusting the widget based on your application state — for example, repositioning the widget when a sidebar opens or hiding it on certain pages.