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.
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.
Then click on the edit of your source:
Switch to the Install & Customize tab and start customizing your Airy Chat Plugin to your needs.
If you are happy with your customization, copy it and add this code inside the tag
|Option name||Option description|
|Header text||Set the header text of your Airy Chat Plugin|
|Start new Conversation text||Set the Start new Conversation text button of your Airy Chat Plugin|
|Chat Plugin Icon||Set your company icon which appears on the button that opens and closes the Airy Chat Plugin|
|Input Icon||Set your icon as |
|Primary Color||Set your primary color as the topbar, border of |
|Accent Color||Set your accent color as the |
|Background Color||Set the background color of the entire Airy Chat Plugin|
|Default Style||Customized Style|
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.
|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 |
|inputBarProp: (sendMessage)||Optional. Input field that accepts a message and the |
|airyMessageProp(message)||Optional. Welcome message to display in the conversation. |
|bubbleProp: (isChatHidden, toggleHidechat)||Optional. Area used as a toggle to open and close the chat and also a brand icon. |
Example of how to use Render Props with the Airy Chat Plugin library: