Widget Integration

​

Before You Start

• A Marketrix account with at least one connection
• At least one agent created and tested
• Knowledge uploaded to your connection
• Access to your website’s HTML or content management system

​

Step 1: Navigate to Integrations

1. Log into your Marketrix account at app.marketrix.ai
2. Click “Integrations” in the left sidebar
3. Click “Create Integration” button

​

Step 2: Choose Integration Type

1. Select “Widget” as the integration type
2. Click “Continue”

​

Step 3: Basic Integration Setup

​

Integration Name

• “Website Support Widget”
• “Customer Service Chat”
• “Product Help Assistant”
• “Sales Support Widget”

• Choose a name that clearly describes the integration
• Use a name that helps you identify it later
• Consider including the website or purpose

​

Connection Selection

1. Choose the connection where your agent and knowledge are stored
2. Verify the connection is correct and active
3. Click “Continue”

​

Agent Selection

1. Select the agent you want to use for this integration
2. Verify the agent is linked to the selected connection
3. Click “Continue”

​

Step 4: Widget Configuration

​

Widget Header

• “How can we help you?”
• “Chat with our support team”
• “Need help? We’re here!”
• “Ask us anything”

• Use a friendly, welcoming tone
• Make it clear what users can expect
• Keep it concise and clear

​

Widget Greeting

• “Hello! I’m here to help. What can I do for you today?”
• “Hi there! I can help you with questions about our products and services.”
• “Welcome! I’m your personal assistant. How can I help you today?”
• “Hello! I’m here to answer your questions and help you find what you need.”

• Set a friendly, helpful tone
• Explain what the agent can help with
• Make users feel welcome and supported

​

Interaction Modes

• ✅ Enable by default - Perfect for customer support
• Handles most common questions
• Provides information and answers

• ⚠️ Optional - Enable for tutorial and guidance
• Great for user onboarding
• Shows step-by-step processes

• ⚠️ Optional - Enable for task automation
• Handles form filling and processes
• Performs actions on behalf of users

• Customer Support: Tell + Show
• Sales Support: Tell + Show + Do
• User Onboarding: Show + Do
• General Assistant: Tell + Show + Do

​

Step 5: Widget Appearance

​

Widget Colors

• Choose a color that matches your brand
• Use your brand’s primary color
• Ensure good contrast for readability

• Use a complementary color
• Consider your brand’s secondary colors
• Ensure good visual hierarchy

​

Widget Position

• Bottom Right (Recommended) - Most common and accessible
• Bottom Left - Alternative positioning
• Top Right - Less common but effective
• Top Left - Alternative positioning

• Bottom right is most familiar to users
• Ensure the widget doesn’t interfere with your content
• Test on different screen sizes

​

Widget Size

• Small - Compact, minimal footprint
• Medium (Recommended) - Good balance of size and usability
• Large - More prominent, easier to use

• Medium size works well for most websites
• Consider your website’s layout and design
• Test on different devices and screen sizes

​

Step 6: Advanced Settings

​

Widget Behavior

• Don’t auto-open (Recommended) - Let users choose when to open
• Auto-open after delay - Open automatically after a few seconds
• Auto-open on scroll - Open when user scrolls down the page

• Don’t auto-open to avoid being intrusive
• Let users choose when they need help
• Consider your website’s user experience

​

Widget Triggers

• Always show (Recommended) - Available on all pages
• Show on specific pages - Only on certain pages
• Show after user action - After user performs specific actions

• Always show for maximum accessibility
• Consider your website’s user journey
• Test different trigger options

​

Widget Customization

• Show agent name - Display the agent’s name in the widget
• Show agent avatar - Display the agent’s avatar
• Enable sound notifications - Play sounds for new messages
• Enable typing indicators - Show when the agent is typing

• Show agent name and avatar for personalization
• Enable sound notifications for better user experience
• Use typing indicators to show responsiveness

​

Step 7: Review and Create

1. Review all configuration settings
2. Check that the connection and agent are correct
3. Verify the widget appearance matches your brand
4. Ensure interaction modes are appropriate for your use case
5. Click “Create Integration”

​

Step 8: Get Your Integration Code

​

Integration Code

<script 
  src="https://your-domain.com/integration/1/widget.js"
  data-marketrix-id="your-marketrix-id"
  data-marketrix-key="your-marketrix-key"
  data-position="bottom-right"
  data-theme="light"
  data-agent-name="Support Assistant"
  data-enabled-modes="show,tell,do">
</script>

​

Code Components

​

Step 9: Deploy to Your Website

​

Add the Code to Your Website

1. Copy the integration code provided
2. Open your website’s HTML or content management system
3. Paste the code before the closing </body> tag
4. Save and publish your website

​

Where to Add the Code

• Add before the closing </body> tag
• Can be added to any page where you want the widget
• Add to all pages for site-wide availability

• WordPress: Add to footer.php or use a plugin
• Shopify: Add to theme.liquid or use an app
• Squarespace: Add to site header or footer
• Wix: Add to site header or footer

• Custom websites: Add to your HTML template
• E-commerce platforms: Add to your theme files
• Web applications: Add to your main layout

​

Step 10: Test Your Integration

​

Test on Your Website

1. Visit your website in a web browser
2. Look for the widget in the specified position
3. Click the widget to open it
4. Send a test message to verify it works
5. Check that your agent responds correctly

​

Test Different Scenarios

• Widget appears and opens correctly
• Agent responds to messages
• Conversation flows smoothly
• Widget closes and reopens properly

• Test Tell mode with questions
• Test Show mode with guidance requests
• Test Do mode with action requests
• Verify all modes work as expected

• Test on desktop computers
• Test on mobile devices
• Test on tablets
• Verify responsive design works

​

Common Integration Issues

​

Widget Not Appearing

• Check that the code is correctly placed
• Verify the script URL is accessible
• Check for JavaScript errors in browser console
• Ensure the code is before the closing </body> tag

​

Widget Not Responding

• Check that the connection and agent are active
• Verify the integration is properly configured
• Test the agent in the playground first
• Check for network connectivity issues

​

Widget Appearance Issues

• Review widget color and appearance settings
• Check that your brand colors are correctly set
• Verify widget size and position settings
• Test on different devices and browsers

​

Agent Not Using Knowledge

• Check that knowledge is properly assigned to the agent
• Verify the agent is linked to the correct connection
• Ensure knowledge content is relevant to questions
• Test with questions that should use your knowledge

​

Integration Best Practices

​

Design and Appearance

• Use your brand colors and fonts
• Include your logo and branding
• Maintain consistent design language
• Create professional appearance

• Make widget easy to find and use
• Ensure clear, readable text
• Use appropriate sizing and positioning
• Test on different devices

​

Content and Behavior

• Use descriptive widget text
• Explain what the agent can help with
• Set appropriate interaction modes
• Provide clear instructions

• Test with real user scenarios
• Gather feedback on usability
• Continuously improve based on usage
• Monitor performance and effectiveness

​

Next Steps

1. Customize your widget - Fine-tune appearance and behavior
2. Test your integration - Ensure everything works correctly
3. Monitor performance - Track usage and effectiveness
4. Improve over time - Continuously enhance your agents

​

Getting Help

• Check the troubleshooting guide for common issues
• Review integration documentation for detailed information
• Test your integration thoroughly before going live
• Contact support for additional help