​
概述

Skip Go Widget 是将全球各地的用户与资金引导到你的 sovereign web 版图中的最简单方式。该组件提供无缝的跨链桥接、兑换与转账能力，并且可轻松集成到 React 或 Web 组件 中。
想在正式集成前先体验一下这个组件？ 欢迎使用我们的交互式构建器：studio.skip.build —— 通过可视化方式进行实验，并为你的应用生成可直接使用的代码。

​
实用链接

​
快速开始指南

本指南将带你完成如何在 React 应用中集成 Widget。
从零开始？建议使用 React 框架，例如 Next.js 或 Create React App，以便快速启动。
1

安装

npm install @skip-go/widget
如果你使用的是 yarn（或其他默认不会安装 peer dependencies 的包管理器）， 你可能还需要安装以下 peer dependencies：
  yarn add @tanstack/react-query viem wagmi
2

导入 Widget 组件

接下来，使用 Widget 组件来渲染兑换界面：
import { Widget } from '@skip-go/widget';

const SwapPage = () => {
  return (
    <div
      style={{
        width: '100%',
        maxWidth: '500px',
        padding: '0 10px',
      }}
    >
      <Widget
        theme="light"
        brandColor="#FF4FFF"
      />
    </div>
  );
};
你可以直接在下面的集成中使用由 studio.skip.build 生成的代码。
3

配置

现在你已经完成了组件集成，接下来可以开始配置用户体验。更多组件配置细节可查看这里。
如果你希望在组件中看到某些功能或配置，欢迎前往仓库 提交 issue 或 pull request，也可以加入我们的 Discord 与我们交流。

​
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!