Sets or gets the brand accent colour used for the send button, the user message bubbles, the avatars and the popup launcher. Accepts any CSS colour. When null, the default indigo accent is used.

Code examples

Set the accentColor property.

$('#jqxChat').jqxChat({ accentColor: '#0ea5e9' });

Get the accentColor property.

var accentColor = $('#jqxChat').jqxChat('accentColor');

Code example:

accentColor is set to '#0ea5e9'

$('#myChat').jqxChat({accentColor: #0ea5e9});

Sets or gets the platform key used to authenticate requests to the AI provider. Security note: a key set here is used to call the provider directly from the browser and is therefore exposed - this is intended for local trials only. In production, leave apiKey empty and use proxyUrl or sendRequest so your own backend holds the key.

Code examples

Set the apiKey property.

$('#jqxChat').jqxChat({ apiKey: 'sk-ant-...' });

Code example:

apiKey is set to the platform key

$('#myChat').jqxChat({apiKey: YOUR_KEY});

Sets or gets the assistant avatar image. Accepts any image URL or data-URI. When null, a themed circle with the first letter of botName is shown.

Code example:

botAvatar is set to an image URL

$('#jqxChat').jqxChat({ botAvatar: 'https://example.com/bot.png' });

Sets or gets the display name of the assistant, shown in the message meta and used for the assistant avatar initial.

Code example:

botName is set to 'Nova'

$('#jqxChat').jqxChat({ botName: 'Nova' });

Sets or gets the colour scheme of the chat. Possible values: 'auto' (follow the operating system preference), 'light' and 'dark'. The scheme is applied independently of the jqWidgets theme.

Code examples

Set the colorScheme property.

$('#jqxChat').jqxChat({ colorScheme: 'dark' });

Get the colorScheme property.

var colorScheme = $('#jqxChat').jqxChat('colorScheme');

Code example:

colorScheme is set to 'dark'

$('#myChat').jqxChat({colorScheme: dark});

Sets or gets whether the chat is disabled. When disabled, the input and send button are inactive.

Code examples

Set the disabled property.

$('#jqxChat').jqxChat({ disabled: true });

Get the disabled property.

var disabled = $('#jqxChat').jqxChat('disabled');

Code example:

disabled is set to true

$('#myChat').jqxChat({disabled: true});

Sets or gets whether the header shows the 'New chat' action button that clears the conversation.

Code example:

enableClear is set to false

$('#jqxChat').jqxChat({ enableClear: false });

Sets or gets whether a 'Copy' button is shown on fenced code blocks in assistant messages.

Code example:

enableCopyCode is set to false

$('#jqxChat').jqxChat({ enableCopyCode: false });

Sets or gets whether the send button turns into a 'Stop' button while the assistant is generating a response. When stopped, any text streamed so far is preserved.

Code example:

enableStop is set to false

$('#jqxChat').jqxChat({ enableStop: false });

Sets or gets an object of additional HTTP headers merged into the outgoing request to the provider or proxy.

Code example:

headers adds a custom request header

$('#jqxChat').jqxChat({ headers: { 'x-tenant-id': 'acme' } });

Sets or gets the chat's height.

Code examples

Set the height property.

$('#jqxChat').jqxChat({ height: 600 });

Get the height property.

var height = $('#jqxChat').jqxChat('height');

Code example:

height is set to 600

$('#myChat').jqxChat({height: 600});

Sets or gets custom HTML/SVG markup for the popup launcher button. Applies only when mode is 'popup'. When null, a default chat-bubble icon is used.

Code example:

launcherIcon is set to custom markup

$('#jqxChat').jqxChat({ launcherIcon: '<svg>...</svg>' });

Sets or gets the screen corner of the popup launcher button and panel. Possible values: 'bottom-right' and 'bottom-left'. Applies only when mode is 'popup'.

Code example:

launcherPosition is set to 'bottom-left'

$('#jqxChat').jqxChat({ mode: 'popup', launcherPosition: 'bottom-left' });

Sets or gets the upper bound on the number of tokens in the assistant's response, sent to the provider as max_tokens.

Code example:

maxTokens is set to 2048

$('#jqxChat').jqxChat({ maxTokens: 2048 });

Sets or gets the conversation as an array of message objects of the form { role: 'user' | 'assistant', content: string }. Setting this property replaces the current conversation.

Code examples

Set the messages property.

$('#jqxChat').jqxChat({ messages: [ { role: 'assistant', content: 'Hello!' } ] });

Get the messages property.

var messages = $('#jqxChat').jqxChat('messages');

Code example:

messages seeds the conversation with a greeting

$('#myChat').jqxChat({messages: [ { role: 'assistant', content: 'Hello!' } ]});

Sets or gets the display mode. Possible values: 'inline' (the chat is an embedded panel) and 'popup' (a floating launcher button in the page corner opens the chat panel).

Code examples

Set the mode property.

$('#jqxChat').jqxChat({ mode: 'popup' });

Code example:

mode is set to 'popup'

$('#myChat').jqxChat({mode: popup});

Sets or gets the model identifier sent to the provider. When null, a per-provider default is used ('claude-opus-4-8' for anthropic, 'gpt-4o-mini' for openai).

Code example:

model is set to 'claude-opus-4-8'

$('#jqxChat').jqxChat({ model: 'claude-opus-4-8' });

Sets or gets whether the popup panel is open. Applies only when mode is 'popup'. Setting it to true opens the panel and hides the launcher; false collapses back to the launcher.

Code example:

open is set to true

$('#jqxChat').jqxChat({ open: true });

Sets or gets the placeholder text shown in the message input.

Code example:

placeHolder is set to 'Ask me anything...'

$('#jqxChat').jqxChat({ placeHolder: 'Ask me anything...' });

Sets or gets the AI provider adapter. Possible values: 'anthropic' (Anthropic Claude), 'openai' (OpenAI) and 'custom'. Custom adapters can be registered on $.jqx._jqxChat.adapters, or transport can be fully replaced with the sendRequest callback.

Code examples

Set the provider property.

$('#jqxChat').jqxChat({ provider: 'openai' });

Code example:

provider is set to 'openai'

$('#myChat').jqxChat({provider: openai});

Sets or gets a URL to POST the request to instead of calling the provider directly. Recommended for production: your backend holds the platform key and forwards the request to the provider, keeping the key out of the browser.

Code example:

proxyUrl routes requests through the app backend

$('#jqxChat').jqxChat({ proxyUrl: '/api/chat' });

Sets or gets a value indicating whether the widget's layout is aligned to support locales using right-to-left fonts.

Code examples

Set the rtl property.

$('#jqxChat').jqxChat({ rtl: true });

Get the rtl property.

var rtl = $('#jqxChat').jqxChat('rtl');

Code example:

rtl is set to true

$('#myChat').jqxChat({rtl: true});

Sets or gets whether the send button is rendered as a circular icon (true) or as a text label using sendButtonLabel (false).

Code example:

sendButtonIcon is set to false

$('#jqxChat').jqxChat({ sendButtonIcon: false });

Sets or gets the text label of the send button when sendButtonIcon is false. Also used as the button's tooltip.

Code example:

sendButtonLabel is set to 'Ask'

$('#jqxChat').jqxChat({ sendButtonIcon: false, sendButtonLabel: 'Ask' });

Sets or gets a callback that fully controls transport: function(payload, widget). It receives the provider payload and the widget instance and returns a Promise (or value) that resolves with the final assistant text, or streams tokens into the current bubble via widget.appendDelta(delta) and resolves with no value. Useful for custom authentication, an SSE proxy or a fully offline mock.

Code examples

$('#jqxChat').jqxChat({ sendRequest: function (payload, widget) { return fetch('/api/chat', { method: 'POST', body: JSON.stringify(payload) }).then(function (r) { return r.text(); }); } });

Code example:

sendRequest supplies a custom transport

$('#myChat').jqxChat({});

Sets or gets whether avatars are shown next to messages.

Code example:

showAvatars is set to false

$('#jqxChat').jqxChat({ showAvatars: false });

Sets or gets whether the header (avatar, title, status and actions) is shown.

Code example:

showHeader is set to false

$('#jqxChat').jqxChat({ showHeader: false });

Sets or gets whether the assistant avatar is shown in the header.

Code example:

showHeaderAvatar is set to false

$('#jqxChat').jqxChat({ showHeaderAvatar: false });

Sets or gets whether a timestamp is shown in each message's meta line.

Code example:

showTimestamps is set to false

$('#jqxChat').jqxChat({ showTimestamps: false });

Sets or gets an array of suggested prompt strings displayed as clickable chips when the conversation is empty. Clicking a chip sends that prompt.

Code examples

$('#jqxChat').jqxChat({ starterPrompts: [ 'Summarize this page', 'Draft a reply' ] });

Code example:

starterPrompts shows two suggestions

$('#myChat').jqxChat({starterPrompts: [ 'Summarize this page', 'Draft a reply' ]});

Sets or gets the status label shown under the title next to a status dot. When null, the status is hidden. When subtitle is set, the subtitle text takes precedence.

Code example:

statusText is customized

$('#jqxChat').jqxChat({ statusText: 'Typically replies instantly' });

Sets or gets whether the assistant response is streamed token by token using Server-Sent Events. When false, the full response is requested and rendered at once.

Code example:

stream is set to false

$('#jqxChat').jqxChat({ stream: false });

Sets or gets the header subtitle text shown under the title. When set, it takes precedence over statusText.

Code example:

subtitle is set to 'Powered by Claude'

$('#jqxChat').jqxChat({ subtitle: 'Powered by Claude' });

Sets or gets the system / developer instructions sent to the model to define the assistant's behaviour.

Code example:

system sets the assistant's instructions

$('#jqxChat').jqxChat({ system: 'You are a concise support agent.' });

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />

• Set the widget's theme property to 'material' when you initialize it.

Note: jqxChat renders a self-contained modern skin and does not inherit the theme's fill colours; use colorScheme and accentColor to restyle it.

Code example:

theme is set to 'material'

$('#myChat').jqxChat({theme: material});

Sets or gets the header title text (also used as the popup launcher tooltip).

Code examples

Set the title property.

$('#jqxChat').jqxChat({ title: 'Help Assistant' });

Get the title property.

var title = $('#jqxChat').jqxChat('title');

Code example:

title is set to 'Help Assistant'

$('#myChat').jqxChat({title: Help Assistant});

Sets or gets whether an animated typing indicator is shown while the assistant is generating a response.

Code example:

typingIndicator is set to false

$('#jqxChat').jqxChat({ typingIndicator: false });

Sets or gets the user avatar image. Accepts any image URL or data-URI. When null, a themed circle with the first letter of userName is shown.

Code example:

userAvatar is set to an image URL

$('#jqxChat').jqxChat({ userAvatar: 'https://example.com/me.png' });

Sets or gets the display name of the user, shown in the message meta and used for the user avatar initial.

Code example:

userName is set to 'Me'

$('#jqxChat').jqxChat({ userName: 'Me' });

Sets or gets the welcome text (Markdown supported) shown in the empty state above the starter prompts.

Code example:

welcomeMessage greets the user

$('#jqxChat').jqxChat({ welcomeMessage: 'Hi! How can I help?' });

Sets or gets the chat's width.

Code examples

Set the width property.

$('#jqxChat').jqxChat({ width: 420 });

Get the width property.

var width = $('#jqxChat').jqxChat('width');

Code example:

width is set to 420

$('#myChat').jqxChat({width: 420});

This event is triggered when the user sends a message. The event argument contains args.role ('user') and args.content (the message text).

Code examples

Bind to the messageSent event by type: jqxChat.

Code example:

Bind to the messageSent event by type: jqxChat.

$('#jqxChat').on('messageSent', function (event) { var content = event.args.content; }); 

This event is triggered when a request to the AI provider begins, before any tokens arrive.

Code examples

Bind to the responseStart event by type: jqxChat.

Code example:

Bind to the responseStart event by type: jqxChat.

$('#jqxChat').on('responseStart', function (event) { /* show a spinner */ }); 

This event is triggered for each streamed chunk of the assistant's response. The event argument contains args.delta (the new text) and args.content (the accumulated text so far).

Code examples

Bind to the responseDelta event by type: jqxChat.

Code example:

Bind to the responseDelta event by type: jqxChat.

$('#jqxChat').on('responseDelta', function (event) { var delta = event.args.delta; }); 

This event is triggered when the assistant's response is complete. The event argument contains args.role ('assistant') and args.content (the full response text).

Code examples

Bind to the messageReceived event by type: jqxChat.

Code example:

Bind to the messageReceived event by type: jqxChat.

$('#jqxChat').on('messageReceived', function (event) { var content = event.args.content; }); 

This event is triggered after a response finishes, alongside messageReceived. The event argument contains args.content (the full response text).

Code examples

Bind to the responseEnd event by type: jqxChat.

Code example:

Bind to the responseEnd event by type: jqxChat.

$('#jqxChat').on('responseEnd', function (event) { /* hide the spinner */ }); 

This event is triggered when a request fails or the connection is misconfigured. The event argument contains args.error (the error object) and args.message (the error text). Returning false from the handler suppresses the default inline error bubble.

Code examples

Bind to the error event by type: jqxChat.

Code example:

Bind to the error event by type: jqxChat.

$('#jqxChat').on('error', function (event) { console.error(event.args.message); }); 

This event is triggered when the popup panel is opened. Applies only when mode is 'popup'.

Code examples

Bind to the open event by type: jqxChat.

Code example:

Bind to the open event by type: jqxChat.

$('#jqxChat').on('open', function (event) { /* panel opened */ }); 

This event is triggered when the popup panel is closed. Applies only when mode is 'popup'.

Code examples

Bind to the close event by type: jqxChat.

Code example:

Bind to the close event by type: jqxChat.

$('#jqxChat').on('close', function (event) { /* panel closed */ }); 

This event is triggered when the user stops an in-progress generation via the stop button or the stop method.

Code examples

Bind to the stop event by type: jqxChat.

Code example:

Bind to the stop event by type: jqxChat.

$('#jqxChat').on('stop', function (event) { /* generation stopped */ }); 

This event is triggered when the widget is created and rendered.

Code examples

Bind to the create event by type: jqxChat.

Code example:

Bind to the create event by type: jqxChat.

$('#jqxChat').on('create', function (event) { /* widget ready */ }); 

Sends a message to the assistant. When text is omitted, the current input value is used. Adds the message to the conversation and requests a response from the provider.

Stops the in-progress generation. Any text streamed so far is kept in the conversation and the stop event is raised.

Appends a message to the conversation and the view without contacting the provider.

Appends a chunk of streamed text into the current assistant bubble. Intended for use inside a sendRequest callback that drives streaming manually. Late chunks are ignored after a stop.

Returns a copy of the conversation history as an array of message objects.

Clears the conversation and restores the empty state (welcome message and starter prompts).

Moves keyboard focus to the message input. In popup mode, focus is applied only when the panel is open.

Opens the popup panel and hides the launcher. Applies only when mode is 'popup'.

Closes the popup panel and shows the launcher. Applies only when mode is 'popup'.

Toggles the popup panel open or closed. Applies only when mode is 'popup'.

Returns the conversation history as an array of message objects (alias of getMessages).

Renders the widget.

Refreshes the widget's layout (re-measures and re-sizes the message area).

Destroys the widget and removes it (and the popup launcher, if any) from the DOM.