GlueX Widget is fully compatible with Gatsby applications and requires minimal configuration for smooth integration, offering a powerful, ready to use UI component for seamless DeFi interactions
For a complete working example, check out our full Gatsby example repository

​
Prerequisites

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

​
Integration

Create a Widget.tsx file in your components directory to encapsulate the GlueX widget 
import React from "react";
import { type WidgetConfigPartialProps } from "@gluex/widget";
import { GlueXWidget, WidgetSkeleton } 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 anywhere in your Gatsby application
pages/index.tsx
import { Widget } from "../components/Widget";

function HomePage() {
  return (
    <div>
      <h1>My DeFi Application</h1>
      <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