Quick Start - 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 dimentions 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: 'Maker DAO',
hostLogoUrl: 'https://cdn-images-1.medium.com/max/2600/1*nqtMwugX7TtpcS-5c3lRjw.png',
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 Instant 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 Instant and open it again, you'll need to initialize our SDK again.