For non-React applications, the Skip Go SwapWidget 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.

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

​
Usage

Props are the same as SwapWidgetProps, but passed as attributes in kebab-case. Use strings or stringified objects for complex props.

<div style="width:450px;height:820px;">
  <swap-widget
    theme='{
      "backgroundColor": "#191A1C",
      "textColor": "#E6EAE9",
      "borderColor": "#363B3F",
      "brandColor": "#FF4FFF",
      "highlightColor": "#1F2022"
    }'
    default-route='{
      "srcChainID": "osmosis-1",
      "srcAssetDenom": "ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4"
    }'
  ></swap-widget>
</div>

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

ConfigurationFAQ