Vercel Deployment Guide

Deploy IssueCapture on Vercel

Wire your IssueCapture widget up for Vercel — env vars, preview deployments, custom domains. About 10 minutes if you already have the widget installed locally.

Quick Summary

Time: ~10 minutes
Prerequisites: Vercel account + git repo
Process: Env var → Domains allowlist → Deploy
Works with: Next.js, React, Vue, Angular

Prerequisites

Step-by-Step Installation

Follow these steps to get up and running in minutes.

1

Get Your API Key

Sign up for IssueCapture and grab your widget API key

  • Go to issuecapture.com/signup and create a free account
  • Connect your Jira instance via OAuth (about 30 seconds)
  • Open the Widgets page and create a new widget
  • Click the "Keys" tab on your widget and copy the API key (starts with "ic_")
2

Add the env var in Vercel

Configure your IssueCapture API key in the Vercel dashboard

  • Settings → Environment Variables
  • Use the right prefix for your bundler (Next.js / Vite / CRA — Angular doesn't use env-prefixed vars)
  • Tick all three environment scopes so previews work too
  • You need to redeploy after adding env vars — push a new commit or use "Redeploy" in Vercel
# Vercel → your project → Settings → Environment Variables

# Variable name (pick the prefix that matches your framework):
NEXT_PUBLIC_ISSUECAPTURE_API_KEY    # Next.js
VITE_ISSUECAPTURE_API_KEY           # Vite (Vue / React)
REACT_APP_ISSUECAPTURE_API_KEY      # Create React App

# Value:
ic_your_api_key_here

# Environments to enable:
Production
Preview
Development
3

Add your Vercel domains to the allowlist

Tell IssueCapture which sites can use this API key

  • In the IssueCapture dashboard, open your widget and click the Domains tab
  • Add your production domain (custom or .vercel.app)
  • Add `*.vercel.app` so every preview URL works — Vercel generates a unique hostname per branch and per deploy
  • Add your local dev port if you want to test the widget locally
# Domains to add in IssueCapture dashboard → Widgets → (your widget) → Domains

# Your production domain (one of these):
your-app.vercel.app
yourdomain.com

# Preview deployments — wildcard saves you from listing every branch URL:
*.vercel.app

# Local dev (optional):
localhost:3000   # Next.js
localhost:5173   # Vite
localhost:4200   # Angular
4

Deploy

Push your code — Vercel handles the rest

  • A git push to your production branch (usually main) triggers a production deploy
  • Pushes to any other branch get a preview URL
  • Vercel auto-detects the framework (Next.js, Vite, CRA, Angular) and runs the right build
  • Env vars are inlined into the browser bundle at build time — make sure they're set BEFORE the first deploy you want them in
# Option 1: Git-connected deploy (recommended)
git add .
git commit -m "Add IssueCapture"
git push

# Option 2: Vercel CLI
npm i -g vercel
vercel              # preview deploy
vercel --prod       # production deploy
5

Verify it works in production

Confirm the widget loaded on your deployed site

  • Open your production URL in a fresh tab
  • You should see the floating Report Issue button
  • Open DevTools console and type `IssueCapture` — you should see the widget object (this distinguishes "script didn't load" from "ad blocker is hiding the button")
  • Click the button, submit a test issue, and confirm it lands in Jira
6

Custom domain (optional)

Add a custom domain to your Vercel project

  • Settings → Domains
  • Vercel verifies ownership via your DNS records — exact values depend on your registrar
  • After DNS propagates the SSL certificate is issued automatically (no manual cert step)
  • Once the custom domain is live, add it to your IssueCapture Domains allowlist too
# Vercel → your project → Settings → Domains

# 1. Click "Add" and enter your domain
# 2. Follow Vercel's DNS instructions:
#    Apex (yourdomain.com):
#      A     @     76.76.21.21
#    www subdomain:
#      CNAME www   cname.vercel-dns.com

# 3. Wait for DNS to propagate (typically 5–60 minutes)
# 4. Vercel auto-issues a Let's Encrypt SSL certificate

Troubleshooting

Common integration issues and how to solve them.

Env vars set in Vercel but not reaching the browser

  • Confirm the variable is added under Settings → Environment Variables (not under project Settings → General)
  • Tick the "Production" scope — env vars are per-environment
  • Trigger a fresh deploy after editing env vars (Vercel does NOT redeploy automatically)
  • Use the right prefix for your bundler: NEXT_PUBLIC_ / VITE_ / REACT_APP_

"Domain not allowed" on production (often shown as CORS in the console)

  • In the IssueCapture dashboard, open your widget and click the Domains tab
  • Add your Vercel hostname (e.g. your-app.vercel.app) and your custom domain if you have one
  • Add both www and non-www if you serve both
  • Preview deployments use unique hostnames per branch — add `*.vercel.app` to cover them all

Preview deployments can't submit issues

Each Vercel preview has a unique URL like your-app-git-feature-team.vercel.app

  • Add `*.vercel.app` to the Domains allowlist — covers every preview hostname
  • Alternative (not recommended): list each preview URL individually

Custom domain isn't serving over HTTPS yet

  • DNS needs to propagate before Vercel can issue the cert — 5 to 60 minutes is typical
  • Verify the DNS records match exactly what Vercel showed you (A 76.76.21.21 for the apex, CNAME cname.vercel-dns.com for subdomains)
  • Check Vercel Settings → Domains for the verification status — green check means the cert is live

Ready to deploy?

Free plan includes 10 issues/month. No card needed — connect Jira and ship the widget on your next deploy.

Get Started FreeView All Docs