Skip to main content

Widget Integration Guide 2

Intro​

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.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <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 SideShift.ai 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>
    <script src="https://sideshift.ai/static/js/main.js"></script>
    <!-- End of SideShift scripts -->
  </head>
  <body></body>
</html>

Step 3: Add the SideShift Button​

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

src/components/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 && window.sideshift.show) {
      window.sideshift.show();
    } else {
      console.error(
        "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(() => {
    window.addEventListener(
      "sideshift.ai/settle",
      handleSettle as EventListener
    );
    window.addEventListener(
      "sideshift.ai/deposit",
      handleDeposit as EventListener
    );
    window.addEventListener("sideshift.ai/order", handleOrder as EventListener);

    return () => {
      window.removeEventListener(
        "sideshift.ai/settle",
        handleSettle as EventListener
      );
      window.removeEventListener(
        "sideshift.ai/deposit",
        handleDeposit as EventListener
      );
      window.removeEventListener(
        "sideshift.ai/order",
        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.

src/App.tsx
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 />
      </header>
    </div>
  );
}

export default App;

Step 5: Apply custom styling to the App container​

src/App.css
.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.

Troubleshooting​

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.