site/index.html
Rama main · réplica de lectura del repositorio original.
<!doctype html>
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8" />
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-49RD5H9MR3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-49RD5H9MR3');
</script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Fonoster · AI that answers the phone</title>
<meta name="description" content="Build, test, and run voice agents on real phone lines. On Fonoster Cloud or your own servers." />
<meta name="theme-color" content="#181818" />
<link rel="canonical" href="https://fonoster.com/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Fonoster" />
<meta property="og:title" content="Fonoster · AI that answers the phone" />
<meta property="og:description" content="Build, test, and run voice agents on real phone lines. On Fonoster Cloud or your own servers." />
<meta property="og:url" content="https://fonoster.com/" />
<meta property="og:image" content="https://fonoster.com/assets/img/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="AI that answers the phone — Fonoster" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@fonoster" />
<link rel="icon" href="assets/img/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Roboto+Mono:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="assets/css/v1.css" />
<script>
try {
document.documentElement.dataset.theme = localStorage.getItem("fonoster.theme") === "light" ? "light" : "dark";
} catch (e) {}
</script>
</head>
<body data-page="home" data-icons="assets/img/icons.svg">
<script src="assets/js/notice.js"></script>
<header class="nav" data-nav>
<div class="container nav__in">
<a class="logo" href="./" aria-label="Fonoster">
<img class="logo--dark" src="assets/img/logo-dark.svg" alt="Fonoster" width="124" height="32" />
<img class="logo--light" src="assets/img/logo.svg" alt="Fonoster" width="124" height="32" />
</a>
<nav class="nav__links" aria-label="Main">
<div class="menu" data-products>
<button class="menu__btn" type="button" aria-expanded="false" aria-controls="products-menu" data-products-btn>
<span data-i18n="nav.products">Products</span><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-chevron-down"></use></svg>
</button>
<div class="menu__panel" id="products-menu" hidden>
<a class="menu__item" href="streams/"><span class="menu__icon"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-audio-lines"></use></svg></span><span class="menu__text"><b data-i18n="nav.streams">Bidirectional Streams</b><span data-i18n="nav.streamsLine">Bring your own bot over WebSocket</span></span></a>
<a class="menu__item" href="autopilot/"><span class="menu__icon"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-bot"></use></svg></span><span class="menu__text"><b data-i18n="nav.autopilot">Autopilot</b><span data-i18n="nav.autopilotLine">AI agents from one config file</span></span></a>
<a class="menu__item" href="private-regions/"><span class="menu__icon"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-shield-check"></use></svg></span><span class="menu__text"><b data-i18n="nav.regions">Private Regions</b><span data-i18n="nav.regionsLine">Calls run in your own cloud</span></span></a>
</div>
</div>
<a href="https://docs.fonoster.com/" data-i18n="nav.docs">Docs</a>
<a href="pricing/" data-i18n="nav.pricing">Pricing</a>
</nav>
<div class="nav__actions">
<a class="gh-chip" href="https://github.com/fonoster/fonoster" aria-label="Fonoster on GitHub, 8.1K stars">
<svg class="icon i-github" aria-hidden="true"><use href="assets/img/icons.svg#i-github"></use></svg>
<svg class="icon i-star" aria-hidden="true"><use href="assets/img/icons.svg#i-star"></use></svg>
<span>8.1K</span>
</a>
<a class="btn btn--primary btn--sm" href="https://app.fonoster.ai/sign-in" data-i18n="cta.start">Start building</a>
<button class="nav__menu" type="button" aria-expanded="false" aria-controls="sheet" aria-label="Menu" data-menu data-i18n-attr="aria-label:nav.menu">
<svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-menu"></use></svg>
</button>
</div>
</div>
<div class="sheet" id="sheet" hidden>
<span class="sheet__label" data-i18n="nav.products">Products</span>
<a class="sheet__product" href="streams/"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-audio-lines"></use></svg><span data-i18n="nav.streams">Bidirectional Streams</span></a>
<a class="sheet__product" href="autopilot/"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-bot"></use></svg><span data-i18n="nav.autopilot">Autopilot</span></a>
<a class="sheet__product" href="private-regions/"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-shield-check"></use></svg><span data-i18n="nav.regions">Private Regions</span></a>
<a href="https://docs.fonoster.com/" data-i18n="nav.docs">Docs</a>
<a href="pricing/" data-i18n="nav.pricing">Pricing</a>
<a class="btn btn--primary" href="https://app.fonoster.ai/sign-in" data-i18n="cta.start">Start building</a>
</div>
</header>
<main>
<!-- Hero -->
<section class="hero" data-loop>
<div class="atmos" aria-hidden="true">
<div class="dots"><i class="dots__wave"></i></div>
</div>
<div class="container hero__in">
<div class="hero__copy">
<a class="badge" href="autopilot/#features" data-reveal>
<span class="badge__dot"></span>
<span data-i18n="hero.badge">New · Multilingual code-switching</span>
<svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-arrow-right"></use></svg>
</a>
<h1 class="t-display" data-i18n="hero.title" data-reveal style="--i: 1">AI that answers<br />the phone.</h1>
<p class="t-lead" data-i18n="hero.sub" data-reveal style="--i: 2">Build, test, and run voice agents on real phone lines.</p>
<div class="ctas" data-reveal style="--i: 3">
<a class="btn btn--primary" href="https://app.fonoster.ai/sign-in" data-i18n="cta.start">Start building</a>
<a class="btn btn--secondary" href="mailto:sales@fonoster.com" data-contact data-i18n="cta.sales">Contact sales</a>
</div>
</div>
<div class="call-demo" data-reveal style="--i: 2">
<div class="call-demo__glow" aria-hidden="true"></div>
<div class="phone" data-phone data-speaking="idle" aria-hidden="true">
<div class="phone__screen">
<div class="phone__island"></div>
<div class="phone__status">
9:41
<span>
<svg class="icon"><use href="assets/img/icons.svg#i-signal"></use></svg>
<svg class="icon"><use href="assets/img/icons.svg#i-wifi"></use></svg>
<svg class="icon"><use href="assets/img/icons.svg#i-battery-full"></use></svg>
</span>
</div>
<div class="phone__avatar">
<div class="phone__core"><svg class="icon"><use href="assets/img/icons.svg#i-audio-lines"></use></svg></div>
</div>
<div class="phone__name" data-i18n="phone.name">Fonoster Agent</div>
<div class="phone__timer" data-phone-timer>00:42</div>
<div class="phone__caption">
<div class="phone__who" data-phone-who>Agent</div>
<div class="phone__text" data-phone-text>I can move you to Friday at 10. Does that work?</div>
<div class="wave">
<i style="--h: 4px; --n: 0"></i><i style="--h: 8px; --n: 1"></i><i style="--h: 12px; --n: 2"></i><i style="--h: 6px; --n: 3"></i><i style="--h: 14px; --n: 4"></i><i style="--h: 10px; --n: 5"></i><i style="--h: 16px; --n: 6"></i><i style="--h: 8px; --n: 7"></i><i style="--h: 12px; --n: 8"></i><i style="--h: 18px; --n: 9"></i><i style="--h: 10px; --n: 10"></i><i style="--h: 6px; --n: 11"></i><i style="--h: 12px; --n: 12"></i><i style="--h: 8px; --n: 13"></i><i style="--h: 4px; --n: 14"></i><i style="--h: 10px; --n: 15"></i><i style="--h: 6px; --n: 16"></i><i style="--h: 3px; --n: 17"></i>
</div>
</div>
<div class="phone__controls">
<span class="ctrl"><svg class="icon"><use href="assets/img/icons.svg#i-mic-off"></use></svg></span>
<span class="ctrl ctrl--end"><svg class="icon"><use href="assets/img/icons.svg#i-phone-off"></use></svg></span>
<span class="ctrl"><svg class="icon"><use href="assets/img/icons.svg#i-volume-2"></use></svg></span>
</div>
</div>
</div>
<form class="dock" data-callme aria-label="Get a call from our AI agent" data-i18n-attr="aria-label:demo.label">
<label class="dock__cc">
<span class="sr-only" data-i18n="demo.country">Country code</span>
<select name="country">
<option>+1</option>
<option>+52</option>
<option>+57</option>
<option>+34</option>
<option>+44</option>
</select>
<svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-chevron-down"></use></svg>
</label>
<span class="dock__div" aria-hidden="true"></span>
<input
type="tel"
name="phone"
inputmode="tel"
autocomplete="tel-national"
placeholder="Phone number"
aria-label="Phone number"
data-i18n-attr="placeholder:demo.placeholder;aria-label:demo.placeholder"
/>
<button class="dock__btn" type="submit">
<svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-phone"></use></svg>
<span data-i18n="demo.call">Call me</span>
</button>
<p class="dock__note" role="status" data-i18n="demo.soon">Live demo calls are coming soon. Talk to sales for a demo.</p>
</form>
</div>
</div>
</section>
<!-- Numbers -->
<section class="numbers" aria-label="Fonoster in numbers">
<div class="container numbers__grid">
<div class="num" data-reveal>
<span class="num__value" data-odo>10K+</span>
<p class="num__label" data-i18n="numbers.stars">GitHub stars across projects</p>
</div>
<div class="num" data-reveal style="--i: 1">
<span class="num__value" data-odo>1M+</span>
<p class="num__label" data-i18n="numbers.pulls">Docker pulls</p>
</div>
<div class="num" data-reveal style="--i: 2">
<span class="num__value" data-odo>275</span>
<p class="num__label" data-i18n="numbers.releases">releases shipped</p>
</div>
<div class="num" data-reveal style="--i: 3">
<span class="num__value" data-odo>2018</span>
<p class="num__label" data-i18n="numbers.since">building since</p>
</div>
</div>
</section>
<!-- Use cases -->
<section class="section" id="use-cases" data-cases>
<div class="container">
<div class="uc__head">
<h2 class="t-h2" data-i18n="uc.title" data-reveal>Built for real calls.</h2>
<div class="tabs" role="tablist" aria-label="Use cases" data-reveal style="--i: 1">
<button class="tab" role="tab" id="tab-support" aria-selected="false" aria-controls="case-panel" tabindex="-1" data-case="support">Support</button>
<button class="tab" role="tab" id="tab-scheduling" aria-selected="true" aria-controls="case-panel" data-case="scheduling">Scheduling</button>
<button class="tab" role="tab" id="tab-collections" aria-selected="false" aria-controls="case-panel" tabindex="-1" data-case="collections">Collections</button>
<button class="tab" role="tab" id="tab-sales" aria-selected="false" aria-controls="case-panel" tabindex="-1" data-case="sales">Sales</button>
</div>
</div>
<div class="uc__body" id="case-panel" role="tabpanel" aria-labelledby="tab-scheduling">
<div class="callcard" data-reveal>
<div class="callcard__head">
<div class="who">
<span class="who__avatar" data-case-icon><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-phone-outgoing"></use></svg></span>
<div>
<div class="who__name" data-case-name>Ana R.</div>
<div class="who__meta" data-case-meta>Outbound · Spanish / English</div>
</div>
</div>
<span class="live">01:12</span>
</div>
<div class="transcript seq" data-case-transcript>
<div class="msg msg--a"><div class="bubble bubble--a"><span class="bubble__who">Agent</span><span>Hi Ana — calling to confirm Thursday at 3 PM.</span></div></div>
<div class="msg msg--c"><div class="bubble bubble--c"><span class="bubble__who">Ana</span><span>¿Podemos pasarlo al viernes en la mañana?</span></div></div>
<div class="msg msg--e"><span class="chip"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-wrench"></use></svg><span class="chip__label">Tool</span><span>calendar.reschedule("fri 10:00")</span></span></div>
<div class="msg msg--a"><div class="bubble bubble--a"><span class="bubble__who">Agent</span><span>¡Listo! Viernes a las 10 AM. Nos vemos.</span></div></div>
</div>
</div>
<div class="uc__side" data-reveal style="--i: 1">
<p class="uc__lead" data-case-lead>Confirms, reschedules, and books — in the caller's language.</p>
<ul class="uses" data-case-uses>
<li><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-phone-outgoing"></use></svg>Outbound calls</li>
<li><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-wrench"></use></svg>Custom tools</li>
<li><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-languages"></use></svg>Code-switching</li>
</ul>
<a class="arrow-link" href="autopilot/">
<span data-i18n="uc.see">See the example</span>
<svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</section>
<!-- Capabilities -->
<section class="section" style="padding-top: 0">
<div class="container">
<h2 class="t-h3" data-i18n="caps.title" data-reveal>Everything a phone call needs.</h2>
<div class="caps-grid" data-reveal>
<div class="cap"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-hash"></use></svg><span data-i18n="caps.numbers">Phone numbers</span></div>
<div class="cap" style="--i: 1"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-network"></use></svg><span data-i18n="caps.sip">SIP trunking</span></div>
<div class="cap" style="--i: 2"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-phone-forwarded"></use></svg><span data-i18n="caps.transfer">Call transfer</span></div>
<div class="cap" style="--i: 3"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-voicemail"></use></svg><span data-i18n="caps.voicemail">Voicemail detection</span></div>
<div class="cap" style="--i: 4"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-mic"></use></svg><span data-i18n="caps.barge">Barge-in</span></div>
<div class="cap" style="--i: 5"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-languages"></use></svg><span data-i18n="caps.multi">Multilingual</span></div>
<div class="cap" style="--i: 6"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-book-open"></use></svg><span data-i18n="caps.kb">Knowledge base</span></div>
<div class="cap" style="--i: 7"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-wrench"></use></svg><span data-i18n="caps.tools">Custom tools</span></div>
<div class="cap" style="--i: 8"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-plug"></use></svg><span data-i18n="caps.mcp">MCP server</span></div>
<div class="cap" style="--i: 9"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-circle-dot"></use></svg><span data-i18n="caps.recording">Call recording</span></div>
<div class="cap" style="--i: 10"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-audio-waveform"></use></svg><span data-i18n="caps.noise">Noise filtering</span></div>
<div class="cap" style="--i: 11"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-webhook"></use></svg><span data-i18n="caps.events">Events & webhooks</span></div>
</div>
</div>
</section>
<!-- Any model, any carrier -->
<section class="section pipe" data-loop>
<div class="container">
<h2 class="t-h2" data-i18n="pipe.title" data-reveal>Any model.<br class="br-m" /> Any carrier.</h2>
<p class="t-sub" style="margin-top: 12px; --i: 1" data-i18n="pipe.sub" data-reveal>Swap providers with one line. No lock‑in.</p>
<div class="pipe__flow" data-reveal style="--i: 2">
<div class="step" style="--i: 0">
<div class="step__icon"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-phone-call"></use></svg></div>
<div>
<div class="step__name" data-i18n="pipe.call">Call</div>
<div class="step__vendors">PSTN · SIP · WebRTC</div>
</div>
</div>
<div class="plink" style="--i: 1" aria-hidden="true"><i></i></div>
<div class="step" style="--i: 1">
<div class="step__icon"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-ear"></use></svg></div>
<div>
<div class="step__name" data-i18n="pipe.hear">Hear</div>
<div class="step__vendors">Deepgram · Google</div>
</div>
</div>
<div class="plink" style="--i: 2" aria-hidden="true"><i></i></div>
<div class="step" style="--i: 2">
<div class="step__icon"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-sparkles"></use></svg></div>
<div>
<div class="step__name" data-i18n="pipe.think">Think</div>
<div class="step__vendors">OpenAI · Anthropic<br />Gemini · Groq · Ollama</div>
</div>
</div>
<div class="plink" style="--i: 3" aria-hidden="true"><i></i></div>
<div class="step" style="--i: 3">
<div class="step__icon"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-audio-lines"></use></svg></div>
<div>
<div class="step__name" data-i18n="pipe.speak">Speak</div>
<div class="step__vendors">ElevenLabs · Azure<br />Deepgram · Google</div>
</div>
</div>
</div>
</div>
</section>
<!-- Autopilot block -->
<section class="band">
<div class="container section split">
<div class="split__copy" data-reveal>
<span class="eyebrow"><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-bot"></use></svg><span data-i18n="ap.eyebrow">Autopilot</span></span>
<h2 class="t-h2" data-i18n="ap.blockTitle">Your agent is a YAML file.</h2>
<p class="t-sub" data-i18n="ap.blockSub">Pick the voice, the model, and the prompt. Deploy with one command.</p>
<a class="arrow-link" href="autopilot/">
<span data-i18n="ap.learn">Learn more about Autopilot</span>
<svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-arrow-right"></use></svg>
</a>
</div>
<div class="window" data-reveal style="--i: 1">
<div class="window__bar"><i></i><i></i><i></i>agent.yaml</div>
<pre class="code show-d"><code><span class="l"><span class="k">name</span>: <span class="v">front-desk</span></span><span
class="l"><span class="k">type</span>: <span class="v">AUTOPILOT</span></span><span
class="l"><span class="k">speechToText</span>:</span><span
class="l"> <span class="k">productRef</span>: <span class="v">stt.deepgram</span></span><span
class="l"> <span class="k">config</span>: { <span class="k">model</span>: <span class="v">nova-3</span>, <span class="k">languageCode</span>: <span class="v">multi</span> }</span><span
class="l"><span class="k">textToSpeech</span>:</span><span
class="l"> <span class="k">productRef</span>: <span class="v">tts.deepgram</span></span><span
class="l"> <span class="k">config</span>: { <span class="k">voice</span>: <span class="v">aura-asteria-en</span> }</span><span
class="l"><span class="k">intelligence</span>:</span><span
class="l"> <span class="k">productRef</span>: <span class="v">llm.openai</span></span><span
class="l"> <span class="k">config</span>:</span><span
class="l"> <span class="k">languageModel</span>: { <span class="k">provider</span>: <span class="v">openai</span>, <span class="k">model</span>: <span class="v">gpt-4o</span> }</span><span
class="l"> <span class="k">conversationSettings</span>:</span><span
class="l"> <span class="k">firstMessage</span>: <span class="v">"Hi! How can I help?"</span></span><span
class="l"> <span class="k">systemPrompt</span>: <span class="v">"You book appointments."</span></span><span
class="l"><span class="c"> # + tools, knowledge base, transfer…</span></span></code></pre>
<pre class="code show-m"><code><span class="l"><span class="k">name</span>: <span class="v">front-desk</span></span><span
class="l"><span class="k">type</span>: <span class="v">AUTOPILOT</span></span><span
class="l"><span class="k">speechToText</span>:</span><span
class="l"> <span class="k">productRef</span>: <span class="v">stt.deepgram</span></span><span
class="l"> <span class="k">config</span>:</span><span
class="l"> <span class="k">model</span>: <span class="v">nova-3</span></span><span
class="l"> <span class="k">languageCode</span>: <span class="v">multi</span></span><span
class="l"><span class="k">textToSpeech</span>:</span><span
class="l"> <span class="k">productRef</span>: <span class="v">tts.deepgram</span></span><span
class="l"> <span class="k">config</span>: { <span class="k">voice</span>: <span class="v">aura-asteria-en</span> }</span><span
class="l"><span class="k">intelligence</span>:</span><span
class="l"> <span class="k">productRef</span>: <span class="v">llm.openai</span></span><span
class="l"> <span class="k">config</span>:</span><span
class="l"> <span class="k">languageModel</span>:</span><span
class="l"> <span class="k">provider</span>: <span class="v">openai</span></span><span
class="l"> <span class="k">model</span>: <span class="v">gpt-4o</span></span><span
class="l"> <span class="k">conversationSettings</span>:</span><span
class="l"> <span class="k">firstMessage</span>: <span class="v">"Hi! How can I help?"</span></span><span
class="l"> <span class="k">systemPrompt</span>: <span class="v">"You book appointments."</span></span><span
class="l"><span class="c"> # + tools, knowledge base, transfer…</span></span></code></pre>
<div class="term">
<div class="term__line">
<span class="term__prompt">$</span>
<span><span data-type="fonoster applications:create -f agent.yaml" data-type-m="fonoster \\n applications:create -f agent.yaml">fonoster applications:create -f agent.yaml</span><span class="caret" aria-hidden="true"></span></span>
</div>
<div class="term__out" data-type-out>Done!</div>
</div>
</div>
</div>
</section>
<!-- Deploy -->
<section class="section">
<div class="container">
<h2 class="t-h2" data-i18n="deploy.title" data-reveal>Deploy anywhere.</h2>
<div class="deploy__grid">
<a class="dcard dcard--hi" href="https://app.fonoster.ai/sign-in" data-reveal>
<svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-cloud"></use></svg>
<span class="dcard__name" data-i18n="deploy.cloud">Cloud</span>
<span class="dcard__line" data-i18n="deploy.cloudLine">Managed. Scales with you.</span>
<span class="arrow-link"><span data-i18n="cta.start">Start building</span><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-arrow-right"></use></svg></span>
</a>
<a class="dcard" href="https://docs.fonoster.com/self-hosting" data-reveal style="--i: 1">
<svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-server"></use></svg>
<span class="dcard__name" data-i18n="deploy.self">Self-hosted</span>
<span class="dcard__line" data-i18n="deploy.selfLine">Open-source core, MIT.</span>
<span class="arrow-link mono">docker compose up<svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-arrow-right"></use></svg></span>
</a>
<a class="dcard" href="mailto:sales@fonoster.com" data-contact data-reveal style="--i: 2">
<svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-building-2"></use></svg>
<span class="dcard__name" data-i18n="deploy.ent">Enterprise</span>
<span class="dcard__line" data-i18n="deploy.entLine">SLAs, support, on-prem.</span>
<span class="arrow-link"><span data-i18n="deploy.talk">Talk to us</span><svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-arrow-right"></use></svg></span>
</a>
</div>
</div>
</section>
<!-- Final CTA -->
<section class="final" data-loop>
<div class="atmos atmos--bottom" aria-hidden="true">
<div class="dots"><i class="dots__wave"></i></div>
</div>
<div class="container final__in">
<h2 class="t-h1" data-i18n="final.title" data-reveal>Your first agent<br />on the phone today.</h2>
<div class="ctas" data-reveal style="--i: 1">
<a class="btn btn--primary" href="https://app.fonoster.ai/sign-in" data-i18n="cta.start">Start building</a>
<a class="btn btn--secondary" href="mailto:sales@fonoster.com" data-contact data-i18n="cta.sales">Contact sales</a>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container footer__in">
<span class="footer__copy" data-i18n="footer.rights">© 2026 Fonoster Inc.</span>
<nav class="footer__links" aria-label="Footer">
<a href="https://docs.fonoster.com/" data-i18n="nav.docs">Docs</a>
<a href="https://github.com/fonoster/fonoster">GitHub</a>
<a href="https://discord.gg/4QWgSz4hTC">Discord</a>
<a href="https://x.com/fonoster">X</a>
<a href="terms/" data-i18n="footer.terms">Terms</a>
<a href="privacy/" data-i18n="footer.privacy">Privacy</a>
</nav>
<div class="prefs">
<label class="prefs__item">
<svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-globe"></use></svg>
<span class="sr-only" data-i18n="prefs.language">Language</span>
<select data-pref="lang">
<option value="en">English</option>
<option value="es">Español</option>
</select>
<svg class="icon chev" aria-hidden="true"><use href="assets/img/icons.svg#i-chevron-down"></use></svg>
</label>
<span class="prefs__div" aria-hidden="true"></span>
<label class="prefs__item">
<svg class="icon" aria-hidden="true" data-theme-icon><use href="assets/img/icons.svg#i-moon"></use></svg>
<span class="sr-only" data-i18n="prefs.theme">Theme</span>
<select data-pref="theme">
<option value="dark" data-i18n="prefs.dark">Dark</option>
<option value="light" data-i18n="prefs.light">Light</option>
</select>
<svg class="icon chev" aria-hidden="true"><use href="assets/img/icons.svg#i-chevron-down"></use></svg>
</label>
</div>
</div>
</footer>
<dialog class="contact" id="contact" aria-labelledby="contact-title">
<div class="contact__card">
<div class="contact__head">
<svg class="icon contact__mail" aria-hidden="true"><use href="assets/img/icons.svg#i-mail"></use></svg>
<button class="contact__close" type="button" aria-label="Close" data-i18n-attr="aria-label:contact.close" data-contact-close>
<svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-x"></use></svg>
</button>
</div>
<h2 class="contact__title" id="contact-title" data-i18n="contact.title">Contact sales</h2>
<p class="contact__line" data-i18n="contact.line">Enterprise plans, Private Regions or support.</p>
<div class="contact__field">
<input class="contact__email" type="text" value="sales@fonoster.com" readonly aria-label="Email address" data-i18n-attr="aria-label:contact.email" />
<button class="btn btn--secondary btn--sm contact__copy" type="button" data-copy>
<svg class="icon" aria-hidden="true"><use href="assets/img/icons.svg#i-copy"></use></svg>
<span aria-live="polite" data-i18n="contact.copy">Copy</span>
</button>
</div>
</div>
</dialog>
<script src="assets/js/i18n.js"></script>
<script src="assets/js/v1.js"></script>
</body>
</html>