For non-React applications, the Skip Go Widget is available as a web component.

Installation

You can import the web component in two ways:

1. NPM

import('@skip-go/widget-web-component');

Note: Ensure Node has sufficient memory allocated: CopyNODE_OPTIONS=--max-old-space-size=32384 This can be added to npm scripts in package.json, a .env file, or used when running Node directly.

2. Script Tag or CDN (Recommended)

<body>
  <script
    async
    src="https://unpkg.com/@skip-go/widget-web-component/build/index.js"
    type="module"
  ></script>
</body>

Usage

Props are the exact same as WidgetProps but you are required to pass them to the element via javascript/typescript.

<div style="width:100%; max-width:500px; padding:0 10px;">
  <skip-widget></skip-widget>
</div>
<script>
  const skipWidget = document.querySelector("skip-widget");
  if (skipWidget) {
    skipWidget.theme = {
      brandColor: "#FF4FFF",
      borderRadius: 30,
    };
    skipWidget.defaultRoute = {
      srcChainId: "osmosis-1",
      srcAssetDenom: "ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4",
    }
  }
</script>

Performance Considerations

It’s recommended to lazy load this component as it comes pre-bundled with all dependencies, which may impact load times, especially in development environments.

Gas on Receive Migration Guide

⌘I

​Installation

​1. NPM

​2. Script Tag or CDN (Recommended)

​Usage

​Performance Considerations

Installation

1. NPM

2. Script Tag or CDN (Recommended)

Usage

Performance Considerations