Branding Extractor

Branding Extractor reads your website and pulls out the assets that define your brand: colour palette, logo, fonts, social links, business info. Those values then drive every template you create — buttons match your brand colour, footers carry your logo, social icons link to the right places.

Running an extraction

1. Go to Branding in the app.
2. Click Extract Branding from Website.
3. Paste your website URL (e.g. https://acme.com).
4. Click Start.

The job runs through several steps, each shown in the progress modal:

Step	What it does
Fetch site	Loads your website in a headless browser. Scrolls top-to-bottom so lazy-loaded images appear. Captures the HTML, images, computed CSS colours, social links, and meta tags.
Extract branding	Sends the harvested data to the AI, which returns a structured brand profile: primary/secondary colours, logo image, font stack, business name, support email, etc.
Discover RSS	Looks for RSS feeds linked from your site (blog feeds, news feeds).
Upload logos	Downloads any logo images and uploads them to your media library so they're available in every template.
Save branding	Writes the brand profile to your project.
Create feeds	Adds any discovered RSS feeds as content sources you can use in AI sections or newsletters.

Total runtime: 1–3 minutes for most sites.

What gets extracted

Colours

The extractor distinguishes between brand colours (from logos, CTAs, accent areas) and incidental colours (text, backgrounds). The AI proposes:

• A primary colour — the most prominent brand accent, used for buttons and links by default.
• A secondary colour — supporting brand tone.
• A text colour, background colour, and other neutrals.

Hex values come from real CSS on your site, not from a guessed palette. Review them on the Branding page; click any swatch to change it.

Logo

The extractor finds your logo in two places:

• <img> tags in your header (the obvious case).
• Inline SVG rendered by your frontend framework — React/Vue sites often have logos as components rather than image files. The extractor identifies SVG candidates in the header/nav area, screenshots them, and saves the screenshot as a PNG.

The chosen logo is uploaded to your media library and set as the default logo on your branding profile. Reuse it in any template via the file picker or by dragging it from the Files drawer.

Fonts

The extractor reads your site's CSS to identify the font families in use. The resulting brand profile lists a primary and secondary font.

A caveat: many web fonts don't render reliably in email clients. EmailBuilder will use your brand fonts where possible and fall back to email-safe alternatives (Arial, Helvetica, Georgia, etc.) where the chosen font isn't supported. You can override the fallback per-template if you want stricter control.

Social links

The extractor finds links to Twitter/X, Facebook, Instagram, LinkedIn, YouTube, TikTok, GitHub, and more by matching URL patterns on the page. It also checks /about and /contact for additional handles your homepage may have missed.

For platforms where handles map to URLs reliably (X, Instagram, TikTok, GitHub), the AI can normalise a bare handle like @acme into a full URL. Facebook, LinkedIn, and YouTube have more varied URL patterns, so those need a complete link.

Business info

The AI also extracts business name, support email, and any legal/support page links. These populate footer templates automatically.

Using extracted branding

The extracted brand profile drives every template in your project:

• Forks from the gallery apply your brand colours and logo automatically.
• AI Composer uses your brand colours and footer when generating sections.
• AI Chat is given your brand context implicitly — asking for "a button" produces one in your brand colour.

You can override any extracted value on the Branding page: change a colour, replace the logo, swap a social link. Per-template overrides also work — if a specific template needs a different colour, set it on that template's settings.

Re-running

You can re-run the extractor at any time — useful after a brand refresh on your site. The new profile replaces the old one entirely, so back up anything custom you've manually configured if you want to keep it.

What if extraction fails

Common reasons:

• Site is unreachable — typo in the URL, the site is down, or it blocks headless browsers (some CDNs do).
• Cloudflare or similar challenge page — the headless browser sees a "checking your browser" page, not your real site. Try a different URL on the same domain (e.g. an /about page).
• Heavily JS-rendered with delayed content — most sites work but a few render content only after user interaction. There's no general workaround; the extracted profile will reflect whatever did load.

If extraction fails, the modal reports an error and nothing is saved. Configure branding manually on the Branding page.

Manual setup

You don't have to use the extractor at all. The Branding page is a regular form — every field can be set by hand. Use whichever path fits.