@genial-factory/response-bar

A customizable React component that adds a floating response bar to your website, allowing users to interact with the Genial Engine through a clean and modern interface.

Usage

Add the following script tag to your HTML:

<div id="search-widget"></div>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script
    id="search-widget-script"
    src="path/to/bundle.js"
    data-icon-url="https://your-icon-url.com/icon.png"
    data-icon-width="1.5"
    data-icon-height="1.5"
    data-suggested-questions="How can I help you?,Ask me anything...,What's on your mind?"
    data-hover-color="#3B82F6"
    data-open-type="blank"
    data-engine-id="your-engine-id"
    data-base-url="https://your-base-url.com">
</script>

Configuration

The response bar can be customized using the following data attributes:

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | data-icon-url | string | https://cdn.wearegenial.com/favicon.png | URL of the icon to display in the response bar | | data-icon-width | number | 1.5 | Width of the icon in rem units | | data-icon-height | number | 1.5 | Height of the icon in rem units | | data-suggested-questions | string | "How can I help you?,Ask me anything...,What's on your mind?" | Comma-separated list of placeholder questions | | data-hover-color | string | #3B82F6 | Color used for hover states and focus rings | | data-open-type | string | blank | Where to open links (blank for new tab, self for same tab) | | data-engine-id | string | default | ID of the Genial Engine instance | | data-base-url | string | https://engine.demo.wearegenial.com | Base URL of the Genial Engine |

Features

• 🎨 Customizable appearance with icon and color options
• 💬 Rotating suggested questions
• 🔄 Smooth animations and transitions
• 📱 Responsive design
• 🎯 Configurable link opening behavior