Current Page URL: https://docs.widgetkraft.com/available-widgets/live-conversation

Live Conversation Tool

A real-time support tool that lets you chat instantly with website visitors, answer questions, and guide high-intent users from one place.

Pricing 1 credit / thread

You can fully customize

Header branding and welcome message
Message bubble styling
Input field configuration
Tool dimensions and positioning
Conversation interface appearance
Admin-side management flow

Shape the live chat flow while keeping the UI clean and readable.

Quick Start

Copy the snippet for your stack and paste it into your project your live chat widget is live in under a minute.

HTML

Paste this snippet into any HTML file before the closing </body> tag.

1<!-- 1. Add this where you want the live chat to appear -->
2<div id="livechat-root"></div>
3
4<!-- 2. Load the widget script -->
5<script src="https://cdn.widgetkraft.com/livechat.js"></script>
6
7<!-- 3. Initialize the widget and set user -->
8<script>
9  window.addEventListener("load", function () {
10    if (!window.LiveChatWidget) return;
11
12    // Initialize widget
13    window.LiveChatWidget.init({
14      widgetId: "YOUR_WIDGET_ID"
15    });
16
17    // Set logged-in user
18    window.LiveChatWidget.setUser({
19      name: "John Doe",
20      email: "john@example.com",
21      unique_id: "user_123"
22    });
23  });
24</script>
TIPReplace YOUR_WIDGET_ID with the ID from the Code tab of your live chat editor. setUser is optional remove it for anonymous visitors.

Creating a Live Conversation tool

Four steps from the dashboard.

  1. 1Go to Available Tools -> Live Conversation
  2. 2Click Add Tool
  3. 3Configure the tool in the editor
  4. 4Copy the embed code to your site
Creating Live Conversation tool
Dashboard - activating the Live Conversation tool

Understanding the editor

Five configuration tabs.

Header

Title, subtitle, and greeting

Chat

Bubble styling and readability

Input

Message field and send action

Appearance

Dimensions and overall style

Code

Embed snippet

1

Header tab

Control the top section of the chat experience.

Header settings

  • Chat title and subtitle
  • Welcome message
  • Branding and logo treatment
  • Consistent text hierarchy for readability
Live Conversation header tab
Header tab with title, subtitle, and welcome message
2

Chat tab

Adjust how messages appear in the conversation.

Live Conversation chat tab
Chat tab with bubble styling controls

Design tip

Prioritize contrast and spacing over decorative color choices so conversations stay easy to scan.
3

Input tab

Configure the message field where visitors type.

Live Conversation input tab
Input tab with field and send button customization
4

Appearance tab

Set size, proportions, and overall UI treatment.

Live Conversation appearance tab
Appearance tab with sizing and visual controls

What matters most

  • Chat window width and height
  • Background, radius, and shadow settings
  • Consistent appearance with your site
5

Code tab

Copy the embed code and go live.

Live Conversation code tab
Code tab with embed snippet
Live Conversation admin dashboard
Admin dashboard with active conversations and sessions

Using the embed code

  1. 1Copy the snippet from the Code tab
  2. 2Paste it before the closing body tag so it loads site-wide
  3. 3Publish the page and visitors can open the chat from the floating button

Summary

The Live Conversation Tool lets you:

Provide real-time support to visitors instantly
Customize the conversation interface to match your site
Deploy with a single embed snippet
Manage conversations from a central dashboard
Track active sessions and engagement clearly
Use live chat without complex setup