Quick Start - HTML

There is another way to integrate Ramp Network via SDK by putting code right into your HTML files. Here's how to do it.

Using the SDK

A basic example embedded in HTML looks like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Ramp Network</title>

    <!--- Include Ramp Network SDK -->
    <script
      src="https://cdn.jsdelivr.net/npm/@ramp-network/ramp-instant-sdk@4.0.5/dist/ramp-instant-sdk.umd.js"
      integrity="sha256-+ZKtflAhoWOQqb8SMBw2VK4k3BWzIM1/DkzyiFnYUjA="
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <button type="button" id="buy-with-ramp-button">Buy with Ramp Network</button>

    <!--- Start Ramp Network on button click -->
    <script type="application/javascript">
      const startRamp = () => {
        new rampInstantSdk.RampInstantSDK({
          hostAppName: 'yourDApp',
          hostLogoUrl: 'Link to your logo',
        })
          .on('*', (event) => console.log(event))
          .show();
      };

      document.querySelector('#buy-with-ramp-button').addEventListener('click', startRamp);
    </script>
  </body>
</html>

Clicking the button launches Ramp Network's widget.

A more detailed list of the available configurations with examples can be found here.

That's it! Create an instance of the SDK with a configuration object and call the .show() method when you're ready to display Ramp Network to your user.

It's important to remember that one instance of the SDK corresponds to one instance of the widget - if you want to close Ramp Network and open it again, you'll need to initialize our SDK again.

Using the SDK​

Using the SDK