Quick Start - HTML

There is another way to integrate Ramp 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</title>

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

    <!--- Start Ramp 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'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 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 and open it again, you'll need to initialize our SDK again.

Using the SDK​

Using the SDK