Build branded emails

Gather a company’s logo, colors, fonts, and imagery, then turn them into an email template. Context.dev supplies the brand context; your application generates the content, renders the HTML, and sends the message. Start with an API key from the Quickstart, an email renderer, and a delivery provider. The four successful API calls below total 22 credits: Brand (10), Styleguide (10), Screenshot (1), and Images (1).

How it works

Context.dev gathers source evidence. Your application still owns copy approval, asset rights, email markup, client testing, and delivery.

Gather visual context

Call the APIs from your server and read CONTEXT_DEV_API_KEY from the environment:

curl https://api.context.dev/v1/brand/retrieve \
  --request POST \
  --header "Authorization: Bearer $CONTEXT_DEV_API_KEY" \
  --header "Content-Type: application/json" \
  --data '{"type":"by_domain","domain":"example.com"}'

curl --get https://api.context.dev/v1/web/styleguide \
  --header "Authorization: Bearer $CONTEXT_DEV_API_KEY" \
  --data-urlencode "domain=example.com"

curl --get https://api.context.dev/v1/web/screenshot \
  --header "Authorization: Bearer $CONTEXT_DEV_API_KEY" \
  --data-urlencode "directUrl=https://example.com" \
  --data-urlencode "handleCookiePopup=true"

curl --get https://api.context.dev/v1/web/scrape/images \
  --header "Authorization: Bearer $CONTEXT_DEV_API_KEY" \
  --data-urlencode "url=https://example.com"

import ContextDev from "context.dev";

const client = new ContextDev({apiKey: process.env.CONTEXT_DEV_API_KEY});

export async function gatherEmailContext(domain: string) {
  const homepage = `https://${domain}`;

  const results = await Promise.allSettled([
    client.brand.retrieve({type: "by_domain", domain}),
    client.web.extractStyleguide({domain}),
    client.web.screenshot({directUrl: homepage, handleCookiePopup: true}),
    client.web.webScrapeImages({url: homepage}),
  ]);

  const [brand, styleguide, screenshot, images] = results;
  const names = ["brand", "styleguide", "screenshot", "images"];
  return {
    domain,
    gatheredAt: new Date().toISOString(),
    brand: brand.status === "fulfilled" ? brand.value : null,
    styleguide: styleguide.status === "fulfilled" ? styleguide.value : null,
    screenshot: screenshot.status === "fulfilled" ? screenshot.value : null,
    images: images.status === "fulfilled" ? images.value : null,
    missingSources: results.flatMap((result, index) =>
      result.status === "rejected" ? [names[index]] : []),
  };
}

console.log(await gatherEmailContext("example.com"));

import os
from context.dev import ContextDev

client = ContextDev(api_key=os.environ["CONTEXT_DEV_API_KEY"])
domain = "example.com"

brand = client.brand.retrieve(type="by_domain", domain=domain)
styleguide = client.web.extract_styleguide(domain=domain)
homepage = f"https://{domain}"
screenshot = client.web.screenshot(direct_url=homepage, handle_cookie_popup=True)
images = client.web.web_scrape_images(url=homepage)

print({"brand": brand, "styleguide": styleguide, "screenshot": screenshot, "images": images})

require "cgi/core"
require "context_dev"

client = ContextDev::Client.new(api_key: ENV.fetch("CONTEXT_DEV_API_KEY"))
domain = "example.com"

brand = client.brand.retrieve(body: {type: :by_domain, domain: domain})
styleguide = client.web.extract_styleguide(domain: domain)
homepage = "https://#{domain}"
screenshot = client.web.screenshot(direct_url: homepage, handle_cookie_popup: true)
images = client.web.web_scrape_images(url: homepage)

puts({brand: brand, styleguide: styleguide, screenshot: screenshot, images: images}.inspect)

package main

import (
    "context"
    "fmt"
    "os"

    contextdev "github.com/context-dot-dev/context-go-sdk/v2"
    "github.com/context-dot-dev/context-go-sdk/v2/option"
    "github.com/context-dot-dev/context-go-sdk/v2/packages/param"
)

func main() {
    client := contextdev.NewClient(
        option.WithAPIKey(os.Getenv("CONTEXT_DEV_API_KEY")),
    )

    domain := "example.com"
    brand, err := client.Brand.Get(context.Background(), contextdev.BrandGetParams{
        OfByDomain: &contextdev.BrandGetParamsBodyByDomain{Domain: domain},
    })
    if err != nil {
        panic(err)
    }

    styleguide, err := client.Web.ExtractStyleguide(context.Background(), contextdev.WebExtractStyleguideParams{
        Domain: param.NewOpt(domain),
    })
    if err != nil {
        panic(err)
    }

    homepage := "https://" + domain
    screenshot, err := client.Web.Screenshot(context.Background(), contextdev.WebScreenshotParams{
        DirectURL: param.NewOpt(homepage),
        HandleCookiePopup: param.NewOpt(true),
    })
    if err != nil {
        panic(err)
    }

    images, err := client.Web.WebScrapeImages(context.Background(), contextdev.WebWebScrapeImagesParams{
        URL: homepage,
    })
    if err != nil {
        panic(err)
    }

    fmt.Println(map[string]any{
        "brand": brand,
        "styleguide": styleguide,
        "screenshot": screenshot,
        "images": images,
    })
}

<?php

require __DIR__.'/vendor/autoload.php';

use ContextDev\Client;

$client = new Client(apiKey: getenv('CONTEXT_DEV_API_KEY'));

$domain = 'example.com';

// The 2.14.0 Brand helper requires fields from incompatible lookup types.
$raw = $client->request(
    method: 'post',
    path: 'brand/retrieve',
    body: ['type' => 'by_domain', 'domain' => $domain],
);
$brand = json_decode((string) $raw->getBody(), true, flags: JSON_THROW_ON_ERROR);
$styleguide = $client->web->extractStyleguide(domain: $domain);
$homepage = 'https://'.$domain;
$screenshot = $client->web->screenshot(directURL: $homepage, handleCookiePopup: true);
$images = $client->web->webScrapeImages(url: $homepage);

print_r(compact('brand', 'styleguide', 'screenshot', 'images'));

Use each response for a specific purpose:

Input	Purpose
Brand profile	Select a logo candidate and optional brand metadata.
Styleguide	Observe palette, typography, spacing, and component treatment.
Screenshot	Give a reviewer or vision model a visual reference for the rendered site.
Image scrape	Find candidate image URLs, including CSS background images.

All nested fields and asset lists can be absent. The TypeScript function keeps successful responses and names the calls that failed; the other tabs show the underlying requests. Apply the same independent error handling in your language, and also check for empty fields in fulfilled responses.

Missing input	Template behavior
Logo	Show the confirmed sender name as text.
Styleguide or custom font	Use an approved neutral palette and system-font stack.
Screenshot	Continue without a visual reference.
Hero image	Use a text-first layout; do not substitute an unrelated product image.
Supported campaign facts	Ask the editor for approved copy before generating factual claims.

Validate the submitted domain on your server, cache the gathered bundle, and avoid requesting the same source context for every recipient.

Create an email brief

Do not treat extracted website styles as email-ready CSS. Convert them into a small set of approved decisions:

TypeScript model

type EmailBrief = {
  brandName: string;
  logo?: { url: string; alt: string; width: number; height: number };
  primaryColor: string;
  backgroundColor: string;
  textColor: string;
  fontStack: string;
  heroImage?: { url: string; alt: string };
  toneEvidence: Array<{ excerpt: string; sourceUrl: string }>;
  campaignGoal: string;
  requiredFooter: string;
};

Approve contrast, image choice, font licensing, and fallback fonts before generation. A homepage screenshot is a reference, not an instruction to reproduce a site’s layout inside an email.

Generate the content

For production, have the model produce content and design choices as structured data. Keep executable HTML in a renderer you control.

{
  "subject": "A specific, truthful subject line",
  "preheader": "A short summary",
  "eyebrow": "Optional category",
  "headline": "One clear message",
  "body": "Two concise paragraphs",
  "cta": {
    "label": "Action-oriented label",
    "url": "https://example.com/approved-destination"
  },
  "image_key": "approved-hero-1"
}

Validate the output against a schema. Restrict links and images to an approved allowlist, and reject unsupported performance, customer, security, or legal claims.

A model can generate complete HTML for a prototype. A deterministic component renderer is safer in production because it controls markup, escaping, responsive behavior, and footer requirements.

Render for email clients

Web layouts do not transfer directly to email. Your renderer should:

use semantic, email-compatible table layouts where needed;
inline critical styles and avoid JavaScript, forms, and remote stylesheets;
include explicit image dimensions and meaningful alt text;
constrain content to a readable single-column layout on small screens;
supply system-font fallbacks when custom fonts are unavailable;
encode and validate all URLs;
preserve the required sender identity, unsubscribe controls, and legal footer;
keep the final message below your delivery provider’s and mailbox clients’ size limits.

Do not place untrusted model output directly into an HTML string. Escape text and accept only typed components and approved URL schemes.

Test the message

Linting source HTML is not enough. Before sending:

Render screenshots in the mailbox clients and modes your audience uses.
Test with blocked images, dark mode, narrow screens, and long localized copy.
Click every link and verify tracking parameters do not break the destination.
Confirm the plain-text alternative remains understandable.
Run accessibility and spam checks.
Send a seed-list test through the same delivery path as production.

Record the source-evidence timestamp and template version. When the brand site changes, review the diff before changing an active template.

Reuse a theme across email types

Sequenzy uses brand context for personalized marketing emails. Reuse the approved visual brief while keeping message purpose and sender identity explicit:

Template	Content supplied by your application
Welcome email	The customer’s actual signup state and next action
Product announcement	Approved product facts, imagery, and campaign destination
Account or transaction notification	Accurate event data from your application
Newsletter	Reviewed editorial copy, links, and required footer

Keep recipient personalization separate from the brand theme. Save logo, color, and font overrides against the sending brand, and retain those overrides when refreshing automatic candidates. A source-site change should create a draft template revision rather than changing messages already approved for a campaign.

An asset returned from a public webpage is not automatically licensed for email use. Confirm permission for logos, images, fonts, customer marks, and quoted language.

Retrieve brand data

Find company profiles and logo candidates.

Extract a styleguide

Inspect a website’s colors and typography.

Capture a screenshot

Capture a rendered page for visual reference.

Extract page images

Find candidate image URLs for your template.

Brand experiences

Sales and content

Web research

How it works

Gather visual context

Create an email brief

Generate the content

Render for email clients

Test the message

Reuse a theme across email types

Retrieve brand data

Extract a styleguide

Capture a screenshot

Extract page images

​How it works

​Gather visual context

​Create an email brief

​Generate the content

​Render for email clients

​Test the message

​Reuse a theme across email types

Retrieve brand data

Extract a styleguide

Capture a screenshot

Extract page images

How it works

Gather visual context

Create an email brief

Generate the content

Render for email clients

Test the message

Reuse a theme across email types