Ladybug Integration Guide

Everything you need to integrate, configure, and optimize your support ticket workflow

Quick Start

1

Create a project

Sign in to Ladybug and create a new project.

2

Whitelist your domain

Add your domain to the whitelist in the project settings. The widget will only load on whitelisted domains.

3

Install and configure the widget

Add the widget script to your site and configure user identification

<script
  src="https://ladybug.hack2026.gov.sg/widget.js"
  data-project-id="your-project-id"
></script>
4

Protect sensitive data (optional)

Add CSS classes to mask or hide sensitive content in screenshots and recordings

HTML

Use CSS classes to control how sensitive data appears in screenshots and recordings:

  • ladybug-mask — replaces text with asterisks
  • ladybug-block — hides elements entirely
  • ladybug-ignore — excludes user interactions from video recordings
<!-- Mask: text is replaced with *** but element remains visible -->
<div class="user-profile">
  <p>Email: <span class="ladybug-mask">john@example.com</span></p>
  <p>SSN: <span class="ladybug-mask">123-45-6789</span></p>
</div>

<!-- Block: entire element is removed from capture -->
<div class="ladybug-block">
  <h3>Admin Panel</h3>
  <p>Internal notes and debug info...</p>
</div>

<!-- Ignore: element visible, but keystrokes not recorded in video -->
<input class="ladybug-ignore" type="password" />

AI Auto-Tagging

Ladybug uses AI to automatically categorize incoming tickets, saving your team time and ensuring consistent organization.

How It Works

1
Define your tags: Create tags in your project settings with descriptive names and descriptions (e.g., "Bug", "Feature Request", "UI Issue")
2
Enable auto-tagging: Toggle on the auto-tagging feature in your project's tag settings
3
Automatic classification: When tickets are submitted, Claude AI analyzes the title and description to suggest relevant tags with confidence scores
4
Review and refine: AI-suggested tags are automatically applied. You can manually add or remove tags as needed

Best Practices

• Write clear tag descriptions: Help the AI understand when to apply each tag by providing detailed descriptions

• Use AI-generated descriptions: Click the sparkle icon when creating tags to let AI suggest an optimal description

• Review confidence scores: The AI assigns confidence scores (50-100). Lower scores may need manual review

• Train over time: Monitor auto-tagged tickets and adjust tag descriptions to improve accuracy

Connectors & Integrations

Connect Ladybug to your existing tools to automate your support workflow. All connectors are configured per project in the Connectors settings page.

Email Notifications

Send acknowledgment emails when tickets are submitted

Setup

  1. 1.Navigate to your project's Connectors page
  2. 2.Select Email connector
  3. 3.Add one or more email addresses to receive notifications
  4. 4.Toggle enabled and save

What it does

Sends a notification email to the configured addresses whenever a new ticket is created, including ticket details and a link to view it in Ladybug.

zendesk

Zendesk Integration

Automatically create Zendesk tickets from Ladybug submissions

Setup

  1. 1.Enable API access in Zendesk: Go to Admin → Apps and Integrations → APIs → API configuration → Enable token access
  2. 2.Generate an API token: Admin → Apps and Integrations → APIs → Zendesk API → Add API token
  3. 3.In Ladybug, navigate to Connectors
  4. 4.
    Select Zendesk connector and provide:
    • •Subdomain: Your Zendesk subdomain (e.g., "mycompany" for mycompany.zendesk.com)
    • •Admin email: Email of the admin account
    • •API token: The token you generated
  5. 5.Click "Test Connection" to verify, then save if successful

What it does

Creates a new Zendesk ticket for each Ladybug submission, including the title, description, attachments, and any applied tags. All tags from Ladybug are automatically added to the Zendesk ticket.

gitbook

GitBook Knowledge Base

AI-powered suggested responses from your documentation

Setup

  1. 1.Ensure your GitBook space is published
  2. 2.Copy your GitBook site URL (e.g., https://docs.yourcompany.com)
  3. 3.In Ladybug, navigate to Connectors
  4. 4.Select GitBook connector
  5. 5.Paste your GitBook URL and save

What it does

When viewing a ticket, you can click "Suggest Response" to let AI search your GitBook documentation for relevant information. The AI will:

  • •Search your documentation for relevant content
  • •Extract step-by-step instructions if available
  • •Generate a draft response based on your knowledge base
  • •Save the suggestion to the ticket for you to review and send

Pro Tip: The GitBook integration uses MCP (Model Context Protocol) to intelligently search your docs. Keep your documentation well-organized with clear headings for best results.

Ready to Get Started?

Create your first project and start collecting better support tickets today

Go to Dashboard