On your website and on WhatsApp

GroceryAI Web Chat

The same assistant, on your website and on WhatsApp. Your customers write their shopping list in their own words, and the GroceryAI assistant answers with your catalogue and your brand — wherever they choose to write from.

The button in the bottom corner of this page is GroceryAI Web Chat itself.

Install

One script tag

Paste this line into your site, before the closing </body>. The site key is a publishable key, designed only to open chat sessions for your site: it is being introduced now (see below), and until then server mode is the way in.

<script src="https://groceryai.ai/plugin/v1.js"
        data-site-key="gai_pk_…"
        data-site="your-site-id"
        async></script>

Server mode

If your site has a server, it can open the session itself with your secret API key and hand the page only the session token. The secret key never reaches the browser. When the token expires, the Web Chat calls your refresh function and carries on.

// 1. On your server, with your secret API key (never in the browser):
POST <your GroceryAI endpoint>/session
Authorization: Bearer <secret API key>
→ { "session_token": "…", "expires_at": "…", "brand": { … }, "environment": "live" }

// 2. In your page:
<script src="https://groceryai.ai/plugin/v1.js" async></script>
<script>
  window.GroceryAI.open({
    token: session_token,
    expiresAt: expires_at,
    brand: brand,
    refresh: () => fetch("/your/session/route").then((r) => r.json())
      .then((s) => ({ token: s.session_token, expiresAt: s.expires_at })),
  });
</script>

Your colours

:root {
  --gai-accent: #0a7d4f;   /* button, header, send */
  --gai-bg: #ffffff;       /* panel */
  --gai-surface: #f6f7f9;  /* conversation */
  --gai-text: #14181d;
}

What it does

What GroceryAI Web Chat does today

A chat on your own site

A floating button opens the conversation: full screen on a phone, a 380 × 600 window on a computer. Right-to-left languages get the mirrored layout.

Your brand and your language

The store name and default language come from your GroceryAI configuration, not from the script: the same tag works for every store.

The same assistant as on WhatsApp

Messages go to the GroceryAI platform through its web channel, which is live: the same conversational engine that answers your customers on WhatsApp. Two doors, one assistant.

No personal data in the session

Each visitor is an anonymous identifier signed by the platform. The session lasts one hour and survives a page reload in the same browser tab.

Replies are text, never code

Whatever the assistant writes is shown as plain text: it is never interpreted as HTML or script on your page.

Limits that protect you

Each chat session can send up to 12 messages per minute; above that the Web Chat waits and retries by itself. The platform checks the requesting web address against the list declared for your site on every reply.

Your colours, isolated styles

Colours follow your site through CSS variables with the --gai- prefix. The Web Chat's styles live in their own layer: they do not change your page and your page does not break them.

One small file

No dependencies and no framework: a single script, under 30 KB before compression.

Not yet

What it does not do yet

  • No self-service sign-up or key management: keys are issued by our team.
  • The publishable site key (gai_pk_…) is being introduced: until it is issued for your site, use server mode.
  • Text only for now: voice notes and photos, which customers can send on WhatsApp, are not yet in the Web Chat.
  • Interface texts (buttons, notices) are set at install time with the labels option; texts from your store's language pack are not supplied automatically yet.

Want it on your site?

We set up your catalogue, your site address and your key with you.

Book a meeting