Skip to main content

SideShift Widget

To embed the SideShift widget, start with the Embed Generator Form for a code snippet to add to your website's <head> section. The Embed Tool allows users with minimal coding experience to integrate SideShift.ai. Use it to process payments, as an exchange widget and more. The possibilities are endless.

tip

Use your SideShift.ai account's affiliate ID for the parentAffiliateId field. Learn more about Affiliate Commission.

Example Embed Code​

<script type="text/javascript">
  window.__SIDESHIFT__ = {
    parentAffiliateId: "oTtUpnpVm",
    defaultDepositMethodId: "btc",
    defaultSettleMethodId: "eth",
    settleAddress: undefined,
    type: "variable",
    settleAmount: undefined,
  };
</script>
<script src="https://sideshift.ai/static/js/main.js"></script>

Following this setup, you have two main options:

Option 1: Open Using the SideShift Button​

Place the SideShift Button anywhere on your website. When users click on it, the embedded SideShift Widget will appear as a full-screen overlay. See demo here.

Copy and paste this anywhere in your HTML
<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>

<button onClick="window.sideshift.show()" id="sideshift-modal-button">
  Shift Crypto
</button>

Option 2: Open Programmatically​

Below is the documentation on how to use the Embed plugin. Utilize the embed plugin code to open the widget through your own custom triggers or user interaction flows.

/**
 * Sideshift plugin library
 */
const sideshift = window.sideshift;

/**
 * Show plugin
 */
sideshift.show();

/**
 * Hide plugin
 */
sideshift.hide();

/**
 * Listen for settled event
 * (happens when a shift has been settled with at least one deposit)
 */
sideshift.addEventListener("settled", (deposits) => {
  console.log(deposits);
  // deposits = [{
  //   "depositId": "de6279c2101e211cebbc",
  //   "createdAt": "1555820836956",
  //   "createdAt": "1555820836970",
  //   "depositAmount": "0.0000346",
  //   "settleRate": "17.5324",
  //   "settleAmount": "0.0006066072",
  //   "networkFeePaidUsd": "3.14",
  //   "status": "received" || "settling" || "settled" || "settle_fail" || "rejected" || "refund" || "refunding" || "refunded" || "refund_fail",
  //   "settleTxid": "dvmeagwdkuy34grkuy32dgby3k4ugdb2ykgyu23yu3k2",
  //   "refundAddress": null || "fjdhvbehv543ev4h35bg4u5i34jhcbru3hjfhbj34",
  //   "refundTxid": null || "dfjbd1hjb42hjb5uhj3bh4j2r3b2hjbrt43hj23bruhj3b",
  //   "reason": null || "admin" || "refund" || "insufficient funds"
  //   "order": order (see 'order' event)
  // }]
});

/**
 * Listen for deposit event
 * (happens when a deposit is made)
 */
sideshift.addEventListener("deposit", (deposits) => {
  console.log(deposits);
  // deposits = [{
  //   "depositId": "de6279c2101e211cebbc",
  //   "createdAt": "1555820836956",
  //   "createdAt": "1555820836970",
  //   "depositAmount": "0.0000346",
  //   "settleRate": "17.5324",
  //   "settleAmount": "0.0006066072",
  //   "networkFeeAmount": null,
  //   "status": "received" || "settling" || "settled" || "settle_fail" || "rejected" || "refund" || "refunding" || "refunded" || "refund_fail",
  //   "settleTxid": "dvmeagwdkuy34grkuy32dgby3k4ugdb2ykgyu23yu3k2",
  //   "refundAddress": null || "fjdhvbehv543ev4h35bg4u5i34jhcbru3hjfhbj34",
  //   "refundTxid": null || "dfjbd1hjb42hjb5uhj3bh4j2r3b2hjbrt43hj23bruhj3b",
  //   "reason": null || "admin" || "refund" || "insufficient funds"
  //   "order": order (see 'order' event)
  // }]
});

/**
 * Listen for order event
 * (happens when order is supplied to user)
 */
sideshift.addEventListener("order", (order) => {
  console.log(order);
  // order = {
  //     "orderId": "de6279c2101e211cebbc",
  //     "createdAt": "1555820836956",
  //     "depositMethodId": "btc",
  //     "settleMethodId": "bch",
  //     "depositAddress": {
  //       "address": "3Nh4fgyUpdcihZt5f9Ei1QJpREvRDh2TqZ"
  //     },
  //     "depositMax": "1.867",
  //     "depositMin": "0.0001867"
  //   }
  // }
});