#
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
Or
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).
If you haven't already, create a gatsby-node.js
file in the root of your project.
Need help choosing your integration type (Iframe vs Component) fits best? Check out our Usage matrix.
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" :::You're ready to roll
Go ahead and try out your integration 🚀
#
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.