### 1. Theme Generator

In the **Theme Generator** section, you can set a **Primary Color** and **Background Color** for your agent’s theme. This feature allows you to create a harmonious and well-contrasted color scheme for a visually appealing interface. Note that this will override individual color customizations to ensure consistency across your agent’s design.

### 2. Header Customization

The **Header** section lets you customize the header of your agent. Here’s what you can adjust:

- **Title**: Modify the display title of the agent (e.g., “AI Agent”).
- **Status Indicator**: Show whether the agent is online.
- **Header Color**: Choose a color for the header.
- **Shadow Effect**: Enable or disable a shadow under the header.
- **Reset Button**: Allow users to reset the chat.
- **Remove ChatNode Branding**: Toggle to remove ChatNode’s branding from the chat header.

### 3. Chat Bubbles

Under **Chat Bubbles**, you can style the agent and user message bubbles. Customizations include:

- **Greeting**: Set an initial greeting message.
- **Bubble Colors**: Customize background and text colors for both the agent and user message bubbles.
- **Feedback Option**: Enable a feedback feature so users can rate responses.
- **Sound Effect**: Activate sound effects for each message received or sent.
- **Avatar**: Add a personalized avatar for your agent for a more engaging user experience.

### 4. Chat Input

The **Chat Input** section allows you to customize the text input area where users type their messages:

- **Text**: Modify the placeholder text (e.g., “Type your message”).
- **Background and Border**: Adjust the background color and border of the input box.
- **Send Button**: Enable or disable the send button and set its background color.

### 5. Suggested Questions

In **Suggested Questions**, you can create quick prompts that users can click on to start a conversation. This can guide users and improve engagement by suggesting common questions or topics.

### 6. User Info Collection

The **User Info** section provides options to collect user details before they start chatting:

- **Collect Name, Email, Phone**: Enable fields to gather user information like name, email, and phone number.
- **Submit Button Text**: Customize the text of the submit button (e.g., “Start Chatting”).

### 7. Privacy Policy / GDPR

The **Privacy Policy / GDPR** section helps you comply with privacy laws by adding a checkbox for users to agree to your terms and conditions. You can customize the message to say something like, “I agree with the terms and conditions.”

### 8. Popup Button

The **Popup Button** settings allow you to configure how users access the chat widget on your website:

- **Open Chat by Default**: Decide if the chat opens automatically.
- **Position**: Position the button on the right side of the screen when enabled, or on the left side when disabled.
- **Button Background and Icon**: Customize the background and icon for the popup button.

### 9. Popup Message

The **Popup Message** section lets you set an initial message that appears when the chat button is hovered over, prompting users to engage (e.g., “Need help?”).

### Saving Your Customizations

Once you’ve configured each setting to your preference, don’t forget to click **Save** to apply all changes. These customization options allow for extensive control over the look and feel of the agent interface, enabling users to align it with their branding or personal preferences.