Skip to content
Marketrix Docs

Widgets Overview

A Widget is an embeddable chat interface that brings Marketrix’s understanding of your product to your end users. It drops into any website via a single script tag, letting customers get instant help without leaving your product — grounded in the Knowledge Marketrix has read and the Application Graph it has built from exploring your app.

Widgets live under User Support, scoped to the Application you’re working in. Each Application has a single widget.

How a Widget connects

Section titled “How a Widget connects”

Every widget is linked to a specific application. When a user opens the widget, the conversation draws on everything Marketrix has learned about that Application to respond.

User → Widget → Application understanding (Knowledge + Graph) → Response

The widget runs inside an isolated Shadow DOM on the host page, so its styles never leak into — or pick up styles from — your site.

Interaction modes

Section titled “Interaction modes”

The widget supports three interaction modes, each of which can be toggled on or off in Widget Customization:

  • Tell — Explains concepts and answers questions in text.
  • Show — Demonstrates a task step by step, highlighting the relevant UI elements on the page.
  • Do — Performs actions in the browser on the user’s behalf.

A fourth toggle, Human handoff, lets conversations escalate to a live agent when the AI can’t resolve a question. See Interaction Modes.

Key features

Section titled “Key features”
  • Real-time chat — Users get streaming responses over a live connection.
  • Interaction modes — Tell, Show, and Do, plus optional human handoff.
  • Session recording — Every interaction is captured for later replay and review. See Session Recording.
  • Quick-action chips — Predefined buttons that let users send common prompts with one click.
  • State Triggers — Swap the chips per page based on URL patterns. See State Triggers.

Getting started

Section titled “Getting started”

Deploy a widget in three steps:

  1. Create a widget — Configure its appearance. See Widget Setup.
  2. Customize — Match the widget to your brand and enable the modes you want. See Widget Customization.
  3. Test — Preview the widget in the dashboard before going live. See Testing Your Widget.

Explore

Section titled “Explore”
Widget Setup Create a widget and embed it on your site.
Widget Customization Brand the widget and enable interaction modes.
Interaction Modes Tell, Show, and Do explained.
Testing Your Widget Preview and validate before deploying.
API Reference The npm package and JavaScript API.
Session Recording Replay recorded user sessions.
State Triggers Swap widget chips per page.