> ## Documentation Index
> Fetch the complete documentation index at: https://egentify.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize the Egentify Chat Widget for Your Brand

> Match Egentify's chat widget to your brand by adjusting colors, position, corner radius, welcome text, and quick-reply starter buttons.

The Egentify chat widget is customizable to match your storefront without any code changes. Adjust colors, positioning, welcome messaging, and quick-reply buttons so it feels native to your store.

## Where to customize

**Shopify**

Settings are split across two places.

**Colors, position, and spacing** are in your Shopify admin under **Online Store > Themes > Customize > App Embeds**, in the **Chat widget** entry.

**Assistant name, welcome message, and starter buttons** are in the **Egentify** app in your Shopify admin, under the **Settings** tab.

**WooCommerce**

Everything is on one page. In your WordPress admin, open **Egentify** in the sidebar and scroll to the **Widget Settings** section. No theme editor required.

## Colors, position, and spacing

Both platforms expose the same five settings. The labels differ slightly.

| Shopify (theme embed) | WooCommerce | Description | Default |
| - | - | - | - |
| **Primary color** | **Primary Color** | Accent color for the launcher, send button, and interactive elements. | `#2563eb` |
| **Position** | **Widget Position** | Which corner the launcher appears in on desktop. Mobile is always full screen. | Bottom right |
| **Side offset (px)** | **Side Offset (px)** | Distance from the left or right edge. Range 0 to 200. | `24` |
| **Bottom offset (px)** | **Bottom Offset (px)** | Distance from the bottom edge. Range 0 to 200. | `24` |
| **Chat window radius (px)** | **Chat Window Radius (px)** | Corner rounding on the chat window, from `0` for sharp to `30` for very rounded. | `16` |

> [!NOTE]
>
> The radius applies to the chat window only. The launcher button stays circular whatever you set.

> [!TIP]
>
> If the launcher collides with a sticky cart button or a cookie banner, raise the bottom offset rather than moving the widget to the other corner. Adding 60 to 80 px usually clears it.

## Assistant name and avatar

| Setting | Description |
| - | - |
| **Assistant name** | The name shown in the widget header and used in the welcome message. Set on the **General** tab of your Egentify store settings. |
| **Avatar** | A custom image shown in the header and beside agent messages. Upload a PNG or JPG. Falls back to the Egentify default. |

## Welcome message

The welcome message is the first thing customers see when they open the widget. Use the `{{agent_name}}` placeholder to insert your assistant's name automatically:

```text theme={null}
Hi there! I'm {{agent_name}}. How can I help you today?
```

Keep it under 300 characters.

## Starter buttons

Starter buttons sit below the welcome message the first time a customer opens an empty chat, giving one-tap shortcuts to common requests. You can configure up to **4 buttons**, each up to **40 characters**.

**Examples:**

* `Track my order`
* `Return an item`
* `Product question`
* `Talk to a person`

Choose labels that reflect why your customers actually get in touch. Good ones shorten the path to an answer and give the agent useful context from the first message.

> [!NOTE]
>
> Leave all four slots blank to fall back to Egentify's default buttons.

## WooCommerce: automatic injection

The WooCommerce plugin has an **Auto Inject Widget** toggle that renders the widget automatically in your theme footer. It is what makes the widget appear without any theme edits.

Turn it off if you want to control placement yourself, then drop the widget wherever you need it with the shortcode:

```text theme={null}
[egentify_chat_widget]
```

With auto-inject off and no shortcode placed, the widget will not appear on your storefront at all.

> [!NOTE]
>
> Widget settings take effect immediately. No page reload or redeploy needed.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.