Dori Chat Widget

Dori Chat Widget is a lightweight, highly customizable chat interface for integrating the Dori AI chatbot into any website. It provides a modern, responsive user experience with support for product displays, markdown, real-time streaming, and more. The widget is designed to be easy to install, configure, and extend, making it ideal for businesses, e-commerce, and support sites.

Table of Contents

• Features
• Demo
• Installation
• Quick Start
• Usage
• Customization
• Configuration Options
• Advanced Integration
• Contributing
• License

Features

• 🎨 Modern, responsive design – Looks great on all devices
• 📱 Mobile-friendly – Touch-optimized UI
• ✨ Markdown support – Rich text formatting in chat
• 🔄 Real-time streaming – See bot responses as they're generated
• 🎯 Suggested replies – Quick reply buttons for users
• 🛍️ Product carousel – Showcase products directly in chat
• 🌐 RTL language support – Perfect for Persian, Arabic, Hebrew, etc.
• 🔌 Easy integration – Add to any website with a single script
• ⚡ Lightweight – Minimal impact on page load
• 🛡️ Secure – No user data stored on client

Demo

Try a live demo at Dori.tech.

Installation

Add the widget to your website by including the script tag in your HTML:

<script src="https://unpkg.com/dori-chat-widget@latest/dist/script.js"></script>

Or, if you use npm/yarn:

npm install dori-chat-widget
# or
yarn add dori-chat-widget

Quick Start

You can use the widget in two ways:

1. Using a global variable

1. Get your Sharing ID
   Sign up at Dori.tech and create your bot. Copy your unique Sharing ID from the dashboard.

2. Initialize the Widget
   Add this to your HTML, before the widget script:

   <script>
     window.SHARING_ID = 'your-sharing-id';
   </script>
   <script src="https://unpkg.com/dori-chat-widget@latest/dist/script.js"></script>

2. Using the data-sharing-id attribute (recommended for HTML-only integration)

<script type="text/javascript" id="dori-chatbot-script" data-sharing-id="your-sharing-id" src="https://unpkg.com/dori-chat-widget@latest/dist/script.js"></script>

3. Done!
   The chat widget will appear as a floating button in the bottom-right corner of your website.

Usage

• Open the chat by clicking the floating button.
• Type your message and press Enter or click Send.
• Interact with suggested replies or product cards as provided by your bot.

Customization

The widget automatically adapts to your bot's configuration, including:

• Bot avatar and name
• Welcome message
• Suggested replies
• Product carousels
• RTL/LTR layout
• Custom text strings
• Theme colors (primary, background, etc.)

All these settings are managed through your Dori dashboard.

⚠️ Note on Styling and Shadow DOM

This widget is rendered inside a Shadow DOM.

This means that global CSS styles and variables from your website will not affect the widget's appearance. To customize the look and feel, please use the configuration options available in your Dori dashboard. If you need additional customization, contact Dori support to request new features or theming options.

Configuration Options

The widget reads the following properties from your bot configuration:

| Property | Type | Description | |-----------------------|----------------|---------------------------------------------| | bot_image | string | URL of the bot's avatar image | | wellcomeMessage | string | Initial message displayed when chat opens | | suggestedReply | string/array | Pre-defined reply options | | texts.isRTL | boolean | Enable RTL layout | | texts.chatWithUs | string | Chat header text | | texts.inputPlaceholder | string | Input field placeholder | | texts.buttonText | string | Send button text | | texts.typing | string | Typing indicator text | | texts.error | string | Error message text | | currency | string | Currency symbol for product cards | | country | string | Country code for localization |

Advanced Integration

• Programmatic Control:
  You can open/close the widget or send messages programmatically by calling methods on window.DoriChatWidget (see docs for details).

• Custom Event Hooks:
  Listen for events such as onOpen, onClose, or onMessage for deeper integration.

• Analytics:
  The widget can be integrated with analytics tools for tracking user engagement.

Contributing

We welcome contributions! Please open issues or pull requests on GitHub for bug reports, feature requests, or improvements.

License

MIT © Dori Tech

For more information, visit Dori.tech or contact [email protected].