Web Widget

Add a live support widget to your website to communicate with your visitors.

Overview

Web Widget features:

• Live chat
• AI-powered responses
• File sharing
• Multi-language support
• Mobile-friendly design
• Customizable appearance

Setup

1. Getting the Widget Code

1. Go to Settings > Channels > Widget
2. Configure widget settings
3. Click the Copy Code button

2. Adding to Your Website

Add the code before your site's </body> tag:

<script>
  (function(d, w) {
    var s = d.createElement('script');
    s.src = 'https://widget.dolu.ai/loader.js';
    s.async = true;
    s.dataset.widgetId = 'YOUR_WIDGET_ID';
    d.body.appendChild(s);
  })(document, window);
</script>

3. Verification

Visit your website to verify that the widget is visible.

Customization

Colors

• Primary color
• Background color
• Text color
• Button color

Position

Select the widget position:

• Bottom right (default)
• Bottom left
• Top right
• Top left

Size

• Small (320px)
• Medium (380px)
• Large (420px)

Language

Set the widget language:

• Turkish
• English
• Arabic
• Automatic (based on browser language)

Widget Features

Welcome Message

Message displayed when the page opens:

Hello! How can we help you?

Pre-chat Form

Collect information before the chat:

• Full Name
• Email
• Phone
• Subject

Offline Form

Form for outside business hours:

• Leave a message
• Request a callback
• Contact via email

AI Integration

The AI Agent can be active in the widget:

AI Responses

• Automatic greeting
• FAQ answers
• Product information
• Routing

Human Handoff

If the AI cannot respond:

• "Talk to an agent" button
• Automatic transfer
• Send notification

Proactive Messages

Send automatic messages to visitors:

Triggers

• When the page opens (after X seconds)
• On a specific page
• On exit intent
• At scroll percentage

Example Scenarios

// Show message after 30 seconds
{
  trigger: 'time',
  delay: 30000,
  message: 'Do you need help?'
}

// On pricing page
{
  trigger: 'page',
  url: '/pricing',
  message: 'Would you like to ask about pricing?'
}

Visitor Tracking

Visitor information through the widget:

• Current page
• Visit duration
• Browser information
• Location (IP-based)
• Referral source

Mobile Compatibility

Widget on mobile devices:

• Full screen mode
• Touch-friendly buttons
• Mobile keyboard support
• Responsive design

Advanced Settings

JavaScript API

Control the widget programmatically:

// Open widget
DoluWidget.open();

// Close widget
DoluWidget.close();

// Send message
DoluWidget.sendMessage('Hello!');

// Set visitor information
DoluWidget.setVisitor({
  name: 'John',
  email: '[email protected]'
});

// Listen for events
DoluWidget.on('message', function(msg) {
  console.log('New message:', msg);
});

Custom Events

Track widget events:

• widget:open - Widget opened
• widget:close - Widget closed
• message:sent - Message sent
• message:received - Message received
• conversation:started - Conversation started

Performance

Widget performance tips:

• Asynchronous loading
• Lazy loading
• Minimum bundle size
• CDN usage

Troubleshooting

Widget Not Showing

• Check that the code is added in the correct location
• Check for JavaScript errors
• Make sure the Widget ID is correct

Messages Not Delivered

• Check internet connection
• Check firewall settings
• Review console errors

Style Conflicts

• Check CSS specificity issues
• Use a dedicated container for the widget
• Override with !important

Best Practices

1. Fast loading: Widget performance matters
2. Correct placement: Where customers can easily access
3. Brand-aligned: Match colors with your site
4. Proactive messages: But don't spam
5. Mobile testing: Test on all devices