πQuick Start
Getting Start with Rango Widget
Examples
Here you could explore different examples of using widget for different frameworks:
Installation
First you need to add @rango-dev/widget-embedded
dependency.
# using yarn
yarn add @rango-dev/widget-embedded
# or using npm
npm install --save @rango-dev/widget-embedded
Then you could use this code snippet to easily add widget to your project.
import { Widget, WidgetConfig } from "@rango-dev/widget-embedded";
export default function App() {
const config = {
// This API key is only for test purpose. Don't use it in production.
apiKey: 'c6381a79-2817-4602-83bf-6a641a409e32',
// This project id is only for test purpose. Don't use it in production.
// Get your Wallet Connect project id from https://cloud.walletconnect.com/
walletConnectProjectId: 'e24844c5deb5193c1c14840a7af6a40b',
}
return (
<div className="App">
<Widget config={config} />
</div>
);
}
IFrame Version
If you want to use Rango widget directly in your html codes using IFrame, you code use code snippet below.
<div id="rango-widget-container"></div>
<script src="https://api.rango.exchange/widget/iframe.bundle.min.js"></script>
<script defer type="text/javascript">
const config = {
// This API key is only for test purpose. Don't use it in production.
apiKey: 'c6381a79-2817-4602-83bf-6a641a409e32',
// This project id is only for test purpose. Don't use it in production.
// Get your Wallet Connect project id from https://cloud.walletconnect.com/
walletConnectProjectId: 'e24844c5deb5193c1c14840a7af6a40b',
}
rangoWidget.init(config)
</script>
IFrame Limitations
Although using the iframe version is quite straightforward, we recommend utilizing the JavaScript package directly instead. This is because certain wallets, such as Phantom and MetaMask Mobile on iOS, have limitations when working with iframes due to security concerns, which may cause issues for users.
Last updated
Was this helpful?