> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.bitbybit.studio/llms.txt
> Use this file to discover all available pages before exploring further.

# bitbybit Knowledge Base

> Learn what bitbybit is and how its products work together for support, marketing, and commerce, then pick a product to see its guides.

<div className="mdx-content prose prose-gray dark:prose-invert max-w-8xl mx-auto px-4 lg:px-9 py-10">
  <div className="not-prose flex flex-col items-center text-center gap-4 pt-4 pb-14 mb-14 border-b border-gray-200 dark:border-gray-800">
    <div className="flex items-center gap-3">
      <img className="block dark:hidden h-7 w-auto" src="https://mintcdn.com/asmaraku/nZyY0hfEetyr-2AU/images/bitbybit-logo-accent.png?fit=max&auto=format&n=nZyY0hfEetyr-2AU&q=85&s=d8dbcaa1bb440f7b5916ab18ef4dfe34" alt="bitbybit" noZoom width="1600" height="900" data-path="images/bitbybit-logo-accent.png" />

      <img className="hidden dark:block h-7 w-auto" src="https://mintcdn.com/asmaraku/INfC2WML6vCe0qSf/images/bitbybit-logo-white.png?fit=max&auto=format&n=INfC2WML6vCe0qSf&q=85&s=13be88719705c624acc3c44e8ac243e7" alt="bitbybit" noZoom width="1080" height="454" data-path="images/bitbybit-logo-white.png" />

      <span className="text-xs font-semibold uppercase tracking-wider text-gray-400 border-l border-gray-200 dark:border-gray-700 pl-3">Knowledge Base</span>
    </div>

    <h1 className="mt-2 text-4xl md:text-5xl font-bold text-gray-900 dark:text-gray-100 max-w-2xl leading-tight">One AI platform for support, marketing, and commerce</h1>
    <p className="max-w-xl text-lg text-gray-600 dark:text-gray-400">Pick a product below to find setup guides and tutorials.</p>

    <div className="flex flex-wrap justify-center gap-2 mt-2 text-xs">
      <a href="#browse-by-product" className="rounded-full border border-gray-200 dark:border-gray-700 px-4 py-1.5 font-semibold text-gray-700 dark:text-gray-300 hover:border-primary hover:text-primary">bitCRM</a>
      <a href="#browse-by-product" className="rounded-full border border-gray-200 dark:border-gray-700 px-4 py-1.5 font-semibold text-gray-700 dark:text-gray-300 hover:border-primary hover:text-primary">bitChat</a>
      <a href="#browse-by-product" className="rounded-full border border-gray-200 dark:border-gray-700 px-4 py-1.5 font-semibold text-gray-700 dark:text-gray-300 hover:border-primary hover:text-primary">WhatsApp Commerce</a>
      <a href="#browse-by-product" className="rounded-full border border-gray-200 dark:border-gray-700 px-4 py-1.5 font-semibold text-gray-700 dark:text-gray-300 hover:border-primary hover:text-primary">AI Studio</a>
    </div>
  </div>

  ## What is bitbybit Studio?

  bitbybit Studio connects customer conversations, customer data, and business actions across the products you use. It helps your team understand who a customer is, what they need, and what to do next — whether that means answering a question, following up with a relevant campaign, helping them buy, or bringing them back.

  <div className="not-prose grid gap-4 md:grid-cols-3 my-6">
    <div className="rounded-xl border border-gray-200 dark:border-gray-800 p-5">
      <div className="flex items-center gap-3">
        <span className="flex h-7 w-7 items-center justify-center rounded-md bg-primary/10 text-sm font-semibold text-primary">1</span>
        <span className="font-semibold text-gray-900 dark:text-gray-100">One shared customer context</span>
      </div>

      <p className="mt-3 text-sm leading-6 text-gray-600 dark:text-gray-400">Bring together customer signals from connected channels and product activity, so teams can respond and follow up with more context.</p>
    </div>

    <div className="rounded-xl border border-gray-200 dark:border-gray-800 p-5">
      <div className="flex items-center gap-3">
        <span className="flex h-7 w-7 items-center justify-center rounded-md bg-emerald-500/10 text-sm font-semibold text-emerald-600 dark:text-emerald-400">2</span>
        <span className="font-semibold text-gray-900 dark:text-gray-100">AI that turns conversations into action</span>
      </div>

      <p className="mt-3 text-sm leading-6 text-gray-600 dark:text-gray-400">Use AI to answer questions, qualify customer intent, recommend relevant products, and prepare a contextual handoff when a person needs to step in.</p>
    </div>

    <div className="rounded-xl border border-gray-200 dark:border-gray-800 p-5">
      <div className="flex items-center gap-3">
        <span className="flex h-7 w-7 items-center justify-center rounded-md bg-amber-500/10 text-sm font-semibold text-amber-600 dark:text-amber-400">3</span>
        <span className="font-semibold text-gray-900 dark:text-gray-100">From conversation to customer growth</span>
      </div>

      <p className="mt-3 text-sm leading-6 text-gray-600 dark:text-gray-400">Connect support interactions with segmentation, campaigns, automations, commerce, and loyalty to move customers from their first question toward purchase and repeat engagement.</p>
    </div>
  </div>

  <div className="not-prose rounded-xl border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/40 p-8 my-8">
    <p className="text-center text-xs font-semibold uppercase tracking-wider text-gray-400 mb-6">How the products connect</p>

    <div className="flex items-center justify-center gap-1 flex-wrap">
      <div className="flex flex-col items-center gap-1 w-40">
        <div className="h-14 w-14 rounded-2xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex items-center justify-center text-gray-900 dark:text-gray-100">
          <Icon icon="comments" size={22} />
        </div>

        <span className="text-sm font-semibold text-gray-900 dark:text-gray-100">Chat</span>
        <span className="text-xs text-gray-400 text-center">Customer messages in</span>
      </div>

      <Icon icon="chevron-right" size={16} className="text-gray-300 dark:text-gray-600 flex-shrink-0" />

      <div className="flex flex-col items-center gap-1 w-40">
        <div className="h-14 w-14 rounded-2xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex items-center justify-center text-primary">
          <Icon icon="robot" size={22} />
        </div>

        <span className="text-sm font-semibold text-gray-900 dark:text-gray-100">AI Studio</span>
        <span className="text-xs text-gray-400 text-center">Answers & qualifies</span>
      </div>

      <Icon icon="chevron-right" size={16} className="text-gray-300 dark:text-gray-600 flex-shrink-0" />

      <div className="flex flex-col items-center gap-1 w-40">
        <div className="h-14 w-14 rounded-2xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex items-center justify-center text-gray-900 dark:text-gray-100">
          <Icon icon="bullhorn" size={22} />
        </div>

        <span className="text-sm font-semibold text-gray-900 dark:text-gray-100">bitCRM</span>
        <span className="text-xs text-gray-400 text-center">Segments & follows up</span>
      </div>

      <Icon icon="chevron-right" size={16} className="text-gray-300 dark:text-gray-600 flex-shrink-0" />

      <div className="flex flex-col items-center gap-1 w-40">
        <div className="h-14 w-14 rounded-2xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex items-center justify-center text-gray-900 dark:text-gray-100">
          <Icon icon="cart-shopping" size={22} />
        </div>

        <span className="text-sm font-semibold text-gray-900 dark:text-gray-100">Commerce</span>
        <span className="text-xs text-gray-400 text-center">Order, pay, reward</span>
      </div>
    </div>
  </div>

  ## Browse by product

  Each product has its own guides for setup, everyday tasks, and troubleshooting. Pick the one that matches what you want to do.

  <CardGroup cols={2}>
    <Card title="bitCRM" icon="bullhorn" href="/bitcrm/overview">
      Send WhatsApp Campaigns, build multi-step Automations, and segment your customers.
    </Card>

    <Card title="bitChat" icon="comments" href="/bitchat/overview">
      Run a shared inbox, automate replies with a chatbot, and add a chat widget to your store.
    </Card>

    <Card title="bitbybit Commerce" icon="cart-shopping" href="/whatsapp-commerce/overview">
      Sell inside WhatsApp — build a product Catalog, take Orders, and get paid.
    </Card>

    <Card title="bitLoyalty" icon="gift" href="/loyalty/overview">
      Award points on purchase, create reward vouchers, and track redemption per customer.
    </Card>

    <Card title="bitApp" icon="mobile" href="/bitapp/overview">
      Build and publish a mobile app for your Shopify store, then send push notifications.
    </Card>

    <Card title="bitLink" icon="link" href="/bitlink/overview">
      Build a link-in-bio page, design it to match your brand, and share one link everywhere.
    </Card>

    <Card title="AI Studio" icon="robot" href="/ai-studio/overview">
      Configure the AI agent that answers your customers, ground it with a Knowledge Base, and test it.
    </Card>
  </CardGroup>

  <Note>
    Shopify and WhatsApp Commerce are separate commerce setups. Connect the one that matches how your business sells — connecting Shopify does not make the two one shared store system.
  </Note>

  ## Set up and connect

  Connect your channels and store before you start, manage your team and account, or build on bitbybit with the API.

  <CardGroup cols={2}>
    <Card title="Integrations" icon="plug" href="/integrations/overview">
      Connect WhatsApp, Instagram, Facebook, TikTok, Shopify, payments, and shipping providers.
    </Card>

    <Card title="Settings" icon="gear" href="/settings/overview">
      Manage company details, users, AI token top-ups, and your Company ID.
    </Card>

    <Card title="API Reference" icon="code" href="/api-reference/introduction">
      REST endpoints for customers, orders, products, messaging, and loyalty.
    </Card>
  </CardGroup>

  <div className="not-prose border-t border-gray-200 dark:border-gray-800 mt-10 pt-10" />

  <div className="not-prose flex items-center justify-between gap-6 flex-wrap rounded-xl border border-orange-200 dark:border-orange-900/40 bg-orange-50 dark:bg-orange-950/20 p-6">
    <div className="flex items-center gap-4">
      <div className="h-11 w-11 flex-shrink-0 rounded-xl bg-white dark:bg-gray-900 border border-orange-200 dark:border-orange-900/40 flex items-center justify-center text-primary">
        <Icon icon="magnifying-glass" size={18} />
      </div>

      <div className="flex flex-col">
        <span className="font-bold text-gray-900 dark:text-gray-100">Can't find what you're looking for?</span>
        <span className="text-sm text-gray-500 dark:text-gray-400">Our team can help over WhatsApp.</span>
      </div>
    </div>

    <a href="https://api.whatsapp.com/send/?phone=6281514231000&text=Hello%20bitbybit%20team%2C%20I%20need%20some%20assistance%0Ahttps%3A%2F%2Fknowledge.bitbybit.studio%2F" target="_blank" rel="noopener" className="flex-shrink-0 rounded-full bg-primary text-white text-sm font-semibold px-6 py-2.5 no-underline hover:opacity-90">Contact Support</a>
  </div>
</div>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.