Fiko Developers

Website chat widget

Install Fiko's AI chat on your website and control it from JavaScript: open it from your own buttons, identify signed-in customers, start conversations and listen to events.

Fiko's website chat puts your AI agent and your team on your website. Visitors' messages arrive in the same Fiko inbox as Instagram, WhatsApp and Telegram, the AI answers from your knowledge base, and your workflows run on them. Looks, texts, the welcome teaser and allowed websites are set in the dashboard; this page covers installing it and controlling it from code.

Install

Copy the snippet from Settings → Website chat → Install. It looks like this, with your account id:

HTML

<!-- Fiko chat -->
<script src="https://api.fiko.net/static/fiko-widget.js" data-fiko-id="YOUR_ID" async></script>

Paste it before </body> on every page, or once in your site's layout or footer. It loads after your page, keeps its styles to itself and does not slow down the first paint. The same tab has an <iframe> version for site builders that don't allow scripts.

The chat only appears on the websites allowed in its settings; elsewhere the console says Fiko chat is not shown here.

JavaScript API

window.FikoChat exists as soon as the script tag is parsed. Calls made before the chat finishes loading are queued and run when it is ready.

Method	What it does
`FikoChat.open()`	Opens the chat window.
`FikoChat.close()`	Closes it.
`FikoChat.toggle()`	Opens or closes it.
`FikoChat.hide()`	Hides the chat and its button entirely, for example on a checkout page.
`FikoChat.show()`	Shows them again after `hide()`.
`FikoChat.identify({ name, email, phone })`	Tells Fiko who the visitor is: skips the contact form and saves them to the contact in Fiko.
`FikoChat.send(text)`	Opens the chat and sends a message as the visitor (up to 2,000 characters).
`FikoChat.on(event, fn)` / `FikoChat.off(event, fn)`	Listen to events, or stop listening.
`FikoChat.destroy()`	Removes the chat from the page.

Open from your own button

JavaScript

document.querySelector("#contact").addEventListener("click", () => FikoChat.open());

To show only your own button, hide Fiko's with launcher: false (see settings).

Signed-in customers

When your visitor is logged in, pass their details so they don't have to type them and the conversation is linked to the right contact in Fiko:

JavaScript

FikoChat.identify({
  name: "Sara Ahmadi",
  email: "sara@example.com",
  phone: "+90 555 123 4567",
});

Start a conversation from a page

JavaScript

// On a product page
FikoChat.send("I have a question about the blue sneakers, size 42");

Events

Event	When	Data
`ready`	The chat has connected	—
`open`	The window opened	—
`close`	The window closed	—
`message`	A message was sent or received	`{ from, text }`, `from` is `visitor` or `agent` (AI or a person on your team)

JavaScript

FikoChat.on("open", () => analytics.track("chat_opened"));
FikoChat.on("message", (m) => {
  if (m.from === "visitor") analytics.track("chat_message_sent");
});

Each event is also a browser event named fiko:<event>:

JavaScript

window.addEventListener("fiko:ready", () => console.log("Fiko chat ready"));

Settings before the script loads

Define window.fikoSettings before the Fiko script tag:

HTML

<script>
  window.fikoSettings = {
    launcher: false,                                  // no floating button; open it with FikoChat.open()
    identify: { name: "Sara", email: "sara@example.com" },
    onReady: () => console.log("Fiko chat ready"),
  };
</script>
<script src="https://api.fiko.net/static/fiko-widget.js" data-fiko-id="YOUR_ID" async></script>

Setting
`launcher`	`false` hides the floating button.
`identify`	Same as calling `FikoChat.identify()`.
`onReady`	Same as `FikoChat.on("ready", fn)`.

Single-page apps

Load the script once in your app shell. The chat stays open and keeps the conversation while visitors move between pages. Call FikoChat.hide() / show() on routes where it should not appear, and FikoChat.destroy() if you need to remove it completely.

React

// Next.js app/layout.tsx
import Script from "next/script";

<Script src="https://api.fiko.net/static/fiko-widget.js" data-fiko-id="YOUR_ID" strategy="lazyOnload" />

Content Security Policy

If your site sends a Content-Security-Policy header, allow https://api.fiko.net in script-src, connect-src and frame-src. If you restrict img-src, also allow the host of the logo or avatar you uploaded for the chat button.

Questions or something missing? Write to support@fiko.net.