> ## Documentation Index > Fetch the complete documentation index at: https://docs.context.dev/llms.txt > Use this file to discover all available pages before exploring further. # Generate Branded Campaign Assets at Scale > Run an automated marketing pipeline that turns a single domain into on-brand social media posts, ad creative, and campaign assets at scale. export const CampaignAssetsDemo = () => { const TRY = ["airbnb.com", "spotify.com", "duolingo.com", "figma.com"]; const DEFAULT_DOMAIN = "airbnb.com"; const DEFAULT_HTML = '
\n\n
\n
1:1 · INSTAGRAM POST
\n
\n
\n
\n
\n Airbnb\n
\n
\n
— A place for every you
\n
Belong
Anywhere.
\n
Open the door →
\n
\n
\n\n
\n
16:9 · X CARD
\n
\n
\n Airbnb\n
\n Airbnb\n @airbnb\n
\n
\n
\n
Unpack your
someday.
\n
7M+ homes. 220 countries. One key.
\n
\n
\n\n
\n
16:5 · HERO
\n
\n
\n Airbnb\n
Airbnb
\n
\n
\n
Stay somewhere
that stays with you.
\n
\n Learn more →\n
\n\n
'; const DEFAULT_BRAND = { title: "Airbnb", domain: "airbnb.com", colors: [{ hex: "#fc3c5c" }, { hex: "#fc9cb4" }, { hex: "#fb5c74" }] }; const STATIC = { "airbnb.com": { html: DEFAULT_HTML, brand: DEFAULT_BRAND }, "spotify.com": { html: '
\n\n \n
\n \n
1:1 · INSTAGRAM POST
\n\n \n
\n
\n
\n\n \n
\n Spotify\n Spotify\n
\n\n \n
\n
Your world.
Soundtrack
included.
\n
Music, podcasts, and audiobooks for every moment.
\n
\n\n \n
\n
Listen Free
\n
\n
\n\n \n
\n \n
16:9 · X CARD
\n\n \n
\n
\n
\n\n \n
\n Spotify\n @Spotify\n
\n\n \n
\n
Now Streaming
\n
Every beat.
Every story.
Every moment.
\n
\n\n \n
\n
spotify.com
\n
Stream Now
\n
\n
\n\n \n
\n \n
16:5 · HERO BANNER
\n\n \n
\n
\n\n \n
\n Spotify\n Spotify\n
\n\n \n
\n
Sound for every single moment.
\n
\n\n \n
\n
Learn more →
\n
\n
\n\n
', brand: { title: "Spotify", domain: "spotify.com", colors: [{ hex: "#1cd462" }, { hex: "#207f3f" }] } }, "duolingo.com": { html: '
\n\n \n
\n \n
1:1 · INSTAGRAM POST
\n \n
\n Duolingo icon\n
\n \n
\n
Learn any
language.
Free.
\n
\n \n
\n
\n
Free language education for the world
\n
\n Duolingo wordmark\n
\n
\n \n
\n
\n
\n\n \n
\n \n
16:9 · X CARD
\n \n
\n Duolingo icon\n
\n
Duolingo
\n
@duolingo
\n
\n
\n \n
\n
The world learns
with Duolingo.
\n
\n \n
\n Duolingo wordmark\n
duolingo.com
\n
\n \n
\n
\n
\n\n \n
\n \n
16:5 · HERO BANNER
\n \n
\n Duolingo icon\n Duolingo wordmark\n
\n \n
\n
Free language education
for the world.
\n
\n \n
\n
Learn more →
\n
\n \n
\n
\n
\n\n
', brand: { title: "Duolingo", domain: "duolingo.com", colors: [{ hex: "#60ca10" }, { hex: "#e8cc8a" }, { hex: "#182d24" }] } }, "figma.com": { html: '
\n\n \n
\n \n
1:1 · INSTAGRAM POST
\n \n
\n Figma icon\n
\n \n
\n
\n \n
\n
Design.
Collaborate.
Ship faster.
\n
Design, prototype, and build faster with Figma\'s collaborative platform.
\n \n
Try Figma Free →
\n
\n
\n\n \n
\n \n
16:9 · X CARD
\n \n
\n
\n \n
\n Figma icon\n @figma\n
\n \n
\n
One platform.
Infinite possibilities.
\n
Design, prototype, and build — all in one collaborative workspace.
\n
\n
\n\n \n
\n \n
16:5 · HERO BANNER
\n \n
\n
\n \n
\n Figma icon\n Figma\n
\n \n
\n
Build together. Ship faster.
\n
\n \n
\n
Learn more →
\n
\n
\n\n
', brand: { title: "Figma", domain: "figma.com", colors: [{ hex: "#f76040" }, { hex: "#13c5be" }, { hex: "#a35cfb" }] } } }; const [domain, setDomain] = useState(DEFAULT_DOMAIN); const [html, setHtml] = useState(DEFAULT_HTML); const [brand, setBrand] = useState(DEFAULT_BRAND); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const iframeRef = useRef(null); const isDefault = html === DEFAULT_HTML && domain === DEFAULT_DOMAIN; async function selectDomain(d) { if (d === domain || loading) return; setDomain(d); setError(null); setLoading(true); await new Promise(r => setTimeout(r, 900)); const hit = STATIC[d]; setHtml(hit.html); setBrand(hit.brand); setLoading(false); } function reset() { setDomain(DEFAULT_DOMAIN); setHtml(DEFAULT_HTML); setBrand(DEFAULT_BRAND); setError(null); } function onIframeLoad() { const iframe = iframeRef.current; if (!iframe) return; try { const doc = iframe.contentDocument; if (!doc) return; const h = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight); iframe.style.height = `${h + 8}px`; } catch {} } const colors = brand && brand.colors || []; const name = brand && brand.title || domain; const cleanDomain = brand && brand.domain || domain; const srcDoc = `${html}`; return
Live demo {isDefault ? context.dev context.dev : }
e.preventDefault()}>
Change demo {TRY.map(d => )}
{error &&
{error}
}
{name} · {cleanDomain}
{colors.slice(0, 4).map((c, i) => )}