# Use with Gatsby

Follow the steps below to integrate the Widget with plain Gatsby.

Tested with Gatsby v5.

# Integration steps

Step 1 Install the Widget package with:

yarn add @kycdao/widget


npm install @kycdao/widget

Step 2 Override the default Gatsby webpack config to polyfill the crypto module. This is required for the Widget to work with Gatsby (Webpack 5).

Step 3 Import the Widget Iframe client.

:::code source="../../integration-examples/evm-gatsby-example/src/pages/iframe.tsx" range="2" :::

Step 4 Create an Iframe client instance and open it conditionally.

:::code source="../../integration-examples/evm-gatsby-example/src/pages/iframe.tsx" range="4-50" :::

Step 3 Import the Widget

:::code source="../../integration-examples/evm-gatsby-example/src/pages/component.tsx" range="2" :::

Step 4 Create a Widget widget instance and render it.

:::code source="../../integration-examples/evm-gatsby-example/src/pages/component.tsx" range="4-50" :::

# Configuration options

For details on the SDK configuration, see: Configuration options

# Full examples

If you're looking for full examples, check out the Integration examples page.