​
Overview

The Skip Go Widget is the easiest way to onboard users and capital from anywhere in the world to your corner of the sovereign web! The widget provides seamless cross-chain bridging, swapping, and transferring functionality in an easy to integrate React or Web component.

Want to experiment with the widget before integrating it? Check out our interactive builder: studio.skip.build — experiment visually and generate ready-to-use code for your app!

​
Useful Links

​
Quickstart Guide

This guide will walk you through how to integrate the Widget into your React app.

Starting from scratch? It’s recommended to use a React framework like Next.js or Create React App to get up and running quickly.

1

Installation

npm install @skip-go/widget

If you’re using yarn (or another package manager that doesn’t install peer dependencies by default) you may need to install these peer dependencies as well:

  yarn add @tanstack/react-query viem wagmi
2

Import the Widget Component

Next, use the Widget component to render the swap interface:

import { Widget } from '@skip-go/widget';

const SwapPage = () => {
  return (
    <div
      style={{
        width: '100%',
        maxWidth: '500px',
        padding: '0 10px',
      }}
    >
      <Widget
        theme="light"
        brandColor="#FF4FFF"
      />
    </div>
  );
};

You can use the code generated by studio.skip.build directly in your integration below.

3

Configuration

Now that you have the widget integrated, it’s time to configure the user experience. Find more details on widget configuration here.

If there’s any functionality or configurations you’d like to see in the widget, we’d love for you to contribute by opening up an issue or pull request in the repository or by joining our Discord and giving us a shout!