Styling & Theming

The widget runs inside a sandboxed iframe, so it won't conflict with your page styles. You can customize its appearance through configuration options.

Primary Color

Set the primary background color using the data-color-background-primary attribute:

<script
  src="https://widget.mailagent.email/connect/connect.js"
  data-user-id="YOUR_USER_ID"
  data-color-background-primary="#2c7df6"
></script>

This color is applied to:

• The header background

• Primary buttons

• Active state indicators

• Message accent elements

Transparent Header

Make the header blend with the chat background:

<script
  src="https://widget.mailagent.email/connect/connect.js"
  data-user-id="YOUR_USER_ID"
  data-header-transparent="true"
></script>

This is useful when embedding the widget in a context where you want a cleaner, more integrated look.

Positioning

Control where the widget appears on screen via CSS position properties:

// Bottom-right corner (common for support widgets)
await MailAgent.open({
  bottom: "20px",
  right: "20px",
  width: "400px",
  height: "600px"
});

// Centered on page
await MailAgent.open({
  top: "50%",
  left: "50%",
  width: "500px",
  height: "700px"
});

// Full sidebar
await MailAgent.open({
  top: "0",
  right: "0",
  width: "400px",
  height: "100vh"
});

The widget is rendered with position: fixed and z-index: 9999, so it will float above your page content.

Iframe Styling

The widget iframe has the following default styles:

• No border

• Transparent background

• Hidden overflow

• Fade-in animation on load (200ms ease)

Since it's an iframe, you cannot inject CSS into the widget from your page. All theming must go through the configuration options described above.