Integrate Connect via CDN

Wormhole Connect is a prebuilt UI component that makes it easy to transfer tokens across chains. You can integrate it into any website using either React or a hosted version served via jsDelivr.

This guide focuses on using the hosted version—ideal for simpler setups or non-React environments. It includes everything you need to get started with just a few lines of code.

If you're using React, refer to the Get Started with Connect guide.

Install Connect

To install the Connect npm package, run the following command:

npm i @wormhole-foundation/wormhole-connect

Add Connect to Your Project Using the Hosted Version

The hosted version uses pre-built packages (including React) served via jsDelivr from npm. To integrate it without using React directly, add the following to your JavaScript project:

import { wormholeConnectHosted } from '@wormhole-foundation/wormhole-connect';

// Existing DOM element where you want to mount Connect
const container = document.getElementById('bridge-container');
if (!container) {
  throw new Error("Element with id 'bridge-container' not found");
}

wormholeConnectHosted(container);

You can provide config and theme parameters in a second function argument:

import {
  wormholeConnectHosted,
} from '@wormhole-foundation/wormhole-connect';

// Existing DOM element where you want to mount Connect
const container = document.getElementById('bridge-container');
if (!container) {
  throw new Error("Element with id 'connect' not found");
}

wormholeConnectHosted(container, {
  config: {
    rpcs: {
      // ...
    }
  },
  theme: {
    background: {
      default: '#004547',
    }
  }
});

Next Steps

Use the following guides to configure your Connect instance:

• Data Configuration: Learn how to specify custom networks and RPC endpoints, integrate different bridging protocols, add new tokens, and more.
• Theme Configuration: Learn how to customize Connect's look and feel to match your application's branding.