Integrating

JavaScript SDK

Open calls and chats inside your own pages, in a pop-up or any element, and hear how they go.

The SDK puts a call or a chat inside your own web page: a pop-up, or any element of your page. It tells you as the call goes: when the other side joins, when it's live, when it ends.

HTML

<script src="https://spiiksi.com/spiiksi.js"></script>

TypeScript types: spiiksi.d.ts.

Open a call#

Your server starts the call with your key and gives the page a link; the page opens it.

HTML

<div id="call" style="height: 600px"></div>
<script>
  const call = Spiiksi.call.open(agentUrl, {
    container: "#call",                       // leave out for a pop-up
    onEvent: (e) => console.log(e.type),
  });
  call.on("ended", () => call.close());
</script>

Or let the SDK ask your server for the link first:

JavaScript

const call = await Spiiksi.call.start({
  endpoint: "/api/spiiksi/call",   // your endpoint
  body: { ticket: 1234 },          // sent to it as JSON
  side: "agent",                   // which link of the answer to open
  container: "#call",
});

Your endpoint answers {"url": "…"}, or passes on the whole POST /v1/calls answer and the SDK picks agent_url or customer_url:

JavaScript

// Node (Express)
app.post("/api/spiiksi/call", async (req, res) => {
  const answer = await fetch("https://api.spiiksi.fi/v1/calls", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.SPIIKSI_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ agent_language: "en", external_id: `ticket-${req.body.ticket}` }),
  }).then((r) => r.json());
  // Send answer.customer_url to the customer your own way (SMS, email, chat).
  res.json(answer);
});

Events#

Event	When
`ready`	The call page is open, waiting for the person to start
`joined`	They started; the other side isn't there yet
`other_joined`	The other side is there
`live`	Both are there and interpretation is running
`other_left`	The other side left; they may come back
`ended`	The call ended for both
`error`	The link no longer works
`closed`	Your page closed it (`handle.close()`)

Listen with onEvent, or handle.on(type, fn) ("*" for all). Each event is {type, kind, url}.

Chats#

Spiiksi.chat.open(customerUrl, options) and Spiiksi.chat.start({endpoint, …}) do the same for a support chat. Chat events: ended, error, closed.

Options#

Option	Notes
`container`	An element, or a CSS selector. Without it, a pop-up (full screen on phones) with a close button.
`onEvent`	Called with every event.
`width`, `height`	The pop-up's size on wide screens.
`title`	The frame's accessible title.
`endpoint`, `body`, `headers`, `credentials`, `side`	For `start()`.

Notes#

Open calls from a click or tap where you can, so the browser lets audio start at once.
The frame asks for the microphone (and camera, for video). If your page sets a Permissions-Policy, allow microphone and camera for spiiksi.fi.
Spiiksi.closeAll() closes everything the SDK opened.