Widget Customization

Tork Chat's embeddable widget is fully configurable via data-* attributes on the script tag. No JavaScript API required.

Attributes reference

Attribute	Type	Default	Description
`data-tenant`required	`string`	`—`	Your unique tenant slug from the Admin Portal Install page.
`data-theme`	`"dark" \| "light"`	`"dark"`	Widget colour theme. Inherits OS preference if omitted.
`data-accent-color`	`CSS colour`	`"#CD7F32"`	Primary brand colour applied to the send button, bubbles, and links.
`data-bot-name`	`string`	`"Tork"`	Display name shown in the chat header.
`data-greeting`	`string`	`"Hi! How can I help?"`	First message sent by the bot when the widget opens.
`data-position`	`"bottom-right" \| "bottom-left"`	`"bottom-right"`	Screen corner where the launcher bubble appears.
`data-voice`	`"true" \| "false"`	`"false"`	Enables microphone input and text-to-speech replies.
`data-language`	`BCP 47 tag`	`auto-detect`	Forces a specific language. Supports en, pt, es, ar, zu. Omit for automatic detection.
`data-zindex`	`number`	`9999`	CSS z-index of the widget container. Increase if your site has higher-z elements.
`data-avatar-url`	`URL`	`Tork icon`	Absolute URL to a custom bot avatar image (PNG or SVG, ≤ 64 px).

Platform guides

Plain HTML

<!-- Paste before </body> -->
<script
  src="https://chat.tork.network/widget.js"
  data-tenant="your-slug"
  data-theme="dark"
  data-accent-color="#0077CC"
  data-bot-name="Aria"
  data-greeting="Hi! Ask me anything."
  async>
</script>

WordPress

// In functions.php or a site-specific plugin:
add_action('wp_footer', function() { ?>
<script
  src="https://chat.tork.network/widget.js"
  data-tenant="your-slug"
  data-theme="dark"
  async>
</script>
<?php });

Shopify

{%- comment -%} In theme.liquid before </body> {%- endcomment -%}
<script
  src="https://chat.tork.network/widget.js"
  data-tenant="your-slug"
  data-theme="light"
  data-accent-color="{{ settings.color_accent }}"
  async>
</script>

React / Next.js

// components/TorkWidget.tsx
'use client';
import { useEffect } from 'react';

export default function TorkWidget() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://chat.tork.network/widget.js';
    script.setAttribute('data-tenant', 'your-slug');
    script.setAttribute('data-theme', 'dark');
    script.async = true;
    document.body.appendChild(script);
    return () => { document.body.removeChild(script); };
  }, []);
  return null;
}

<!-- composables/useTorkWidget.ts -->
import { onMounted, onUnmounted } from 'vue';

export function useTorkWidget(tenant: string) {
  let script: HTMLScriptElement;
  onMounted(() => {
    script = document.createElement('script');
    script.src = 'https://chat.tork.network/widget.js';
    script.dataset.tenant = tenant;
    script.dataset.theme = 'dark';
    script.async = true;
    document.body.appendChild(script);
  });
  onUnmounted(() => document.body.removeChild(script));
}

Wix

// Wix Editor → Settings → Custom Code → Add Code → Body (end)
<script
  src="https://chat.tork.network/widget.js"
  data-tenant="your-slug"
  data-theme="light"
  async>
</script>

Dark / Light mode

Set data-theme="light" or data-theme="dark". Omit the attribute entirely to automatically inherit the visitor's OS preference via prefers-color-scheme.

Dark mode (default)

data-theme="dark"

bg-[#0a0e17], text-[#e8e6e1], bronze accents

Light mode

data-theme="light"

bg-white, text-gray-900, brand-colour accents

Voice I/O

Enable voice by adding data-voice="true". The widget will show a microphone button alongside the text input. Voice is processed via the Web Speech API — no audio data is sent to Tork servers.

Browser support: Chrome, Edge, Safari 16+. Firefox does not support Web Speech API. Voice falls back gracefully to text-only on unsupported browsers.

Mobile responsiveness

The widget is fully responsive. On viewports narrower than 480 px, the chat window expands to full-screen. The launcher bubble scales to 48 × 48 px for touch targets. Safe area insets are respected on iOS.