Skip to main content

Vanilla JS & Script Tag

The core package works in any frontend without a framework. All runtime config (apiUrl, accountNumber, userEmail, getHeaders, strings, theme, settings) is passed through init() or setConfig().

With a bundler (npm import)​

Call init() with a container element and your config:

import { init } from '@krakentech/ink-live-chat-widget';

const el = init(document.getElementById('chat-root'), {
  apiUrl: 'https://api.example.com/graphql',
  accountNumber: 'A-123',
  userEmail: 'user@example.com',
});

// Update config later — partial patches merge into strings/settings/theme:
el.setConfig({ theme: { userBubbleBgColor: '#2563eb' } });

Alternatively, register the custom element and configure it in the DOM:

import '@krakentech/ink-live-chat-widget';

// HTML: <ink-live-chat-widget></ink-live-chat-widget>
const el = document.querySelector('ink-live-chat-widget');
el.setConfig({
  apiUrl: 'https://api.example.com/graphql',
  accountNumber: 'A-123',
  userEmail: 'user@example.com',
});

TypeScript types ship with the package (InkLiveChatWidgetConfig, etc.).

Script tag (no bundler)​

After installing the package, copy the prebuilt bundle from node_modules/@krakentech/ink-live-chat-widget/dist/ into your static assets:

  • ink-live-chat-widget.js — IIFE build, exposes a global InkLiveChatWidget.
  • ink-live-chat-widget.mjs — ESM build, for <script type="module">.

SVG icons and styles are inlined at publish time, so there are no extra loaders, workers, or bundler configuration to set up in your app.

IIFE (global)​

<div id="chat-root"></div>
<script src="/static/ink-live-chat-widget.js"></script>
<script>
  InkLiveChatWidget.init(document.getElementById('chat-root'), {
    apiUrl: 'https://api.example.com/graphql',
    accountNumber: 'A-123',
    userEmail: 'user@example.com',
  });
</script>

ESM module​

<div id="chat-root"></div>
<script type="module">
  import { init } from '/static/ink-live-chat-widget.mjs';

  init(document.getElementById('chat-root'), {
    apiUrl: 'https://api.example.com/graphql',
    accountNumber: 'A-123',
    userEmail: 'user@example.com',
  });
</script>
tip

Pin the package version and re-copy the dist/ assets when you upgrade so your self-hosted script stays in sync with the version in package.json.

Teardown​

Removing the element from the DOM cleans up automatically. To tear down explicitly, call destroy() — it returns a Promise:

await el.destroy();

See the Configuration overview for the difference between UI-only teardown and closing the conversation.