Skip to main content

Web integration - Embedded Mode

If you want to quickly embed Ramp into your app without an overlay, this is the right place to learn how to do that. This method allows you to easily insert the Ramp SDK into the DOM node of your choice.

Getting the SDK​

First, you'll need to add our SDK to your project.

If you use npm or yarn, run:

# npm
$ npm install @ramp-network/ramp-instant-sdk

# yarn
$ yarn add @ramp-network/ramp-instant-sdk

You can also use a CDN and a script tag. You can learn how to use this method here.

Desktop and mobile variants​

There are two variants for the embedded SDK without overlay, embedded-mobile and embedded-desktop. These variants let you put the widget (without the overlay and background) into a DOM node that you provide via the containerNode config value. You must provide a containerNode while using this variant.

However, the container node must never re-render while the widget is used or the state inside the widget will be lost.

Note: the overlay node in domNodes field of the SDK will be null.

Size requirements​

The embedded-desktop variant has minimum dimensions of 895 x 590 px.

The embedded-mobile variant has minimum dimensions of 375 x 667 px.

Using the SDK​

In order to start the widget, you need to provide some basic configuration to the constructor of our SDK.

A basic example with embedded-desktop looks like this:

new RampInstantSDK({
  hostAppName: 'Your App',
  hostLogoUrl: 'https://assets.ramp.network/misc/test-logo.png',
  hostApiKey: 'your_host_api_key',
  variant: 'embedded-desktop',
  containerNode: document.getElementById('ramp-container'),
}).show();

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.

note

If you want to provide the best off-ramping (selling crypto) experience to your users, we recommend to take advantage of the Native Flow.