This guide walks you through setting up the support widget and deploying it to your website.

​
Prerequisites

  • A Marketrix account with at least one application
  • At least one agent created and tested
  • Knowledge uploaded to your application
  • Access to your website’s HTML or CMS

​
Step 1: Create the Integration

  1. Log into your account at the Marketrix dashboard
  2. Click Widgets in the left sidebar
  3. Click Create Integration
  4. Select Widget as the integration type
  5. Choose your application and agent
  6. Give the integration a descriptive name (e.g., “Website Support Widget”)

​
Step 2: Configure the Widget

All widget configuration is done in the Marketrix dashboard. After creating the integration, you can configure:
  • Header and body text — the title and description shown in the widget
  • Greeting message — the initial message users see when they open the widget
  • Quick action chips — shortcut buttons for common user actions
  • Interaction modes — enable or disable Tell, Show, and Do modes
  • Human handoff — allow escalation to a human agent
  • Appearance — colors, position, dimensions, border radius, and more
  • Device visibility — show on desktop, mobile, or both
See Widget Customization for full details on all available settings.

​
Step 3: Deploy to Your Website

Copy the integration code from the dashboard and paste it into your website before the closing </body> tag: 
<script
  src="https://widget.marketrix.ai/standalone.mjs"
  mtx-ai-host="https://agent.marketrix.ai"
  mtx-api-host="https://api.marketrix.ai"
  mtx-id="your-marketrix-id"
  mtx-key="your-marketrix-key"
></script>
The script attributes are:
AttributeRequiredDescription
mtx-idYes (production)Your unique integration identifier
mtx-keyYes (production)Your integration authentication key
mtx-api-hostNoMarketrix API endpoint (defaults to production)
mtx-ai-hostNoMarketrix AI agent endpoint (defaults to production)
The widget fetches all of its configuration (appearance, behavior, modes, etc.) from the API using your mtx-id and mtx-key. There are no other script attributes to set.

​
Development Mode

For local development and testing, you can use mtx-app and mtx-agent attributes instead of mtx-id and mtx-key: 
<script
  src="https://widget.marketrix.ai/standalone.mjs"
  mtx-app="123"
  mtx-agent="456"
  mtx-api-host="https://api.marketrix.ai"
  mtx-ai-host="https://agent.marketrix.ai"
></script>
AttributeRequiredDescription
mtx-appYes (dev mode)Your application ID (integer)
mtx-agentYes (dev mode)Your agent ID (integer)
Use either mtx-id + mtx-key (production) or mtx-app + mtx-agent (development). Do not mix both.

​
Platform-Specific Instructions

HTML websites: Paste the script before the closing </body> tag in your HTML files. WordPress: Add the script to your theme’s footer.php, or use a plugin that allows adding scripts to the footer. Shopify: Add the script to your theme.liquid file before the closing </body> tag. Squarespace / Wix: Use the built-in code injection feature to add the script to your site footer.

​
Step 4: Verify the Integration

  1. Visit your website in a browser
  2. Confirm the widget appears in the configured position
  3. Click the widget to open it
  4. Send a test message and verify the agent responds
  5. Test each enabled interaction mode (Tell, Show, Do)

​
Troubleshooting

​
Widget Not Appearing

  • Verify the script tag is placed before </body>
  • Check the browser console for JavaScript errors
  • Confirm the mtx-id and mtx-key values are correct
  • Ensure the script URL (https://widget.marketrix.ai/standalone.mjs) is not blocked by your CSP or ad blockers

​
Widget Not Responding

  • Check that the application and agent are active in the dashboard
  • Test the agent in the Marketrix playground first
  • Look for network errors in the browser console (failed SSE connections)
  • Verify network connectivity to the AI agent endpoint and the API endpoint

​
Agent Not Using Knowledge

  • Confirm knowledge is assigned to the agent in the dashboard
  • Verify the agent is linked to the correct application
  • Test with questions that directly relate to your uploaded content

​
Next Steps

  1. Customize your widget — fine-tune appearance and behavior
  2. Test your integration — thorough testing checklist
  3. Troubleshoot issues — common problems and solutions