Guides
Start typing to search…

Vercel Integration

Embed Gumlet player in Next.js and deploy on Vercel


Overview

This guide shows how to integrate Gumlet into a Next.js app and deploy it on Vercel using the example repo SatyamAnand98/npx-vercel-example.

Prerequisites

  • A Gumlet account and embed URL (or iframe snippet source)
  • Node.js + npm/yarn/pnpm
  • A Vercel account

1. Create the Next.js app from the example

Run one of:

npx create-next-app my-gumlet-app --example "https://github.com/SatyamAnand98/npx-vercel-example"

(Or use yarn create next-app ... / pnpm create next-app ....)

2. Add your Gumlet embed URL

Copy .env.example to .env.local and set:

NEXT_PUBLIC_GUMLET_EMBED_URL=<your embed URL>

3. Run locally

npm install
npm run dev

Open http://localhost:3000.

4. Deploy on Vercel

Import the repo into Vercel or use the Deploy button. In the Environment Variables section, set NEXT_PUBLIC_GUMLET_EMBED_URL to the same value you use locally.

Troubleshooting

If playback looks black, click the “Open Gumlet player” link from the app and verify the embed URL works directly.

Updated about 12 hours ago

What’s Next

Deploy the project to Vercel and set NEXT_PUBLIC_GUMLET_EMBED_URL.