Integrate Znatoka

Easiest way — embed widget

No chat UI to build. Create a conversation (step 1) to get a token for each party, then paste this single lineon your platform's page — a floating chat bubble appears (like Tawk.to), with no contact leaking:

<script src="https://znatoka.com/embed.js"
        data-token="<this_party_token>" async></script>

The token is in buyer_url/seller_url (the part after /c/), or use the buyer_embed/seller_embedfield from the create response directly — it's already a ready-to-paste snippet. Options: data-position="left|right", data-color="#5b7cfa", data-label="Help", data-fullscreen="mobile|always|off" (default mobile — opens full-screen on phones so nothing looks cramped).

Support widget + unread badge

embed.jsabove needs a token per party — it suits buyer↔seller disputes you create from your backend. For plain visitor → support chat on your own site, use widget.js instead: paste one line on every page, no backend call, no token to manage.

<script src="https://znatoka.com/widget.js"
        data-site="<your widget_key>" async></script>

Your widget_key (wk_...) is public — it is safe in page source, unlike your api_key. The widget gives each visitor a random id in localStorage and keeps one open conversation per visitor, so a returning visitor lands back in the same thread. Read and reply to everything in the admin inbox.

Unread badge

When you reply and the visitor has the panel closed, a red count appears on the bubble — no setup needed, it is on by default. It works because the widget loads the chat hidden as soon as the page does, so its realtime stream is already connected before anyone clicks the bubble. The count clears the moment the visitor opens the panel, and is remembered per browser, so a page reload will not re-announce messages they already read.

If the tab is in the background, the page title also blinks (1) Pesan baru until the visitor comes back. It never blinks while they are looking at the page, and the original title is always restored. Turn it off with data-title-alert="off".

Options

<script src="https://znatoka.com/widget.js"
        data-site="wk_..."
        data-label="Help"            <!-- bubble tooltip + screen-reader name -->
        data-position="left"         <!-- left | right (default right) -->
        data-color="#5b7cfa"         <!-- bubble gradient start -->
        data-fullscreen="mobile"     <!-- mobile | always | off -->
        data-title-alert="on"        <!-- on | off: blink the tab title -->
        async></script>

Everything renders in a shadow root, so your CSS and the widget's cannot affect each other. data-fullscreen="mobile" (the default) opens full-screen on phones so nothing looks cramped. The bubble is a real <button> whose accessible name carries the unread count, and the count is announced politely to screen readers.

Brand colors & chat theme

Make each chat look like your brand: colors, font and bubble shape of the chat page (/c/:token), the embed and the support widget — rendered server-side, so visitors see your colors from the first pixel. Every chat link can carry its own colors, so several brands on one account just use different parameters.

Order of precedence: Znatoka default ← account theme (/api/v1/theme) ← conversation theme ← URL parameters / data-* attributes.

https://znatoka.com/c/<token>?mode=light&primary=e11d48&on_primary=ffffff&background=ffffff&header=fff1f2&text=1f2937&muted=6b7280&border=fecdd3&bubble_other=f3f4f6&bubble_other_text=111827&radius=18&font=poppins

<script src="https://znatoka.com/embed.js" data-token="<token>"
        data-mode="light"
        data-primary="e11d48"
        data-on-primary="ffffff"
        data-background="ffffff"
        data-header="fff1f2"
        data-text="1f2937"
        data-muted="6b7280"
        data-border="fecdd3"
        data-bubble-other="f3f4f6"
        data-bubble-other-text="111827"
        data-radius="18"
        data-font="poppins" async></script>

curl -X PATCH https://znatoka.com/api/v1/theme \
  -H "X-Api-Key: <your api_key>" \
  -H "Content-Type: application/json" \
  -d '{"mode":"light","primary":"#e11d48","on_primary":"#ffffff","background":"#ffffff","header":"#fff1f2","text":"#1f2937","muted":"#6b7280","border":"#fecdd3","bubble_other":"#f3f4f6","bubble_other_text":"#111827","radius":18,"font":"poppins"}'

Per-brand / per-conversation

POST https://znatoka.com/api/v1/conversations
X-Api-Key: <tenant api_key>
Content-Type: application/json

{
  "external_ref": "ORDER-77",
  "buyer":  { "name": "Buyer #77" },
  "seller": { "name": "Shop B" },
  "theme":  { "primary": "#16a34a", "mode": "light" }
}

# change one conversation later (only the fields you send are overridden)
PUT https://znatoka.com/api/v1/conversations/<id>/theme
{ "primary": "#0ea5e9", "bubble_other": "#e0f2fe" }

# read the current theme + the list of accepted fields
GET https://znatoka.com/api/v1/theme

# back to the default look
DELETE https://znatoka.com/api/v1/theme

# bad value -> 422
{ "error": "invalid_theme", "fields": { "primary": "must be a hex color like #1a73e8" } }

Fields

All fields are optional. Colors must be hex (#rgb, #rrggbb, #rrggbbaa) — other CSS values are rejected so a theme can never inject styles into the page. The widget launcher uses primary unless you set data-color on the script tag.

Official SDK (Node/TypeScript)

The chatdisiniaja package wraps the REST API + HMAC webhook verification + embed helpers, fully typed.

npm install chatdisiniaja

import { Chatdisiniaja } from 'chatdisiniaja';
const cdj = new Chatdisiniaja({ apiKey: process.env.CHATDISINIAJA_API_KEY! });
const conv = await cdj.createConversation({
  externalRef: 'REFUND-123',
  buyer: { name: 'Buyer #4821' },
  seller: { name: 'Seller (anonymous)' },
});
// paste conv.buyer_embed / conv.seller_embed on each party's page

Authentication

All /api/v1/* endpoints require the header X-Api-Key: <api_key>. Participant endpoints /c/:token/* are opened directly by the buyer/seller via a secret link — no API key. Keep your api key server-side only.

Endpoints

1. Create a conversation

buyer.name/seller.name is the label the other party sees — anonymize here.

POST https://znatoka.com/api/v1/conversations
X-Api-Key: <tenant api_key>
Content-Type: application/json

{
  "external_ref": "REFUND-PR05001",
  "subject": "Refund: Gmail can't log in",
  "buyer":  { "name": "Buyer #4821" },
  "seller": { "name": "Seller (anonymous)" }
}

201
{ "id": "...", "buyer_url": "https://znatoka.com/c/...", "seller_url": "https://znatoka.com/c/..." }

2. Webhook on incoming message optional

To enable it, set the tenant webhook_url in the Portal. On each incoming message we POST the event below; use open_conversation_url to notify notify_role.

POST <your tenant webhook_url>
X-Chatdisiniaja-Signature: sha256=<HMAC-SHA256(body, webhook_secret)>

{
  "event": "message.created",
  "conversation_id": "...", "external_ref": "REFUND-PR05001",
  "sender_role": "buyer",
  "preview": "Hi, the account won't log in...",
  "notify_role": "seller",
  "open_conversation_url": "https://znatoka.com/c/<token>"
}

3. Verify the webhook signature (Node.js)

Only needed if you use webhooks. Compute the HMAC over the raw request body, before JSON parsing.

const crypto = require('crypto');
function verify(rawBody, header, secret) {
  const sig = (header || '').replace(/^sha256=/, '');
  const exp = crypto.createHmac('sha256', secret).update(rawBody).digest('hex');
  return sig.length === exp.length &&
    crypto.timingSafeEqual(Buffer.from(sig), Buffer.from(exp));
}