Skip to content
Marketrix Docs

Widget Customization

Tailor the widget’s look and behavior to match your brand. All settings are available in the widget Settings tab, with a live preview that updates as you edit. You can also reset to the platform defaults at any time.

Appearance

Section titled “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.
  • Shadow — Box shadow for depth. Set to a flat value for a borderless look.
  • Position — Place the widget in any corner: bottom_right, bottom_left, top_right, or top_left.
  • Appearance preset — default, compact, or full.
  • Device visibility — Show on desktop, mobile, or both (desktop_mobile).

Text and branding

Section titled “Text and branding”
  • Header — Title shown at the top of the chat window.
  • Body — Introductory text displayed when the widget opens.
  • Greeting — The widget’s first message when a conversation starts.
  • Font size — Base font size for widget text.

Animation

Section titled “Animation”
  • Animation duration — Speed of the open animation.
  • Fade duration — Speed of fade transitions.
  • Bounce effect — Enable or disable the bounce animation on open.

Interaction modes

Section titled “Interaction modes”

Each mode is an independent toggle:

  • Tell — Conversational, text-based explanations.
  • Show — Visual demonstrations that highlight UI elements on the page.
  • Do — Browser automation where the widget takes actions on the user’s behalf.
  • Human handoff — Allow escalation to a live agent when the AI can’t resolve a question.

See Interaction Modes for a fuller explanation of each.

Quick-action chips

Section titled “Quick-action chips”

Chips are predefined prompts shown as tappable buttons in the widget. Each chip pairs a piece of text with a mode (tell, show, or do), so tapping it sends that prompt in the chosen mode.

To show different chips on different pages, use State Triggers — URL-pattern rules that swap the chip set based on the page the user is on.

Programmatic configuration

Section titled “Programmatic configuration”

When using the npm package, you can override a subset of settings at runtime. updateMarketrixConfig merges your changes, then unmounts and reinitializes the widget:

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


await 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 application state — for example, repositioning it when a sidebar opens, or hiding it on certain pages with show_widget: false. See the Widget API Reference for the full list of configuration keys.