Want your widget to match your website's look and feel without manually picking colors? Now you can. 🎨

EmbedSocial can automatically detect the brand colors from your website and let the AI apply them to your widget. The result is a polished, on-brand widget that blends seamlessly into your site — no design skills needed.

When you create an AI widget from a template, EmbedSocial fetches the primary colors from your connected website. Instead of applying them automatically, the AI editor will ask you in the chat prompt if you would like to apply your brand colors to the widget.

If you choose to apply them, the AI will intelligently decide where each color fits best across your widget — including elements like headers, buttons, text, backgrounds, and accents. The implementation is designed to be subtle and visually consistent, so your widget looks professional without any color clashing.

Follow the steps below to apply your brand colors to a widget.

Step 1: Create a new AI widget. Go to the Widgets section in your EmbedSocial account, click + New widget, and choose a template with the ✨ AI icon or start from scratch. If you are new to AI widgets, we recommend reading this article first.

Step 2: Wait for the brand color prompt. Once the widget loads, the AI editor will detect your website's brand colors and show a message in the chat asking if you would like to apply them to your widget.

Step 3: Confirm or skip. If you want the brand colors applied, confirm in the chat prompt. The AI will then apply your colors across the widget elements in a way it determines looks best. If you prefer to keep the original template colors or customize manually, you can simply skip this step.

Step 4: Fine-tune if needed. After the colors are applied, you can always type a follow-up prompt in the AI editor to adjust specific elements. For example: "Make the header background darker" or "Change the button color to blue."

Step 5: Save and embed. Once you are happy with the result, save your widget and copy the embed code to add it to your website.

The AI has full creative freedom to decide where your brand colors are applied. Typical elements include:

The goal is a subtle, cohesive look that matches your brand without overwhelming the content. Card backgrounds and star ratings are generally left untouched to maintain readability.

If you ever encounter an "Unable to generate HTML" error while working in the AI editor, you will now see a Retry button directly in the chat. Simply click it to resend your prompt with a single click — no need to retype anything.