Embed Generator Form

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.

Default Deposit Method:

Default Settle Method:

Theme to use for the Widget

Embed Code

Copy and paste this into the <head> section of your website.

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

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 the demo here.

Button Preview

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.



/**
 * 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"
  //   }
  // }
})

Need Help? Join the Developer Chat!

Chat with SideShift.ai engineers and third party developers.

Enter Telegram

Good job! 🎈