> For the complete documentation index, see [llms.txt](https://docs.crowdwork.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.crowdwork.com/the-academy/crowdwork-academy/custom-styling-solutions/style-your-widget-with-ai.md).

# Style Your Widget With AI

Copy one message into ChatGPT, Claude or another AI assistant, add your website address and a screenshot, and it writes the CSS that makes the CrowdWork widget match your website.

An AI assistant like ChatGPT, Claude, Gemini or Microsoft Copilot can look at your website and fill in the [starter kit](https://docs.crowdwork.com/the-academy/crowdwork-academy/custom-styling-solutions/match-the-widget-to-your-brand) colors for you. You take a screenshot, copy one message, add your website address at the top, and paste the answer onto your site. No CSS knowledge needed.

## Before You Start

* **Your widget is already on your website.** If not, start with [Embedding a Widget](https://docs.crowdwork.com/for-theatres/embedding-a-widget) and come back.
* **You have an AI assistant open** in another browser tab. Any of the popular ones will do.

## Step 1: Take a Screenshot of Your Website

The screenshot is how the AI sees your exact colors.

1. Open your live website, the way a visitor sees it, and scroll to the top so your logo, menu and at least one button are in view.
2. Take a screenshot. On a Mac, press **Command + Shift + 4** and drag over the page. On Windows, press **Windows key + Shift + S** and drag over the page.

If your widget lives on a page that looks different from your homepage, screenshot that page instead.

## Step 2: Copy the Prompt

Copy this whole message. You'll fill in the lines at the top in the next step.

```
My website: https://www.example.com
Screenshot of my website: attached
Anything else? (optional):

Hi! I sell tickets with CrowdWork, and I've put the CrowdWork events widget on my website. Please help me style the widget so it matches my website.

1. Read CrowdWork's guide to styling the widget, including its Notes for AI Assistants: https://docs.crowdwork.com/the-academy/crowdwork-academy/custom-styling-solutions/match-the-widget-to-your-brand
2. Look at my screenshot and my website (the address at the top). Note the main colors, the button or link color, the font, and whether buttons and boxes have rounded or square corners. Take exact colors from the screenshot, because some tools can only read a website's text.
3. Fill in the palette at the top of CrowdWork's starter kit so the widget matches my website. If my website is dark, start from the guide's dark palette. Make sure all text is easy to read against its background. If I wrote anything next to "Anything else?", follow it.
4. Give me the complete starter kit as one block of code: your palette, then the engine copied exactly as written in the guide, all wrapped in <style> and </style> tags, ready to paste.
5. Then tell me in a few plain sentences which colors you picked and where you saw them. I'm not a web developer, so please skip the jargon.

If you couldn't see my real colors (no screenshot, or you couldn't open my website), tell me which colors you estimated instead of presenting them as exact.
```

## Step 3: Fill In the Top and Send It

Paste the message into your AI assistant, but don't send it yet.

* **My website:** replace `https://www.example.com` with your website's address. Copy it from your browser's address bar while you're looking at your live site.
* **Screenshot of my website:** attach the screenshot from Step 1, usually with the paperclip or **+** button next to where you type. You don't need to change this line.
* **Anything else? (optional):** leave it blank, or add a request in your own words, like *use the red from our logo for buttons* or *our site is dark, keep the widget dark too*.

{% hint style="warning" %}
**Use your public website address, not your editor.** A link to your website builder's editor or admin area (anything with `/config`, `/wp-admin` or `/editor` in it) needs a login, and the AI can't get past it.
{% endhint %}

Then send the message. The answer takes a minute or so.

## Step 4: Paste the Answer Into Your Site

The AI gives you one long block of code that starts with `<style>` and ends with `</style>`. Copy all of it, using the copy button on the code block if there is one.

1. Open the page with your widget in your website editor, and open the block that holds the widget code (the Code, Embed, HTML or Custom HTML block).
2. Click at the very start of the widget code, before `<div><script`, and paste the AI's code there.
3. Save and publish, then check the page on your live site.

{% hint style="info" %}
**Using a site-wide Custom CSS box instead?** Paste everything *between* the `<style>` and `</style>` tags, but not the tags themselves; that box adds them for you. [Style Your Widget](https://docs.crowdwork.com/the-academy/crowdwork-academy/custom-styling-solutions/match-the-widget-to-your-brand#step-3-paste-it-into-your-site) has more on where to paste.
{% endhint %}

## Not Quite Right? Ask for Changes

Stay in the same conversation and say what you'd like in plain words. For example:

* *The dates are hard to read. Make them darker.*
* *Use the gold from our logo for the Purchase button.*
* *Make the corners square like the rest of our site.*

Ask it to give you the complete block again each time, then replace the old block on your site with the new one. Check the page on a phone as well as a computer, and if you use the Calendar view, click an event: the popup that opens is styled by the same code.

## Troubleshooting

* **The AI says it guessed or estimated your colors?** It couldn't see the screenshot. Attach it again and say *Please use this screenshot for the exact colors.*
* **It says it can't open the CrowdWork guide?** Copy the starter kit from [Step 1 of Style Your Widget](https://docs.crowdwork.com/the-academy/crowdwork-academy/custom-styling-solutions/match-the-widget-to-your-brand#step-1-copy-the-starter-kit), paste it in, and say *Here's the CrowdWork starter kit. Please use it.*
* **Nothing changed?** Look at the published page, not the editor, and refresh it. Some website builders, Squarespace for one, don't run the widget inside their editor. If your site uses caching, give it a few minutes.
* **The code shows up on your page as text?** The `<style>` and `</style>` tags are missing. Copy the AI's answer again, from the first tag to the last.
* **The AI only gave you a few lines, or only some parts of the widget changed?** It left out some of the starter kit. The complete answer is well over a hundred lines. Reply with *Please give me the complete starter kit again, palette and engine together, with the engine copied exactly from the guide.*
* **Two different looks fighting?** The code is on the page twice, often an old version and a new one. Keep the newest.
* **Still stuck?** [Style Your Widget (Start Here)](https://docs.crowdwork.com/the-academy/crowdwork-academy/custom-styling-solutions/match-the-widget-to-your-brand) walks through the same kit by hand, and the AI's answer uses the same color names it explains.

{% hint style="info" %}
**About support:** custom CSS is yours to own. We can help with the widget itself, but troubleshooting custom styles falls outside our support scope. [Contact us](https://docs.crowdwork.com/contacting-support) with any other widget question.
{% endhint %}