Widget Integration Guide 1

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 1: Open Using the SideShift Button, which involves embedding a button that opens the widget.

For a video walkthrough, watch here.

Step 1: Create a Directory and Open It in Your Code Editor

mkdir sideshift-widget-demo
cd sideshift-widget-demo

Step 2: Create an HTML File with a Basic Template

Create an index.html file and add the following basic HTML template:

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>
  </head>
  <body></body>
</html>

Step 3: 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 4: Add the SideShift Button

Customize the button's label on the embed page and copy the code. Paste it just below the script in your index.html file. Add some content to the body section and place the button there.

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 -->
    <style scoped>
      #sideshift-modal-button {
        -webkit-appearance: none;
        color: rgb(17, 11, 11);
        background-color: rgb(232, 90, 67);
        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
        text-transform: uppercase;
        font-size: 1rem;
        line-height: 1.5rem;
        text-align: center;
        padding: 0.875rem 1rem;
        border-radius: 0.25rem;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 3rem;
        min-width: 13rem;
        border: none;
        cursor: pointer;
        margin: 0 auto;
      }

      #sideshift-modal-button:hover {
        opacity: 0.9;
      }
    </style>
  </head>
  <body>
    <section>
      <div>
        <h2>Click on the button to open the SideShift Widget</h2>
        <p>
          This is a demo of the embeddable SideShift Widget and Button. For more
          info, visit
          <a href="https://sideshift.ai/embed">https://sideshift.ai/embed</a>.
        </p>
      </div>
      <div>
        <button onClick="window.sideshift.show()" id="sideshift-modal-button">
          Shift Now
        </button>
      </div>
    </section>
  </body>
</html>

Step 5: Style the Body and Text

Add styles to the body and paragraph texts for better presentation.

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 -->
    <style scoped>
      /* Added styles for body and paragraph */
      body {
        display: flex;
        justify-content: center;
        font-family: monospace;
        line-height: 150%;
        text-align: center;
        align-items: center;
        height: 100vh;
        max-width: 40rem;
        margin: auto;
      }

      p {
        font-size: 1rem;
        padding-bottom: 2rem;
        font-weight: 300;
      }

      #sideshift-modal-button {
        -webkit-appearance: none;
        color: rgb(17, 11, 11);
        background-color: rgb(232, 90, 67);
        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
        text-transform: uppercase;
        font-size: 1rem;
        line-height: 1.5rem;
        text-align: center;
        padding: 0.875rem 1rem;
        border-radius: 0.25rem;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 3rem;
        min-width: 13rem;
        border: none;
        cursor: pointer;
        margin: 0 auto;
      }

      #sideshift-modal-button:hover {
        opacity: 0.9;
      }
    </style>
  </head>
  <body>
    <section>
      <div>
        <h2>Click on the button to open the SideShift Widget</h2>
        <p>
          This is a demo of the embeddable SideShift Widget and Button. For more
          info, visit
          <a href="https://sideshift.ai/embed">https://sideshift.ai/embed</a>.
        </p>
      </div>
      <div>
        <button onClick="window.sideshift.show()" id="sideshift-modal-button">
          Shift Now
        </button>
      </div>
    </section>
  </body>
</html>

Step 6: Review the Final Code

Ensure your final code matches the example provided above. Check for any syntax errors and ensure all required fields are correctly filled out.

Step 7: Test locally

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

open index.html

You should see the SideShift widget opens up when you click the Shift Now 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.

Intro​

Step 1: Create a Directory and Open It in Your Code Editor​

Step 2: Create an HTML File with a Basic Template​

Step 3: Add the embed code​

Step 4: Add the SideShift Button​

Step 5: Style the Body and Text​

Step 6: Review the Final Code​

Step 7: Test locally​

See live demo​

Troubleshooting​