Integrations
Website Widget

Website Widget Integration

The website widget is the most popular way to deploy your Mazaal AI agent, adding a customizable chat interface to your website that allows visitors to get immediate assistance.

Why Use the Website Widget?

Adding the Mazaal AI website widget to your site creates an always-available assistant that can help visitors find information, answer questions, and complete tasks without waiting for human support.

🚀 Instant ROI: The website widget typically delivers the fastest ROI of any integration, reducing support tickets while improving customer satisfaction and conversion rates.

Key Features and Benefits

  • 🎨 Brand Customization: Match your widget's appearance to your website's design with custom colors, logos, and messaging
  • 📱 Mobile Responsive: Automatically adapts to provide an optimal experience on smartphones and tablets
  • ❓ Suggested Questions: Guide users with clickable question suggestions based on page context
  • 📎 File Attachments: Allow users to share screenshots or documents to better explain their needs
  • 🤝 Human Handoff: Seamlessly transfer complex conversations to your support team when needed
  • 👤 Visitor Information: Optionally collect contact details before starting conversations

Setting Up Your Website Widget

Follow these steps to add the Mazaal AI widget to your website:

  1. Access the Deploy Section From your agent's dashboard, navigate to the "Deploy" tab.

  2. Select Website Widget Click on "Website Widget" from the available channel options.

  3. Customize Appearance Configure the widget to match your brand:

    • Set primary and secondary colors
    • Upload your logo
    • Customize the chat bubble icon
    • Set welcome messages and suggested questions

    Widget Customization Interface

  4. Configure Behavior Settings Adjust how the widget behaves:

    • Initial state (open or collapsed)
    • Mobile display options
    • User information collection
    • File attachment settings
    • Human handoff conditions

  5. Get Your Installation Code Once configured, you'll receive a JavaScript code snippet that looks something like this:

    <script>
  window.mazaalConfig = {
    agentId: "your-agent-id",
    position: "bottom-right",
    primaryColor: "#4A90E2",
    welcomeMessage: "Hello! How can I help you today?",
    suggestedQuestions: [
      "What are your business hours?",
      "How do I return a product?",
      "Where is my order?"
    ]
  };
</script>
<script src="https://widget.mazaal.ai/loader.js" async></script>

  6. Add to Your Website Add this code to your website by pasting it before the closing </body> tag in your HTML. If you use a website builder like WordPress, Shopify, or Wix, consult our specific guides for those platforms.

  7. Test Your Integration Visit your website and verify that the chat widget appears and functions correctly. Try asking some test questions to ensure your agent is responding as expected.

Platform-Specific Installation Guides

WordPress Installation

  1. Log in to your WordPress admin dashboard
  2. Go to Appearance > Theme Editor
  3. Select your active theme
  4. Open the footer.php file
  5. Paste your Mazaal AI widget code just before the </body> tag
  6. Click "Update File" to save changes

Alternative method using a plugin:

  1. Install and activate the "Header and Footer Scripts" plugin
  2. Go to Settings > Header and Footer Scripts
  3. Paste your widget code in the "Scripts in Footer" section
  4. Click "Save Changes"

Info: If you're using a page builder like Elementor or Divi, you may need to add the code through their interface instead.

Shopify Installation

  1. Log in to your Shopify admin dashboard
  2. Go to Online Store > Themes
  3. Click the "..." button next to your active theme and select "Edit code"
  4. In the Layout folder, open the theme.liquid file
  5. Paste your Mazaal AI widget code just before the </body> tag
  6. Click "Save"

Warning: Always make a backup of your theme before making code changes. You can duplicate your theme from the Themes page.

Wix Installation

  1. Log in to your Wix dashboard
  2. Go to Settings > Custom Code
  3. Click "Add Custom Code"
  4. Give your code a name (e.g., "Mazaal AI Widget")
  5. Paste your widget code
  6. Set placement to "Body - end"
  7. Select "Load code on each new page"
  8. Click "Apply"

Info: Wix may take a few minutes to apply your custom code changes.

Squarespace Installation

  1. Log in to your Squarespace dashboard
  2. Go to Settings > Advanced > Code Injection
  3. Scroll to the "Footer" section
  4. Paste your Mazaal AI widget code
  5. Click "Save"

Warning: Squarespace's code injection feature is only available on Business and Commerce plans.

Custom HTML Website

  1. Open your website's HTML files in your preferred code editor
  2. Locate the main template or individual pages
  3. Paste your Mazaal AI widget code just before the </body> tag
  4. Save the files and upload them to your web server

Info: If you're using a framework like React, Angular, or Vue, you'll need to adapt the installation method to work with your specific setup.

Advanced Configuration Options

The website widget can be customized beyond the basic settings in the dashboard by adding parameters to your configuration code:

window.mazaalConfig = {
  // Basic settings
  agentId: "your-agent-id",
  position: "bottom-right", // Options: bottom-right, bottom-left, top-right, top-left
  
  // Appearance
  primaryColor: "#4A90E2",
  secondaryColor: "#F5F8FF",
  headerText: "Chat with our AI Assistant",
  logoUrl: "https://yourdomain.com/logo.png",
  
  // Behavior
  initiallyOpen: false,
  showMinimizeButton: true,
  allowAttachments: true,
  maxAttachmentSize: 5, // In MB
  
  // Messages
  welcomeMessage: "Hello! How can I help you today?",
  offlineMessage: "We're currently offline. Leave a message and we'll get back to you.",
  suggestedQuestions: [
    "What are your business hours?",
    "How do I return a product?",
    "Where is my order?"
  ],
  
  // Pre-chat form
  collectUserInfo: true,
  requiredFields: ["name", "email"],
  
  // Advanced
  customCSS: ".mazaal-widget { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }",
  pageRules: [
    {
      urlPattern: "/pricing",
      suggestedQuestions: [
        "Do you offer discounts?",
        "What's included in the Pro plan?",
        "How does billing work?"
      ]
    },
    {
      urlPattern: "/support",
      initiallyOpen: true
    }
  ]
};

Info: For a complete list of configuration options, visit our API Reference page.

Advanced Features

Conditional Display Rules

Control when and where your widget appears based on:

  • Display Conditions/
    • Page URL patterns
    • User behavior (time on site, pages viewed)
    • Referral source
    • Device type (mobile vs. desktop)
    • Geographic location

Example configuration:

window.mazaalConfig = {
  agentId: "your-agent-id",
  // Other basic settings...
  
  displayRules: [
    {
      condition: "url",
      pattern: "/checkout",
      operator: "contains",
      action: "show"
    },
    {
      condition: "timeOnPage",
      value: 30, // seconds
      operator: "greaterThan",
      action: "open"
    },
    {
      condition: "device",
      value: "mobile",
      action: "hide"
    },
    {
      condition: "referrer",
      pattern: "google.com",
      operator: "contains",
      action: "show"
    }
  ]
};

Proactive Engagement

Configure your agent to initiate conversations based on triggers:

window.mazaalConfig = {
  agentId: "your-agent-id",
  // Other basic settings...
  
  proactiveEngagement: [
    {
      trigger: "timeOnPage",
      value: 30, // seconds
      message: "Would you like to see a breakdown of our pricing plans?",
      urlPattern: "/pricing"
    },
    {
      trigger: "pageViews",
      value: 3,
      message: "Need help finding the right product for your needs?",
      urlPattern: "/products"
    },
    {
      trigger: "exitIntent",
      message: "Before you go, can I answer any questions about our services?",
      delay: 1000 // milliseconds
    },
    {
      trigger: "scrollDepth",
      value: 70, // percent
      message: "I see you're exploring our content. Can I help you find something specific?",
      urlPattern: "/blog"
    }
  ]
};

Custom Data Passing

Pass contextual information to your agent to personalize interactions:

window.mazaalConfig = {
  agentId: "your-agent-id",
  // Other basic settings...
  
  userData: {
    name: "{{user.name}}",
    accountType: "{{user.tier}}",
    lastPurchase: "{{user.last_order_date}}"
  }
};

Warning: Never pass sensitive information like passwords or payment details through these parameters. Use secure authentication methods instead.

Real-World Success: E-commerce Case Study

💬 "After adding the Mazaal AI widget to our product pages, we saw a 24% decrease in cart abandonment and a 31% increase in average order value. The agent helps customers find the right products and answers their questions immediately, giving them the confidence to complete their purchases." — Alex Chen, E-commerce Director at TechGear

Implementation

TechGear, an electronics retailer, implemented the Mazaal AI widget across their e-commerce site with specific focus on:

  • Product pages
  • Shopping cart
  • Checkout process
  • Support section

They trained their agent on:

  • Complete product catalog with detailed specifications
  • Compatibility information between products
  • Shipping and return policies
  • Common troubleshooting questions

Configuration

Their advanced configuration included:

  1. Page-specific questions:

    • Product pages: "Is this compatible with...?", "What's the warranty?"
    • Cart page: "Do you offer free shipping?", "What payment methods do you accept?"
    • Checkout: "How long will delivery take?", "Is my payment information secure?"

  2. Proactive engagement:

    • Cart page: After 20 seconds, "Need help completing your order?"
    • Product pages: After viewing 3+ products, "Can I help you find what you're looking for?"
    • Exit intent detection: "Before you go, do you have any questions about the items in your cart?"

  3. Custom data integration:

    • Passed product context to the agent
    • Integrated with inventory system for real-time stock information
    • Connected to shipping API for delivery estimates

Results

After three months with the optimized widget:

  • 24% decrease in cart abandonment rate
  • 31% increase in average order value
  • 67% reduction in support tickets about product specifications
  • 83% of questions answered without human intervention
  • 4.8/5 average rating from customer feedback

The most significant impact came from the widget's ability to immediately answer product compatibility questions and provide personalized recommendations, giving customers the confidence to complete their purchases.

Troubleshooting Common Issues

Widget Not Appearing

If the widget doesn't appear on your site:

  1. Verify the code is properly added to your site before the </body> tag
  2. Check browser console for JavaScript errors
  3. Ensure there are no content security policies blocking the script
  4. Confirm your agent is active in the Mazaal AI dashboard
  5. Try clearing your browser cache or testing in an incognito window

If the problem persists, check if any ad blockers or browser extensions might be interfering with the widget.

Styling Conflicts

If the widget appears but has styling issues:

  1. Check for CSS conflicts with your website's styles
  2. Ensure your theme isn't overriding the widget's z-index
  3. Try adding custom CSS to fix specific issues:
window.mazaalConfig = {
  // Other settings...
  customCSS: ".mazaal-widget { z-index: 9999 !important; }"
};
  1. For persistent issues, try changing the widget's position or using the iframe embedding option

Performance Issues

If the widget is causing performance issues:

  1. Move the script loading to the end of your page
  2. Add the async attribute to the script tag
  3. Consider using the lazy loading option:
window.mazaalConfig = {
  // Other settings...
  lazyLoad: true,
  lazyLoadDelay: 2000 // milliseconds
};
  1. Optimize any custom CSS or JavaScript you've added

Mobile Display Problems

If the widget doesn't display properly on mobile:

  1. Ensure your website is responsive and properly sized on mobile devices
  2. Check if the widget is conflicting with mobile navigation elements
  3. Consider using mobile-specific settings:
window.mazaalConfig = {
  // Other settings...
  mobileSettings: {
    position: "bottom-center",
    height: "70vh",
    initiallyOpen: false
  }
};
  1. Test on multiple devices and browsers to ensure consistent behavior

Next Steps

Now that you've set up your website widget, consider exploring these related topics:

  • 💬 Messenger Integration: Connect your agent to Facebook Messenger and other messaging platforms
  • ⚙️ API Integration: Use our API for custom implementations and advanced use cases
  • ✨ Advanced Features: Explore sophisticated capabilities to enhance your agent's performance
  • 📊 Analytics & Reporting: Measure the impact of your website widget on user engagement and conversions

🚀 Beyond the Widget: The website widget is often just the beginning of your AI agent journey. As you see success with this channel, consider expanding to other platforms where your customers are already active.

Messenger IntegrationAPI Integration