Skip to main content
This guide walks you through enabling the widget in your dashboard and adding the embed snippet to your website.

​
Prerequisites

  • A Pro or Enterprise plan
  • At least one ticket category configured in your server
  • The bot online and connected to your Discord server

​
Step 1: Enable the Widget

1

Open the Web Chat tab

Go to your Dashboard → select your bot and server → click the Web Chat tab in the configuration panel.
2

Toggle the widget on

Switch the Enable Web Chat Widget toggle to on. A unique Widget Key (WK_...) is generated automatically.
3

Add at least one allowed domain

In the Allowed Domains section, add every domain where you will embed the widget (e.g., https://example.com). The widget will not load on domains that are not in this list.
4

Save your changes

Click Save All at the top of the page.
Allowed domains are required. The widget will refuse to load if no domains are configured. This is a security measure to prevent unauthorized sites from using your widget key.

​
Step 2: Add the Embed Snippet

Copy the script tag shown in the dashboard and paste it into your website’s HTML, just before the closing </body> tag: 
<script
  src="https://ticketcord.net/api/webchat/widget.js"
  data-widget-key="WK_your_key_here"
  defer
></script>
That’s it. The widget bubble will appear in the bottom-right corner of your page (configurable).
The defer attribute ensures the widget loads after your page content, so it never blocks rendering.

​
Step 3: Configure Settings

Back in the dashboard, you can customize:
SettingDescription
CategoryWhich Discord category to create ticket channels in
GreetingWelcome message shown when a visitor opens the widget
Accent ColorPrimary color of the chat bubble and header
PositionBottom-left or bottom-right placement
Pre-Chat FormRequire name and email before chatting
Auto-ReplyAutomatic first response when a ticket is created
Allow Visitor CloseLet visitors close their own tickets from the widget
ThemeLight, dark, or auto (follows system preference)
BrandingShow or hide the “Powered by TicketCord” badge (Pro+ can remove)
Rate LimitMaximum messages per minute per visitor
Ping RolesStaff roles to notify when a new webchat ticket is created

​
Step 4: Test It

Open your website in a browser and verify:
  1. The chat bubble appears
  2. Clicking it opens the pre-chat form (if enabled) or the chat view
  3. Sending a message creates a channel in your Discord server
  4. Staff replies in Discord appear in the widget
If the widget does not appear, open your browser’s developer console (F12) and look for [TicketCord WebChat] messages. Common issues include an incorrect widget key, a missing allowed domain, or an expired plan.

​
Allowed Domains

The widget validates the embedding page’s origin against your allowed domains list on every request. You can add up to 20 domains. Format: Full origin including protocol — https://example.com (no trailing slash, no paths). Examples:
DomainValid?
https://example.comYes
https://shop.example.comYes
http://localhost:3000No — localhost is automatically allowed in development mode
example.comNo — missing protocol
https://example.com/supportNo — no paths allowed

Developer Reference

Pre-fill fields, configure CSP headers, and more