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 7 days ago

What’s Next

Deploy the project to Vercel and set NEXT_PUBLIC_GUMLET_EMBED_URL.