Skip to content
Marketrix Docs

Widget Setup

This guide walks you through creating a widget and embedding it on your website.

Creating a widget

Section titled “Creating a widget”
  1. Open the User Support page and go to the Widget section.
  2. Click Create Widget.
  3. Optionally add State Triggers — URL-pattern rules that swap the widget’s quick-action chips per page.
  4. Configure appearance settings (see Widget Customization). A live preview updates as you edit.
  5. Click Create Widget.

Your widget is now ready to install. Each Application has a single widget, grounded in everything Marketrix has learned about that Application.

Finding your credentials

Section titled “Finding your credentials”

Open the widget and look at the Details tab. It shows:

  • Widget ID (mtx-id) — the public identifier for your widget.
  • Widget Key (mtx-key) — the API key the widget uses to authenticate.
  • The assigned Application and current Status.

The Details tab also shows a ready-to-paste Embed Script containing your ID and key — use the Copy button to grab it.

Installing the widget

Section titled “Installing the widget”
Section titled “Script tag (recommended)”

Paste the embed script into the HTML of any page where you want the widget to appear. The script must be loaded once per page:

<script
  src="https://widget.marketrix.co/loader.js/loader.js"
  mtx-id="YOUR_WIDGET_ID"
  mtx-key="YOUR_API_KEY"
  mtx-api-host="https://api.marketrix.co"
></script>

Replace YOUR_WIDGET_ID and YOUR_API_KEY with the values from the widget’s Details tab. The loader.js script injects the required React import map and then loads the widget bundle from the same origin, passing through every mtx-* attribute.

NPM package

Section titled “NPM package”

For React applications or when you need programmatic control, install the package:

Terminal window
npm install @marketrix.ai/widget

Then initialize the widget in your application code:

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


await initWidget({
  mtxId: 'YOUR_WIDGET_ID',
  mtxKey: 'YOUR_API_KEY',
  mtxApiHost: 'https://api.marketrix.co',
});

See the Widget API Reference for the full set of functions and configuration options.

Keeping your key safe

Section titled “Keeping your key safe”

Next steps

Section titled “Next steps”