Quickstart

Prerequisites

A product ID for your integration (for example wko_de). Every product Libra serves has one; see Products and sources.
For npm installs, a WK Artifactory token in ARTIFACTORY_TOKEN. For the CDN, nothing.
Your page must not send X-Frame-Options: DENY or frame-ancestors 'none'; see step 4.

Get started

Install the SDK

Add the following to your .npmrc. You will need an ARTIFACTORY_TOKEN environment variable set to your WK Artifactory token.

@libra:registry=https://artifactory.wolterskluwer.io/artifactory/api/npm/libra-expert-ai-npm/
//artifactory.wolterskluwer.io/artifactory/api/npm/libra-expert-ai-npm/:_authToken=${ARTIFACTORY_TOKEN}

npm install @libra/sdk

The same released version is promoted to the WK CDN. Replace <VERSION> with a release from the changelog; the current one is .

<script type="module">
  import { Libra } from 'https://cdn.wolterskluwer.io/wk/libra-sdk/<VERSION>/libra.js';

  Libra.init({
    productId: 'wko_de',
    onClose: () => Libra.detach()
  });
</script>

A classic script tag works too; see Installation.

Give the widget a place to live

The SDK positions its iframe over an element you own. Size that element however your layout needs: a side panel, a modal, a fixed corner.

<button id="open-chat">Open Chat</button>
<div id="chat" style="position: fixed; right: 16px; bottom: 16px; width: 400px; height: 600px;"></div>

Initialise once, attach when the user opens the chat

import { Libra } from '@libra/sdk';

Libra.init({
  productId: 'wko_de',
  onClose: () => {
    Libra.detach();
  }
});

document.getElementById('open-chat').addEventListener('click', () => {
  Libra.attach('chat');
});

init() creates the iframe but makes no network requests. The chat session starts on the first attach(). Providing onClose gives the widget a Libra headbar with a close button; the callback hides your container and calls Libra.detach().

Allow the SDK's own iframe in your security headers

The chat renders in a blob: iframe generated by your page. Safari applies your page’s framing CSP to it, so SDK-enabled pages must allow it:

Content-Security-Policy: frame-ancestors 'self'; frame-src 'self' blob:
X-Frame-Options: SAMEORIGIN

Details, including the microphone permission for voice input, are in Security headers.

Click Open Chat. The widget signs the user in through an Auth0 popup (or a Create account flow for new users), then renders the chat. The conversation, scroll position and any in-progress answer survive detach() / attach() cycles.

Next steps

How it works

Lifecycle, isolation and session persistence, in two minutes.

Embedding

Header ownership, stacking context, SPA route changes.

Authentication

Auth events, account gating, sign-out; or route everything through your own BFF with proxy mode.

Playground

Exercise every API call against staging without writing code.

Getting started

Integration guides

Capabilities

Reference

Resources

Prerequisites

Get started

Next steps

How it works

Embedding

Authentication

Playground

​Prerequisites

​Get started

​Next steps

How it works

Embedding

Authentication

Playground

Prerequisites

Get started

Next steps