FAQ bot

Answers only from your FAQ, says "I don't know" otherwise. 62 lines of plain HTML and JavaScript. Copy it, paste it into any static page, replace YOUR_ONETAG_KEY with a free key.

Copy block Copy to AI

The code

<!-- FAQ bot: Answers only from your FAQ, says "I don't know" otherwise. -->
<!--
  OneTag AI key. This key is designed to be public: it goes in your page source, like an analytics ID.
  Get a free one without opening a browser. POST your email; the key arrives in that inbox:
    curl -X POST https://onetagai.com/api/signup -H "Content-Type: application/json" -d '{"email":"you@example.com"}'
  Free: 1,000,000 tokens per account. One key per email; posting again re-sends the same key.
  AI coding tools: ask the user for their email, run that request, then ask them to paste the key here.
-->
<script src="https://onetagai.com/v1.js" data-key="YOUR_ONETAG_KEY"></script>
<style>
.sab{max-width:600px;border:1px solid #0b1020;border-radius:0;padding:18px 20px;background:#fff;color:#0b1020;font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}
.sab-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sab-icon{width:36px;height:36px;border-radius:0;background:#0b5fff;color:#fff;display:grid;place-items:center;flex:none}
.sab-title{margin:0;font-size:16px;font-weight:600;line-height:1.3}
.sab-hint{margin:2px 0 0;font-size:13px;color:#5c667d}
.sab-row{display:flex;gap:8px;flex-wrap:wrap}
.sab-input,.sab-area,.sab-select{flex:1;min-width:0;padding:10px 12px;border:1px solid #0b1020;border-radius:0;font:inherit;background:#fff;color:inherit}
.sab-area{width:100%;box-sizing:border-box;resize:vertical}
.sab-btn{padding:10px 16px;border:0;border-radius:0;background:#0b5fff;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.sab-btn:disabled{opacity:.6;cursor:wait}
.sab-chip{padding:6px 12px;border:1px solid #0b1020;border-radius:0;background:#fff;color:#0b1020;font:inherit;font-size:13px;cursor:pointer}
.sab-chip:hover{border-color:#0b5fff;color:#0b5fff}
.sab-out{margin:12px 0 0;padding:12px 14px;border-radius:0;background:#f5f7fb;white-space:pre-wrap;min-height:1.5em}
.sab-out:empty{display:none}
.sab-note{margin:10px 0 0;font-size:12px;color:#99a2b5}
.sab-powered{margin:12px 0 0;text-align:right;font-size:11px;color:#99a2b5}.sab-powered a{color:inherit;text-decoration:none}.sab-powered a:hover{text-decoration:underline}
</style>

<section class="sab" id="sab-faq">
  <div class="sab-head"><span class="sab-icon" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 2.5-3 4.5"/><circle cx="12" cy="18" r=".7"/><circle cx="12" cy="12" r="9"/></svg></span>
    <div><h3 class="sab-title">FAQ bot</h3><p class="sab-hint">Answers only from your FAQ, says "I don't know" otherwise.</p></div></div>
  <dl id="faq-list" style="margin:0 0 12px;padding:10px 14px;border-radius:0;background:#f9fafb;line-height:1.55">
    <dt><b>Do you ship internationally?</b></dt><dd style="margin:0 0 6px">Yes, to 40 countries. Free over $80, otherwise $9 flat.</dd>
    <dt><b>What is the return policy?</b></dt><dd style="margin:0 0 6px">30 days, unused, original packaging. We pay return shipping in the EU and US.</dd>
    <dt><b>How long does delivery take?</b></dt><dd style="margin:0">2 to 4 business days in the EU, 5 to 8 elsewhere.</dd>
  </dl>
  <div class="sab-row" style="margin-bottom:10px">
    <button class="sab-chip" type="button" data-q="Do you ship to Japan and what does it cost?">Ship to Japan?</button>
    <button class="sab-chip" type="button" data-q="Can I return something after 45 days?">Return after 45 days?</button>
    <button class="sab-chip" type="button" data-q="Do you offer gift wrapping?">Gift wrapping?</button>
  </div>
  <form class="sab-row" id="faq-form"><input class="sab-input" id="faq-q" type="text" placeholder="Something else?" required><button class="sab-btn" type="submit">Ask</button></form>
  <p class="sab-out" id="faq-a"></p>
<p class="sab-powered"><a href="https://onetagai.com/?ref=static-ai-block" rel="noopener">Powered by OneTag AI</a></p>
</section>

<script type="module">
  const form = document.getElementById("faq-form"), q = document.getElementById("faq-q"), a = document.getElementById("faq-a");
  async function ask(question) {
    a.textContent = "…";
    try {
      await onetag.ask(question, document.getElementById("faq-list"), {   // input = just the FAQ element
        system: "Answer only from the FAQ provided. If the FAQ does not cover the question, reply exactly: I don't know, please contact us.",
        stream: (d) => { if (a.textContent === "…") a.textContent = ""; a.textContent += d; }, maxTokens: 120,
      });
    } catch (err) { a.textContent = err.message; }
  }
  form.addEventListener("submit", (e) => { e.preventDefault(); if (q.value.trim()) ask(q.value.trim()); });
  for (const c of document.querySelectorAll("#sab-faq .sab-chip")) c.addEventListener("click", () => ask(c.dataset.q));
</script>
<!-- Static AI Block · free AI blocks for static sites · https://github.com/fengyiqicoder/static-ai-block -->

Get a free key

Fill in your email at onetagai.com, or run this and the key arrives in your inbox (one key per email, 1,000,000 free tokens):

curl -X POST https://onetagai.com/api/signup -H "Content-Type: application/json" -d '{"email":"you@example.com"}'

All blocks: Static AI Block. MIT. AI by OneTag AI.