@gail-ai/conversation-embed

From the makers of Gail, comes a package so cool you'll want to use it on your website. You'll have your customers in awe of your AI-powered Gail assistant!

A chat embed and widget for the Gail chat channel that allows users to chat with a Gail that you have setup in the Gail Portal.

This package is a Web Component that encapsulates the Gail chat channel and widget. It is designed to be used in a variety of frameworks and environments and will work with any framework on any modern browser.

Installation

npm install @gail-ai/conversation-embed

CDN

<script src='https://unpkg.com/@gail-ai/conversation-embed' type='module'></script>

<gail-chat />

A chat embed for the Gail chat channel that allows users to chat with a Gail that you have setup in the Gail Portal on your assistants page.

This will expand to fill the open space given to it so it can appear seamless on your website.

Inline Chat Example

<gail-chat
  org-id="your-org-id"
  assistant-id="your-assistant-id" />

Required Props

| Property | Type | Description | |---|---|---| | assistant-id | string | The Assistant ID | org-id | string | The Organization ID

Optional Props

| Property | Type | Description | Default | |---|---|---|---| | color | string | The color of the buttons and highlights in hex format i.e. #0F0 or #0062e2 | "#0062e2" | | custom-image-url | string | The URL of the custom image to use for the widget icon | "" | | show-welcome-message | boolean | True if the chat should show the welcome message, false will show the default input / How can I help text | true | | user-reference | string | The user reference to use for the chat, advanced feature for identifying users | "" | | user-session | string | The session id to use for the chat, advanced feature for authenticating users | null | | verbose | string | When "true", displays configuration errors. When "false" (default), errors are hidden. | "false" |

<gail-drawer />

A drawer component for the Gail chatbot that slides in from the left or right side of the screen. Provides a chat interface that can be expanded to fullscreen.

Required Props Example Example

<gail-drawer
  org-id="your-org-id"
  assistant-id="your-assistant-id"/>

All Props Example Example

<gail-drawer
  org-id="your-org-id"
  assistant-id="your-assistant-id"
  position="right"
  default-width="400"
  default-height="600"
  color="#0062e2"
  chat-title="Chat with Gail">
</gail-drawer>

Required Props

| Property | Type | Description | |---|---|---| | assistant-id | string | The Assistant ID | org-id | string | The Organization ID

Optional Props

| Property | Type | Description | Default | |---|---|---|---| | chat-title | string | Chat Window Title | "Chat with Gail" | | color | string | The color of the buttons and highlights in hex format i.e. #0F0 or #0062e2 | "#0062e2" | | custom-image-url | string | The URL of the custom image to use for the drawer icon | "" | | default-width | number | The width of the drawer (in pixels) | 400 | | icon-position | "bottom-left" "bottom-right" "center-left" "center-right" "top-left" "top-right" | The position of the widget on the page | "bottom-right" | | position | "left" "right" | The position of the drawer on the page (left or right) | "right" | | show-welcome-message | boolean | True if the chat should show the welcome message, false will show the default input / How can I help text | true | | user-reference | string | The user reference to use for the chat, advanced feature for identifying users | "" | | user-session | string | The session id to use for the chat, advanced feature for authenticating users | null | | verbose | string | When "true", displays configuration errors. When "false" (default), errors are hidden. | "false" |

<gail-widget />

A widget for the Gail chatbot that allows users to chat with a Gail that you have setup in the Gail Portal on your assistants page.

Required Props Example Example

<gail-widget
  org-id="your-org-id"
  assistant-id="your-assistant-id"/>

All Props Example Example

<gail-widget
  org-id="your-org-id"
  assistant-id="your-assistant-id"
  position="bottom-right"
  icon-size="60"
  default-width="350"
  default-height="500">
</gail-widget>

Required Props

| Property | Type | Description | |---|---|---| | assistant-id | string | The Assistant ID | org-id | string | The Organization ID

Optional Props

| Property | Type | Description | Default | |---|---|---|---| | chat-title | string | Chat Window Title | "Chat with Gail" | | color | string | The color of the buttons and highlights in hex format i.e. #0F0 or #0062e2 | "#0062e2" | | custom-image-url | string | The URL of the custom image to use for the widget icon | "" | | default-height | number | The height of the small chat window (in pixels) | 500 | | default-width | number | The width of the small chat window (in pixels) | 350 | | icon-size | number | The size of the widget icon (in pixels) | 60 | | position | "bottom-center" "bottom-left" "bottom-right" "center-left" "center-right" "top-center" "top-left" "top-right" | The position of the widget on the page | "bottom-right" | | show-welcome-message | boolean | True if the chat should show the welcome message, false will show the default input / How can I help text | true | | user-reference | string | The user reference to use for the chat, advanced feature for identifying users | "" | | user-session | string | The session id to use for the chat, advanced feature for authenticating users | null | | verbose | string | When "true", displays configuration errors. When "false" (default), errors are hidden. | "false" |