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. Navigate to Widgets and click Create Widget.
  2. Select the agent that will handle conversations.
  3. Choose a widget type: Web Widget or Slack.
  4. Configure appearance settings (see Widget Customization).
  5. Click Create.

Your widget is now ready to install.

Installing the widget

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

Add the following script tag to your website’s HTML, before the closing </body> tag:

<script
  src="https://storage.marketrix.ai/widget/index.mjs"
  mtx-id="YOUR_WIDGET_ID"
  mtx-key="YOUR_API_KEY"
  mtx-api-host="https://api.marketrix.ai"
></script>

Replace YOUR_WIDGET_ID and YOUR_API_KEY with the values from your widget settings page.

NPM package

Section titled “NPM package”

For React applications, install via npm:

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.ai',
});

Finding your widget credentials

Section titled “Finding your widget credentials”
  1. Open your widget from the Widgets page.
  2. Your Widget ID and API Key are displayed in the widget settings panel.
  3. Copy these values into your installation code.