<section class="hero">
  <p class="eyebrow">Chat Widgets</p>
  <h1>Put an AI rep on every page — and build your own AI tools.</h1>
  <p class="lead">Scike sites come with embeddable chat widgets you can drop anywhere with a single
  shortcode: an always-on sales &amp; support rep, banners, and a player for your characters. Want
  something custom? Build your own narrow AI widget in the Studio.</p>
  <p><a class="button button--primary" href="/pricing">Get Started →</a>
     <a class="button button--secondary" href="/pricing">See pricing</a></p>
</section>

<section>
  <h2>An AI sales &amp; support rep, on tap</h2>
  <p>The <strong>Sales &amp; Support widget</strong> (<code>[tsai_sas]</code>) is an AI assistant
  that lives on your site and talks to your visitors — answering product questions, helping people
  find what they need, and never clocking out. Point it at any of your characters, choose how it
  appears (inline, modal pop-up, or a new tab), and label the button however you like.</p>
  <pre><code>[tsai_sas mode="modal" name="alma" label="Chat with Alma"]</code></pre>
</section>

<section>
  <h2>More ready-made embeds</h2>
  <p>Every Scike site ships with the <strong>tsai-plugin</strong>, which adds simple shortcodes:</p>
  <table>
    <thead>
      <tr><th>Shortcode</th><th>What it does</th><th>Handy options</th></tr>
    </thead>
    <tbody>
      <tr><td><code>[tsai_sas]</code></td><td>Sales &amp; support chat rep</td><td><code>mode</code> (inline/modal/newtab), <code>name</code> (character), <code>label</code></td></tr>
      <tr><td><code>[tsai_banner]</code></td><td>Banner / affiliates widget</td><td><code>mode</code>, <code>banner_id</code>, <code>theme</code> (dark/light), <code>width</code>, <code>height</code></td></tr>
      <tr><td><code>[tsai_player]</code></td><td>Player app — browse characters &amp; widgets</td><td><code>mode</code>, <code>route</code>, <code>width</code>, <code>height</code></td></tr>
    </tbody>
  </table>
  <pre><code>[tsai_banner theme="light"]
[tsai_player mode="inline" route="character/alma" height="800px"]</code></pre>
  <p>Drop a shortcode into any page or post and the widget appears — no code, no embeds to wrangle.</p>
</section>

<section>
  <h2>Build your own narrow AI widgets</h2>
  <p>Beyond the built-ins, the Studio's <strong>Widget Manager</strong> lets you create, edit, and
  use your own <strong>narrow AI widgets</strong> — focused chat tools tuned for one job. For each
  widget you control:</p>
  <ul>
    <li><strong>Instructions</strong> — the system prompt that defines its behavior and personality.</li>
    <li><strong>AI model</strong> — OpenAI or Claude, with temperature and max-tokens settings.</li>
    <li><strong>Streaming responses</strong> — show tokens as they're generated for a live feel.</li>
    <li><strong>Structured (JSON) output</strong> — get machine-readable responses when you need them.</li>
    <li><strong>LangChain orchestration</strong> — enable advanced multi-step behavior.</li>
    <li><strong>Initial message &amp; hints</strong> — greet users and guide their first input.</li>
    <li><strong>Interaction options</strong> — let users send images, save conversations to the CMS,
    copy text, generate images from the chat, start new conversations, and more.</li>
    <li><strong>Appearance</strong> — name, icon, description, theme color, enabled/hidden state.</li>
  </ul>
  <p>Scike also ships a library of example widgets — general-purpose chat, character chat, "Top Ten"
  fact lists, the Image Studio, and more — to use as-is or as starting points.</p>
</section>

<section>
  <h2>One platform, many surfaces</h2>
  <p>Because widgets are configured in the Studio and embedded via shortcodes, the same AI can show
  up as a support bubble on your homepage, an inline tool inside an article, or a full-page
  experience — all consistent, all under your control.</p>
</section>

<section class="cta-band">
  <h2>Give every visitor someone to talk to.</h2>
  <p>Launch a sales &amp; support rep today, then build the custom tools your site needs.</p>
  <p><a class="button button--primary" href="/pricing">Get Started →</a>
     <a class="button button--secondary" href="/features/content-engine">Explore the Content Engine</a></p>
</section>