> For the complete documentation index, see [llms.txt](https://supportiko.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://supportiko.gitbook.io/documentation/getting-started/create-and-customize-your-widget.md).

# Create and Customize Your Widget

This is where you can easily customize the appearance and behavior of your chat widget to match your website’s style and meet your customer support needs. Let’s walk through the process step by step

<figure><img src="/files/8rtfk92lqCFOiAbrQRm6" alt=""><figcaption></figcaption></figure>

The Widget Settings section allows you to tweak every aspect of your chat widget. Here’s how you can get started:

1. **Enable Your Widget**
   * The first thing to do is toggle the **Enable Widget** switch to the "on" position. This ensures your widget is active and visible on your website. (Note: Your widget won’t appear on your site unless this option is enabled.)
2. **Set Your Site URL**
   * Enter the URL of your website (e.g., <https://example.com>) where the widget will be displayed. This helps Supportiko know where to integrate the widget.
3. **Add a Widget Title and Subtitle**
   * Customize the **Widget Title** (e.g., "How Can We Help?") to greet your visitors.
   * Use the **Widget Subtitle** (e.g., "Select a team member to start chatting") to provide a helpful prompt for your users.
4. **Choose a Chat Icon**
   * Pick an icon that best represents your chat widget from the available options (e.g., a speech bubble). This icon will appear on your site to invite users to chat.
5. **Customize Colors**
   * Set the **Base Color** (e.g., #ffd000 for a yellow shade) to match your brand.
   * Adjust the **Text Color** (e.g., #000000 for black) to ensure readability.
6. **Position the Widget**
   * Decide where the widget appears on your site by selecting the **Position** (e.g., "Right"). This controls the side of the screen where the chat icon will sit.

<figure><img src="/files/fNTEQ105MuXct6xHgttG" alt="" width="563"><figcaption></figcaption></figure>

**Advanced Customization**

For even more control, you can adjust the widget’s position with precision:

* **Offset X**: Move the widget horizontally (left or right) to fine-tune its placement.
* **Offset Y**: Adjust the vertical position (up or down) to align it perfectly on your page.
* **Logo**: Add your brand’s logo to make the widget feel more personalized.
* **Widget Title and Subtitle**: These will appear at the top of the chat window, helping users know who they’re connecting with (e.g., your team members like Ema, Mark, or Emily).

<figure><img src="/files/nxybyY3X6OT98PwazNvn" alt="" width="563"><figcaption></figcaption></figure>

**What Your Visitors Will See**

Once you’ve customized your settings, here’s how your widget will look on your website:

* **Widget Label**: This is the text that appears with the chat icon (e.g., "Need Help?") to catch your visitors’ attention.
* **Chat Icon**: The chosen icon (e.g., a yellow speech bubble) will be displayed next to the label, making it easy for users to start a chat.

### Preview Your Chat Widget

you can see exactly how your chat widget will look and feel on your website at any time during customization. The Preview feature makes it easy to test your settings without needing to visit your live site.

**How to Preview Your Widget**

1. **Locate the Preview Button**\
   On the Widget Settings page in your Admin Panel, find the **Preview** button at the top-right corner of the screen.
2. **Open the Preview Page**\
   Click the **Preview** button to launch a new preview page. This page displays your chat widget with all the current properties you’ve set, such as the title, subtitle, colors, icon, and position.

<figure><img src="/files/KgqIA8V0ygVwObcJrfSY" alt="" width="219"><figcaption></figcaption></figure>

The Preview feature allows you to experiment with different settings and instantly see the results. You can tweak the design—like adjusting the colors or changing the icon—and ensure everything looks perfect before going live.

<figure><img src="/files/jWtVOOXfv7LKIZZjl3X1" alt="" width="375"><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://supportiko.gitbook.io/documentation/getting-started/create-and-customize-your-widget.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.