GlueX Widget is fully compatible with Rainbowkit applications and requires minimal configuration for smooth integration. This guide demonstrates how to integrate the widget specifically with Rainbowkit and Next.js Due to the nature of server side rendering (SSR) in Next and how different wallet libraries manage their connections to wallet extensions, the widget needs to be specifically rendered on the client side. To achieve this, make use of the ‘use client’ directive, which ensures that the widget component is only rendered in the client side environment
For a complete working example, check out our full Rainbowkit example repository

​
Prerequisites

Before proceeding with the integration, ensure you have completed the general installation steps outlined in the General Installation

​
Integration - App Router

With the Next.js App Router, components are primarily rendered on the server by default. To ensure the widget (and its dependencies like wagmi) runs exclusively on the client, you’ll utilize the "use client" directive and a small client side rendering wrapper component 
"use client";

import React from "react";

import {
  GlueXWidget,
  WidgetSkeleton,
  type WidgetConfigPartialProps,
} from "@gluex/widget";

export const Widget = () => {
  const config: WidgetConfigPartialProps["config"] = React.useMemo(() => {
    return {
      integrator: "",
      apiKey: "",

      // ... rest of the widget configuration
      // Example:
      // appearance: 'dark',
      // theme: {
      //   container: {
      //     boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
      //     borderRadius: '16px',
      //   },
      // },
    };
  }, []);

  return (
    <ClientSideRender fallback={<WidgetSkeleton config={config} />}>
      <GlueXWidget config={config} />
    </ClientSideRender>
  );
};
Usage in your App You can now import and use the widget component in your Rainbowkit application
app/page.tsx
"use client";

import { ConnectButton } from "@rainbow-me/rainbowkit";
import { type NextPage } from "next";
import { Widget } from "./Widget";

const HomePage: NextPage = () => {
  return (
    <div>
      <ConnectButton />
      <Widget />
    </div>
  );
};

export default HomePage;

​
Integration - Pages Router

If you are using the traditional Pages Router, you need to use the dynamic import feature with ssr: false to import the widget dynamically 
import dynamic from "next/dynamic";

const GlueXWidget = dynamic(
  () => import("@gluex/widget").then((mod) => mod.GlueXWidget),
  {
    loading: () => <div>Loading...</div>,
    ssr: false,
  }
);

export const Widget = () => {
  const config: WidgetConfigPartialProps["config"] = React.useMemo(() => {
    return {
      integrator: "",
      apiKey: "",

      // ... rest of the widget configuration
      // Example:
      // appearance: 'dark',
      // theme: {
      //   container: {
      //     boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
      //     borderRadius: '16px',
      //   },
      // },
    };
  }, []);

  return <GlueXWidget config={config} />;
};
Usage in your App You can now import and use the widget component anywhere in your application
pages/index.tsx
import { Widget } from "../components/Widget";
import { ConnectButton } from "@rainbow-me/rainbowkit";

function HomePage() {
  return (
    <div>
      <h1>My DeFi Application</h1>
      <ConnectButton />
      <Widget />
    </div>
  );
}

export default HomePage;

​
Configuration

The widget is highly configurable through its config prop. This allows you to tailor its behavior, default settings and connected services to match your application’s requirements. For a complete list of all available configuration options and their detailed descriptions, please refer to the widget configuration section

​
Customization

Beyond basic configuration, the widget offers extensive customization capabilities to ensure it seamlessly integrates with your application’s branding and design system. You can customize nearly every visual aspect of the widget. For a complete list of all available configuration, theme options, appearance and their detailed descriptions, please refer to the widget customization section
Check out GlueX’s Widget Studio to customize and generate your custom widget configuration. It provides an interactive interface to adjust settings and see real time previews, then generates the corresponding config code snippet for you