Examples/Jira Integration

Jira Integration with Custom Forms

A production-ready Jira integration with custom styled menus and multi-step forms for collecting all required Jira fields before submission.

Try It Now - Interactive Demo

Right-click on any of the elements below to open the custom Jira feedback menu. You'll see a multi-step form that collects all required Jira fields before submission.

Submit Button Example

Right-click this button to report a bug with priority and severity fields

Input Field Example

Right-click this input to request a feature with business value justification

Interactive Card

Right-click anywhere on this card to see the custom Jira menu

ActiveFeatured

Configuration Required

Make sure you have configured JIRA_URL, JIRA_EMAIL, JIRA_API_TOKEN, and JIRA_PROJECT_KEY in your .env.local file before testing.

What's Included in This Example

Custom-styled Jira context menu
Multi-step form for collecting required fields
Priority, Severity, and Business Value fields
Real-time validation and error handling
Automatic screenshot capture and upload
Element context automatically included

Implementation Guide

This example demonstrates how to create a custom Jira integration with a multi-step form that collects all required fields before submission.

1. Environment Setup

.env.local

# Jira Cloud instance URL
JIRA_URL=https://your-company.atlassian.net

# Your Jira account email
JIRA_EMAIL=your-email@company.com

# Jira API token
JIRA_API_TOKEN=your-api-token-here

# Project key where issues will be created
JIRA_PROJECT_KEY=PROJ

2. Custom Menu Items

Define menu items with custom onClick handlers that open your custom form:

const jiraMenuItems: ContextMenuItem[] = [
  {
    type: "bug",
    label: "Report Bug to Jira",
    icon: <Bug className="w-4 h-4" />,
    showComment: false,
    onClick: ({ targetElement, closeMenu }) => {
      // Open custom Jira form
      openCustomJiraForm(targetElement);
      closeMenu();
      return false; // Prevent default submission
    },
  },
];

3. Custom Styled Menu

Apply custom styles to make the menu visually distinct for Jira:

<AnyclickProvider
  adapter={jiraAdapter}
  menuItems={jiraMenuItems}
  theme={{
    menuStyle: {
      "--anyclick-menu-bg": "#ffffff",
      "--anyclick-menu-text": "#1e3a8a",
      "--anyclick-menu-border": "#93c5fd",
      "--anyclick-menu-hover": "#dbeafe",
      "--anyclick-menu-accent": "#2563eb",
    },
  }}
>
  {children}
</AnyclickProvider>

4. Multi-Step Form Component

Create a custom form component that collects all required Jira fields:

// Step 1: Select issue type (Bug or Feature)
// Step 2: Fill in required fields (Summary, Description, Priority, etc.)
// Step 3: Review and submit
// Step 4: Show success/error feedback

const fields = [
  {
    id: "summary",
    name: "Summary",
    required: true,
    type: "text",
  },
  {
    id: "priority",
    name: "Priority",
    required: true,
    type: "select",
    options: ["Highest", "High", "Medium", "Low"],
  },
  // ... more fields
];

Next: Explore More Examples

Check out other integration examples and customization options.

GitHub Integration Example