Skip to main content

Widget Integration Guide 2


The SideShift widget allows users to seamlessly shift cryptocurrencies directly on your website. This guide covers the steps to integrate the widget using Option 2: Open Programmatically, which allows you to open the widget programmatically using a button.

For a video walkthrough, watch here.

Step 1: Create a React app

Open the terminal and run the following command to create a new React app using Vite with TypeScript.

npm create vite@latest sideshift-widget-demo --template react-ts

Step 2: Add the embed code

Go to the SideShift embed page. Choose either Variable Rate or Fixed Rate, fill out the necessary fields, and copy the embed code. Paste this code into the head section of your index.html file.

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SideShift Widget Integration Demo</title>
<!-- Add SideShift scripts here -->
<script type="text/javascript">
window.__SIDESHIFT__ = {
parentAffiliateId: "k0Kx8oXzy", // Replace with your account ID
defaultDepositMethodId: "btc", // Replace with your chosen default deposit method
defaultSettleMethodId: "eth", // Replace with your chosen default settlement method
settleAddress: undefined, // Replace with the recipient address if needed
type: "variable", // Type of shift: variable or fixed
settleAmount: undefined, // Replace with the amount to settle if needed
theme: "dark", // Replace with your chosen theme
<script src=""></script>
<!-- End of SideShift scripts -->

Step 3: Add the SideShift Button

Create a components folder inside src and add a file named SideShiftButton.tsx.

import React, { useEffect } from "react";

declare global {
interface Window {
sideshift: {
show: () => void;
hide: () => void;

const SideShiftButton: React.FC = () => {
const showSideShift = () => {
if (window.sideshift && {;
} else {
"SideShift script not loaded or sideshift object is not available"

const handleSettle = (event: CustomEvent) => {
console.log("Exchange settled:", event.detail);

const handleDeposit = (event: CustomEvent) => {
console.log("Deposit made:", event.detail);

const handleOrder = (event: CustomEvent) => {
console.log("Order created:", event.detail);

useEffect(() => {
handleSettle as EventListener
handleDeposit as EventListener
window.addEventListener("", handleOrder as EventListener);

return () => {
handleSettle as EventListener
handleDeposit as EventListener
handleOrder as EventListener
}, []);

return <button onClick={showSideShift}>Shift with SideShift</button>;

export default SideShiftButton;

Step 4: Update App.tsx

Update the App.tsx file to include the SideShiftButton component.

import "./App.css"; // Make sure to import your CSS file
import SideShiftButton from "./components/SideShiftButton";

function App() {
return (
<div className="App">
<header className="App-header">
<SideShiftButton />

export default App;

Step 5: Apply custom styling to the App container

.App {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Use the full height of the viewport */

Step 6: Test locally

Open the terminal and run the following command to test the integration locally.

npm run dev

You should see the SideShift widget opens up when you click the Shift with SideShift button.

Your SideShift Widget Integration is now complete. Good job! 🎈

See live demo

You can view a demo here.


If you encounter any issues, ensure:

  • Your parentAffiliateId is correct.
  • You have internet connectivity.
  • The script URLs are accessible.
  • The SideShiftButton component is correctly importing and rendering.