Widget

Implement the Synapse Bridge into your dApp frontend

The Synapse Widget is a trivial implementation of the current Synapse bridge that enables protocols to integrate the bridge into their Frontend with little to no Engineering resources.

The current implementation is simply an iframe with a few style adjustments, such that the widget will fit in your page properly. Below is an example picture of what it will look like.

Implementation

To install the widget into your frontend, you will need to create a new page that your dApp routes to, and then paste the following iFrame into the the component.

// Iframe Component Example
function App() {
  return (
    <div className="App">
      <iframe src = "https://widget.synapseprotocol.com/"                                                                                 title='widget'
        scrolling='yes'
        height= "800px"
        width="500px">
        </iframe>
    </div>
  );
}

In this version of the widget, you can customize the default chains and tokens bridged using url parameters in the iframe link. Further customization options will come in the near future. If you have any questions or need help implementing the widget, feel free to reach out to the team in Discord!