Follow for latest

Twitter @gizmolab_

Getting started

IntroductionInstall Abstract Global WalletInstall Next.js 14Install DynamicInstall Shadcn UiDeploy EVM Contract

All Components

Abstract Gasless NFT Mint ComponentAbstract Sign InChain SelectorCrypto Product CardNft Mint CardNFT Portfolio DashboardLiFi WidgetPolymarket Widget Component

Polymarket Widget Docs

Embed a prediction market widget in React or Next.js with practical setup guidance for Dynamic wallet auth, market slugs, and Polygon trading flows.

Embed a live prediction market experience in your app with a Polymarket widget built for React and Next.js. Gizmolab's Polymarket widget gives teams a faster way to display a market, connect a wallet, show yes/no pricing, and route trading actions through Polymarket's CLOB flow on Polygon.

If you are evaluating whether a prediction market widget fits your product, this guide covers the practical path: what the widget does, what it depends on, how to wire it into your app, and what to verify before shipping a live market experience.

Start with the live component surface at /components/polymarket-widget and complete Install Dynamic if your app does not already expose wallet connectivity.

Search Console evidence in the approved brief shows the adjacent component page at 98 impressions, 2 clicks, 2.0% CTR, and 9.4 average position, with the query polymarket widget already appearing on page one. This docs page is meant to capture stronger implementation intent than the component page alone.

What the widget helps you ship

The widget is built for teams that want more than a static market card. It combines market display, wallet-aware UI, and trade-oriented interaction in one embeddable component.

With the current component surface, you can:

  • render a specific Polymarket event by market slug
  • show live yes/no outcome pricing
  • let users connect a wallet through Dynamic
  • display wallet balance in USDC
  • let users choose an outcome and enter a trade amount
  • send buy orders through a Polymarket CLOB client flow
  • link back to the original market on Polymarket when needed

When this widget is a good fit

  • embedding a single prediction market inside a larger product flow
  • adding a market module to a news, research, or community app
  • prototyping a Polymarket-powered experience in Next.js
  • testing user demand for market participation before building a wider trading surface
  • giving users a direct route from market context to wallet-connected action

It is less appropriate if you only need a static market preview with no wallet or trade flow. In that case, a read-only card may be a better starting point.

Recommended setup path

For most teams, the cleanest setup path is:

  1. Start from a React or Next.js app.
  2. Configure wallet connectivity with Install Dynamic.
  3. Install the Polymarket widget dependencies.
  4. Add the Polymarket config file and market data helper.
  5. Add the CLOB hook for trading actions.
  6. Render the widget with a real market slug.
  7. Test wallet connection, Polygon readiness, and order flow in a controlled environment.

If you are new to the project structure, start with Install Next.js before adding wallet and market functionality.

Install dependencies

The current component dependency set includes Dynamic, the Polymarket CLOB client, React Query support, and web3 helpers.

npm install @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @polymarket/clob-client @tanstack/react-query viem ethers@5

Render the widget

The simplest usage pattern is to render the component with a market slug and optional display props.

import React from "react";
import PolymarketWidget from "@/components/PolymarketWidget";

export default function PolymarketWidgetDemo() {
  return (
    <div className="w-full min-h-screen flex justify-center items-center">
      <PolymarketWidget
        slug="presidential-election-winner-2024"
        theme="dark"
        showExternalLink={true}
      />
    </div>
  );
}

Component props

slug

Type: string
Required: Yes

Pass the Polymarket market slug from the event URL. This is the required lookup key for the market data request.

theme

Type: "dark" | "light"
Default: "dark"

Use this to match the widget to the surrounding UI.

showExternalLink

Type: boolean
Default: true

Controls whether the widget shows a link back to the market on Polymarket.

className

Type: string

Use this when you want to apply container-level layout or spacing adjustments without changing the widget internals.

Practical integration notes

Use a real market slug early. A large share of setup confusion comes from testing with an outdated or invalid slug.

Treat wallet state and network state as first-class UX concerns. Your app should clearly handle not-connected users, loading states, market fetch failures, and trade submission errors.

The current trade path is built around Polygon and USDC-based market participation. Confirm your desired Polygon network-switch behavior in your own app before publishing production trading flows.

If your product has users who only need market context, consider a read-only preview state before exposing wallet and order inputs.

Common implementation questions

Does the Polymarket widget require Dynamic?

In the current component setup, yes. The widget's wallet-aware trading flow is designed around Dynamic wallet authentication before order actions begin.

Does the widget trade on Polygon?

Yes. The current implementation is configured around Polygon, including the chain ID and USDC-based trading flow used by the component.

Can I embed a single market instead of a market list?

Yes. The widget is designed around a required slug prop so you can target one Polymarket market directly.

What should I verify before production use?

Validate wallet flow, Polygon network readiness, market slug handling, loading and error states, and any product or compliance review required before exposing live trading to users.

Related docs and components

Start with the practical path

If you want the fastest route to a working evaluation, open the live component page, complete Dynamic setup if wallet connectivity is not already in place, render the widget with a real market slug, and test the wallet and Polygon flow before styling deeper page-level integrations.

That gives your team enough context to decide whether the widget belongs in a content experience, a trading surface, or a broader prediction-market product.