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.
  • Size — Width and height of the chat window.
  • Position — Place the widget in the Bottom Right or Bottom Left corner. Users can drag the launcher themselves; where they drop it is remembered in their own browser.
  • Appearance — Default or Hidden. Hidden keeps the widget initialized but suppresses its UI on your site; the dashboard preview stays visible.

Text and branding

Section titled “Text and branding”
  • Title — Heading shown at the top of the chat window.
  • Subtitle — Supporting line shown under the title when the widget opens.
  • Greeting — The widget’s first message when a conversation starts.

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.

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.

Programmatic configuration

Section titled “Programmatic configuration”

When using the npm package, you can change the widget’s client-side configuration at runtime. updateMarketrixConfig merges your changes, then unmounts and reinitializes the widget:

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


await updateMarketrixConfig({
  show_widget: false,
});

This is useful for hiding the widget on certain pages with show_widget: false. Dashboard-managed settings — position, colors, chips, and the rest of WidgetSettingsData — cannot be overridden this way: reinitializing refetches them from the API, and the fetched values win. See the Widget API Reference for the full list of configuration keys.