Widget Embed

Speed - Stability - Security

Our fastest integration option is the widget embed. Utilizing a few lines of code, our onramp widget will be available in your site, application, or both! Furthermore, our widget is automatically updated and maintained by our expert engineers to ensure the most stable and secure solution on the market.

πŸ‘

Embed our widget in 5 minutes or less!

Utilizing our widget embed, you can start testing our integration in no time. Our development team can work with you to customize your widget's theme to match your brand's look and feel.

Getting set up

Via NPM

  1. Install our npm package via npm install @noba-tech/noba-widget or yarn add @noba-tech/noba-widget
  2. Import noba-widget.js from /node_modules into your HTML file and define an element to contain the Noba Widget within.
  3. Initialize a new Noba Widget using the script below.

Via CDN

  1. Import our JavaScript library file.
  2. Initialize a new Noba Widget using the script below.
<!-- Import noba-widget.js via CDN -->
<script src="https://cdn.jsdelivr.net/npm/@noba-tech/noba-widget/dist/noba-widget.js"></script>

<!-- Create the div element to contain the Noba Widget -->
<div id="noba-widget"></div>

<!-- Initiate the Noba Widget-->
<script>
    new NobaWidget({
        apiKey: 'YOUR-API-KEY',                  // (Required) Reach out to [email protected] if you require an API key.
        containerID: 'noba-widget',              // (Recommended) ID of the container element - set to 'noba-widget' by default.
        userEmail: '[email protected]',             // (Optional) 
        userID: 'partners_ID',                   // (Optional) 
        defaultCrypto: 'ETH',                    // (Optional) Default crypto to display - set to 'ETH' by default.
        amount: 50,                              // (Optional) Default amount to purchase in US Dollars - set to 50 by default.
        skipInputScreen: false,                  // (Optional) Boolean to skip the transaction input selection screen. Ignored if defaultCrypto or amount are empty.
        nobaSourceEnv: 'partner-test',           // (Optional) Default source to display - set to `partner-test` by default.
        destinationAddress: '0x...123',          // (Optional) This input allows the ability to pre-set the destination address for a transaction.
    }).start();
</script>
<!-- Import noba-widget.js from local path if using npm module or local build -->
<script src="/dist/noba-widget.js"></script>

<!-- Create the div element to contain the Noba Widget -->
<div id="noba-widget"></div>

<!-- Initiate the Noba Widget-->
<script>
    new NobaWidget({
        apiKey: 'YOUR-API-KEY',                  // (Required) Reach out to [email protected] if you require an API key.
        containerID: 'noba-widget',              // (Recommended) ID of the container element - set to 'noba-widget' by default.
        defaultCrypto: 'ETH',                    // (Optional) Default crypto to display - set to 'ETH' by default.
        amount: 50,                              // (Optional) Default amount to purchase in US Dollars - set to 50 by default.
        skipInputScreen: false,                  // (Optional) Boolean to skip the transaction input selection screen. Ignored if defaultCrypto or amount are empty.
        nobaSourceEnv: 'partner-test',           // (Optional) Default source to display - set to `partner-test` by default.
        destinationAddress: '0x...123',          // (Optional) This input allows the ability to pre-set the destination address for a transaction.
    }).start();
</script>

NobaWidget parameters:

ParameterTypeDescription
apiKeyStringYour Noba API Key that identifies which partner you are. Reach out to [email protected] if you require an API key.
containerIDStringID of the container element - set to noba-widget by default unless overridden
userEmail (Optional)StringEmail address used by the partner to identify this user. This email address will be used to create the user account. If not provided, the user will be prompted for an email address.
userID (Optional)StringInternal ID used by the partner to identify this user. This will be useful in correlating KYC and transaction activities via webhooks.
nobaSourceEnv (Optional)StringThe Noba environment the widget will operate under.

Options:
partner-test
production
defaultCrypto (Optional)StringSets the crypto to display for purchase - set to ETH by default.
amount* (Optional)FloatSets the amount to purchase in US Dollars - set to 50 by default.
destinationAddress (Optional)StringSets the destination address for the purchase.

This feature must be activated on a partner-by-partner basis to protect the end users.
landingScreen* (Optional)StringThis parameter provides the option skip to a specific landing screen. This will lock the transaction to the amount set in amount and the asset to the value of defaultCrypto. Ignored if defaultCrypto or amount are empty.

This feature must be activated on a partner-by-partner basis to protect the end users.

🚧

amount restrictions

  • The amount must be valid based on the transaction limits for the platform as well as the consumer. To learn more, please check out the FAQ and the ENDPOINT.

    Transaction limits are reduced in testing environments in order to avoid liquidity crunches on testnets.

  • amount float values are limited based on the currency precision. You can learn more about currency precision via our FAQ.

🚧

Thematic injection coming soon!

We are working to allow our partners to thematically override the Noba widget UI. This allows our partners to maintain the look and feel of their brand, even when utilizing our fastest integration option.


What’s Next