LLM-friendly URL

Chat Component API Reference

Properties

All available properties can be seen in the code snippet below:

index.html

Web component

Angular

React

React Native

Vue

<luzmo-iq-embed-chat
  appServer="< Luzmo App server, defaults to https://app.luzmo.com >"
  apiHost="< Luzmo API server, defaults to https://api.luzmo.com >"
  authKey="< Embed authorization key >"
  authToken="< Embed authorization token >"
  options="< Customization options of the IQ chat component, aligns with IQChatOptions interface >"
  initialSuggestionsDatasetId="< ID of a dataset that should be used to generate initial AI-driven prompts >"
>
</luzmo-iq-embed-chat>

Below you can find a list of all available properties that you can (optionally) specify in the IQ chat component, together with their explanation and possible values:

Parameter	Description
appServer string	Tenancy of Luzmo app to connect to. Defaults to 'https://app.luzmo.com/'. For US multi-tenant application, set `appServer` to 'https://app.us.luzmo.com/'. For dedicated VPC environments, you should point towards your VPC-specific address.
apiHost string	Tenancy of Luzmo API to connect to. Defaults to 'https://api.luzmo.com/'. For US multi-tenant application, set `apiHost` to 'https://api.us.luzmo.com/'. For dedicated VPC environments, you should point towards your VPC-specific address.
authKey uuid	The authorization key (i.e. "id") from the response of the authorization request in your backend.
authToken string	The authorization token from the response of the authorization request in your backend.
options IQChatOptions	The options object can be provided to the IQ chat component to customize its appearance and configure additional settings.
initialSuggestionsDatasetId string	The id of a dataset that can be supplied to the IQ chat component to assist the AI service in generating automated, initial prompts based on the provided data.

Customization

Customization options

The IQChatOptions interface provides a range of configuration options that allow you to customize the appearance and functionalitie of the IQ chat component.

These options help tailor the chat experience to fit specific use cases by controlling elements such as welcome messages, translations, interaction options, and whether to display charts or text summaries.

The table below provides a detailed overview of each configurable parameter and its purpose.

Parameter	Description
areChartActionsEnabled boolean	Determines whether users should be allowed to trigger chart actions that enable them to explore further insights based on the given chart type. Defaults to `true`
areWelcomeMessagesVisible boolean	Specifies whether to display the welcome messages at the chat start. Defaults to `true`
areInitialSuggestionsEnabled boolean	Specifies whether to display the initial suggestions or not. Defaults to `false`
chartTheme ItemThemeConfig	Defines the theme settings for the charts displayed in the component.
chatWidgetHorizontalOffset number	Specifies the horizontal offset for the chat widget overlay position in relation to the chat widget button. Defaults to `5`
chatWidgetOverlayPosition string	Defines the position of the chat widget overlay in relation to the chat widget button.
chatWidgetPosition ConnectedPosition[]	Defines the customized configuration of the chat widget overlay position in relation to the chat widget button.
chatWidgetTitle string	The chat widget title to be displayed at the top of the chat widget container. Defaults to `Ask your data`
chatWidgetVerticalOffset number	Specifies the vertical offset for the chat widget overlay position in relation to the chat widget button. Defaults to `5`
disclaimerText string	Defines the disclaimer text to be displayed if enabled. Uses default text if not specified. Defaults to `Powered by AI. This tool may produce inaccurate information or results.`
displayMode string	Configures the appearance of the chat component as either 'chatWidget' or 'fullChat'. Defaults to `null`
initialSuggestions IQSuggestion[]	Predefined AI prompts displayed at the chat start, which are sent to the AI service upon click.
isChartConfigurationEnabled boolean	Specifies whether users can configure charts via the chart configuration panel. Defaults to `true`
isChartExportEnabled boolean	Specifies whether exporting charts as PNGs, XLSXs and CSV (Where supported) should be enabled for users. Defaults to `false`
isChartFeedbackEnabled boolean	Enables feedback, allowing users to rate responses and suggest corrections. Defaults to `true`
isConversationIdVisible boolean	Displays the conversation ID for reporting or feedback purposes. Defaults to `false`
isDisclaimerVisible boolean	Determines if the disclaimer text is shown in the chat. Defaults to `true`
locale string	Specifies the locale for localizing text elements and chart configurations. Accepts values: 'de', 'en', 'es', 'fr', 'it', 'ja', 'nl', 'no', 'pt', 'ru', 'sv', 'tr'.
responseMode string	Specifies the response format as 'chart', 'text', or 'mixed'. Defaults to `mixed`
timezone string	Specifies the timezone for displaying timestamps in charts. Accepts any valid timezone string like `Europe/Brussels`, `Pacific/Auckland`
welcomeMessages IQMessage[]	Array of welcome messages displayed at the chat start, which follow the IQMessage interface.

CSS Variables

The following CSS variables can be used to customize various aspects of the Luzmo IQ chat component. They are grouped based on their functionality, such as general styling, chat appearance, bubble styles, messages, and feedback.

General Styling

These variables control the overall appearance of elements like borders, background colors, font sizes, and spacing.

css

--luzmo-iq-background-active-color: #f1f5f9;      /* Background color when active */
--luzmo-iq-background-color: #ffffff;             /* Default background color */
--luzmo-iq-background-hover-color: #f8fafc;       /* Background color on hover */
--luzmo-iq-border-color: rgba(0,0,0,.1);          /* Border color */
--luzmo-iq-border-radius-full: 999rem;            /* Full (circle) border radius */
--luzmo-iq-border-radius-lg: .75rem;              /* Large border radius */
--luzmo-iq-border-radius-xl: 1rem;                /* Extra-large border radius */
--luzmo-iq-border-radius: .5rem;                  /* Standard border radius */
--luzmo-iq-border-width: 1px;                     /* Standard border width */
--luzmo-iq-font-color: #333;                      /* Default font color */
--luzmo-iq-font-size: .875rem;                    /* Default font size */
--luzmo-iq-font-weight: 400;                      /* Standard font weight */
--luzmo-iq-spacing-1: .125rem;                    /* Small spacing */
--luzmo-iq-spacing-5: 1rem;                       /* Large spacing */

Chat Widget Styling

These variables customize the appearance and size of the chat widget.

css

--luzmo-iq-chat-widget-background: blue;          /* Default background color of the chat widget */
--luzmo-iq-chat-widget-color: white;              /* Default text color in the chat widget */
--luzmo-iq-chat-widget-height: 4rem;              /* Chat widget height */
--luzmo-iq-chat-widget-icon-size: 1.75rem;        /* Default icon size in the chat widget */
--luzmo-iq-chat-widget-width: 4rem;               /* Chat widget width */

Chat Container Styling

These variables control the dimensions and layout of the chat container, both for desktop and mobile.

css

--luzmo-iq-chat-container-max-height: 90vh;       /* Maximum height of the chat container */
--luzmo-iq-chat-container-max-width: 90vw;        /* Maximum width of the chat container */
--luzmo-iq-chat-container-width: 45rem;           /* Chat container width */
--luzmo-iq-chat-header-background: black;         /* Default background color of the chat header */
--luzmo-iq-chat-header-color: white;              /* Default text color in the chat header */
--luzmo-iq-chat-header-height: 3.5rem;            /* Chat header height */

Messages Styling

These variables define the appearance of both human and system messages in the chat.

css

--luzmo-iq-human-message-background: blue;                  /* Default background color for human messages */
--luzmo-iq-human-message-color: white;                      /* Default text color for human messages */
--luzmo-iq-system-message-background: rgb(226, 232, 240);   /* Default background for system messages */
--luzmo-iq-system-message-color: #333;                      /* Default text color for system messages */

State Loader and Spinner Styling

These variables are used for customizing the appearance of state loaders and spinners within the chat component.

css

--luzmo-iq-spinner-border-width: .125rem;         /* Default spinner border width */
--luzmo-iq-spinner-color: magenta;                /* Default spinner color */
--luzmo-iq-spinner-opacity: .5;                   /* Default spinner opacity */
--luzmo-iq-state-loader-background: #778393;      /* Default background color of the loader */
--luzmo-iq-state-loader-color: #333;              /* Default text color for the loader */

Suggestions Styling

These variables are used to customize the appearance of the AI suggestions in the chat component.

css

--luzmo-iq-suggestion-background-color: rgb(233, 231, 255);         /* Default background color of suggestions */
--luzmo-iq-suggestion-background-hover-color: rgb(199, 194, 255);   /* Default background color on hover */
--luzmo-iq-suggestion-border-width: 0;                              /* Default border width for suggestions */

Feedback and Ratings

These variables control the appearance of feedback icons and rating elements.

css

--luzmo-iq-info-icon-size: 1rem;                                    /* Default size of the info icons */
--luzmo-iq-negative-feedback-icon-hover-color: rgb(216, 64, 64);    /* Default hover color for negative feedback */
--luzmo-iq-positive-feedback-icon-hover-color: rgb(20, 120, 63);    /* Default hover color for positive feedback */
--luzmo-iq-rating-icon-size: 1rem;                                  /* Default size of the rating icons */

Tooltips

These variables are used to adjust the appearance of tooltips.

css

--luzmo-iq-tooltip-background-color: #000;     /* Tooltip background color, defaults to #000 (black) */
--luzmo-iq-tooltip-color: #fff;                /* Tooltip text color, defaults to #fff (white) */
--luzmo-iq-tooltip-font-size: 0.8125rem;       /* Tooltip font size, defaults to 0.8125rem */

Changing the chat bubble icon

A slot named custom-chat-widget-content has to be overriden to change the chat bubble icon.

index.html

Web component

Angular

React

React Native

Vue

<luzmo-iq-embed-chat
 ...options
>

  <svg slot="custom-chat-widget-content" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 1024 1024" class="icon" version="1.1"><path d="M978.578286 900.461714l-108.617143-108.617143c30.134857-39.570286 48.274286-88.795429 48.274286-142.189714a235.739429 235.739429 0 0 0-235.52-235.373714 235.739429 235.739429 0 0 0-235.373715 235.373714 235.739429 235.739429 0 0 0 235.446857 235.52c53.467429 0 102.692571-18.139429 142.189715-48.274286l108.617143 108.544a31.524571 31.524571 0 0 0 44.836571 0 31.744 31.744 0 0 0 0.146286-44.982857zM510.902857 649.654857a172.105143 172.105143 0 0 1 171.885714-171.885714 171.885714 171.885714 0 0 1 0 343.771428 172.178286 172.178286 0 0 1-171.885714-171.885714z m270.262857-378.514286c0 17.554286-14.262857 31.744-31.817143 31.744H431.396571a31.744 31.744 0 0 1 0-63.488h317.952c17.554286 0 31.817143 14.189714 31.817143 31.744z m-609.426285 620.032h211.968a31.890286 31.890286 0 0 1 0 63.634286H171.739429c-58.368 0-106.057143-47.542857-106.057143-106.057143V283.062857c0-14.262857 5.12-28.086857 14.262857-39.058286L240.420571 53.101714a57.417143 57.417143 0 0 1 43.885715-20.48h517.997714c58.441143 0 106.057143 47.542857 106.057143 106.057143V366.445714a31.744 31.744 0 0 1-63.634286 0V138.605714a42.422857 42.422857 0 0 0-42.276571-42.349714H336.018286V280.137143a50.688 50.688 0 0 1-50.980572 50.176H129.389714v518.509714c0 23.332571 19.017143 42.349714 42.349715 42.349714zM272.457143 113.810286l-128.512 152.868571h128.512v-152.868571z m79.506286 476.16a31.744 31.744 0 0 0 0-63.634286H240.64a31.744 31.744 0 0 0 0 63.634286h111.323429z m0 146.066285a31.744 31.744 0 0 0 0-63.561142H240.64a31.744 31.744 0 0 0 0 63.561142h111.323429z m31.744-353.206857H240.64a31.744 31.744 0 0 0 0 63.561143h143.067429a31.744 31.744 0 0 0 0-63.561143z" fill="#ffffff"/></svg>

</luzmo-iq-embed-chat>

Types

The following types are exported by the libraries:

index.ts

Web component

Angular

React

React Native

Vue

import {
  IQChatOptions,
  IQMessage,
  IQSuggestion
} from '@luzmo/embed';

Did this page help you?

Yes