Skip to main content

Basic & advanced customization


We support two ways of customizing your Airy Chat Plugin. For most use cases the basic customization is all you need as it supports the essential options to customize the experience. If you need full control of every aspect of the plugin, we offer the possibility of advanced customization with Render Props.

How to customize the Airy Chat Plugin#

Basic customization#

After setting up your first source you can customize your Airy Chat Plugin to your needs.

On your instance's Airy Core UI, click on the button displaying a + icon next to the Airy Live Chat channel.

Basic Customization Example

Then click on the edit of your source:

Basic Customization Example

Switch to the Install & Customize tab and start customizing your Airy Chat Plugin to your needs.

Basic Customization Example

If you are happy with your customization, copy it and add this code inside the tag <head>.

Config KeyConfig ValueConfig Description
welcomeMessageJSONSet the welcome message of your Airy Chat Plugin. It can be a text, a template, an image and more
headerTextstringSet the header text of your Airy Chat Plugin
headerTextColorstringSet the header text color of your Airy Chat Plugin
subtitleTextstringSet the subtitle text of your Airy Chat Plugin
subtitleTextColorstringSet the subtitle text color of your Airy Chat Plugin
primaryColorstringSet your primary color as the topbar, border of textArea, Start new Conversation button text and border color, or text color of buttons
accentColorstringSet your accent color as the sendButton
backgroundColorstringSet the background color of the entire Airy Chat Plugin
heightnumberSet the height of the entire Airy Chat Plugin
widthnumberSet the width of the entire Airy Chat Plugin
bubbleIconURLSet your company icon which appears on the button that opens and closes the Airy Chat Plugin
sendMessageIconURLSet your icon as sendButton and replace the default paperplane
startNewConversationTextstringSet the Start new Conversation text button of your Airy Chat Plugin
disableMobilebooleanDisable the entire Airy Chat Plugin for mobile devices
hideInputBarbooleanDisables the input bar of the Airy Chat Plugin
hideEmojisbooleanDisables the emojis in the input bar of the Airy Chat Plugin
bubbleState'expanded', 'minimized'Set the behaviour of the chatplugin to be always expanded or always minimized
closeMode'basic', 'medium', 'full'Choose one of the different option to close the chatplugin and start a new conversation


Default StyleCustomized Style
Basic Customization ExampleBasic Customization Example

Advanced customization#

Installing the Airy Chat Plugin as a library allows you to customize the interface as much as you want using Render Props. The Airy Chat Plugin provides you with four Render Props. All Render Props parameters are optional. If you omit all of them, the Airy Chat Plugin will render the default styling and behavior.

Each Render Prop accepts a set of parameters that allows you to customize the interface or the behavior of the Airy Chat Plugin.

Render PropsDescription
headerBarProp: (orgImage, toogleHideChat)Optional. Top bar component of the Airy Chat Plugin. Can minimize the full plugin and display a custom image as brand icon for your organization

orgImage : image url
toggleHideChat() : function that will close or open the Airy Chat Plugin
inputBarProp: (sendMessage)Optional. Input field that accepts a message and the onSubmit action that sends the message.

sendMessage(text) : function that sends a message to the server. It takes a string as parameter
airyMessageProp(message)Optional. Welcome message to display in the conversation.

message : message.payload
bubbleProp: (isChatHidden, toggleHidechat)Optional. Area used as a toggle to open and close the chat and also a brand icon.

isChatHidden : boolean value that indicatas if the chat is closed or open.
toogleHideChat() : function that closes or opens the Airy Chat Plugin.

Example of how to use Render Props with the Airy Chat Plugin library:

const airyChatPlugin = new AiryChatPlugin({
organization_id: "YOUR_ORG_ID",
app_id: "YOUR_APP_ID",
app_secret: "YOUR_APP_SECRET",
headerBarProp: ({orgImage, toggleHideChat}) => (
<div className="customHeaderStyle" onClick={toggleHideChat}>
<h1 className="customHeaderTitle">Title</h1>
<img src={orgImage} alt="orgImg" />
Last updated on