Help

UI Design

The Design screen lets you customise the visual appearance of your Airgentic chat widget by editing its stylesheet and icon files. You can reach it from the Account menu in the admin console, or open it directly at admin.airgentic.com/edit_styles.


The File List

The Design screen lists all the files available to edit for your service:

File Description
style.css Custom CSS applied to the chat widget. Use this to override colours, fonts, spacing, and other visual styles.
icons/submit-disabled.svg The send/submit button icon shown when the input field is empty.
icons/chat-open.svg The floating chat button icon shown on the page when the widget is closed.
icons/microphone-inactive-1.svg Microphone icon displayed when voice mode is available but not active (state 1).
icons/microphone-inactive-2.svg Microphone icon displayed when voice mode is available but not active (state 2).
icons/microphone-active-1.svg Microphone icon displayed when voice mode is recording.
icons/thumbs-up.svg Thumbs-up icon used in response feedback.
icons/thumbs-down.svg Thumbs-down icon used in response feedback.

Click any row or its pencil icon to open the file editor.


The Editor

Each file opens in a syntax-highlighted code editor with line numbers.

  • CSS files — edited with CSS syntax highlighting.
  • SVG files — edited with XML syntax highlighting. A live preview of the SVG renders above the editor and updates as you type, so you can see your changes immediately without saving.

Saving Changes

Click Submit to save. You will be asked to confirm before the file is written.

After saving, allow a few minutes for changes to propagate and appear on the live website.


Cancelling

Click Cancel to go back to the file list. If you have unsaved changes, you will be prompted to confirm before leaving — changes will be lost if you proceed.

You have unsaved changes