Exploring web integration types

Discover the perfect fit for your platform. Compare overlay, hosted, and embedded integration options for a seamless user experience.

Updated over a week ago

This article provides insights into Ramp's integration options, features, and recommended types to guide your decision-making process. Regardless of your primary platform or dual support, Ramp provides comprehensive coverage for your integration needs.

For web integrations, we offer three options for you to choose from. The main things to remember when deciding which one to go with are:

  • User experience: hands down the most important factor, as it directly impacts user conversion and time spent on your application.

  • Implementation effort: the amount of resources (development, design) the integration type takes.

Overlay (RECOMMENDED)

Pros

Cons

  • Best user’s experience

  • You can track your integration data

  • Users don’t leave your website

  • Clear boundary between transaction and app experience

  • Doesn’t require design changes to your application

  • Mobile-friendly (works on mobile browsers as well)

  • Requires more technical effort to implement

The overlay option stands out by delivering an exceptional user experience right from the start, even without customization. Its overlay nature ensures that your user interface design remains intact without causing any confusion or redirection.

Although integrating the overlay requires slightly more technical effort than the hosted alternative – involving the inclusion of our SDK in your project – the seamless Web3 access it offers through an overlaid widget on your site makes it a highly recommended choice for all application types.

This option consistently boasts impressive conversion rates while maintaining a favorable balance between implementation effort and benefits compared to other integration types.

Hosted

Pros

Cons

  • Easiest to implement

  • You can track your integration data

  • Mobile-friendly (works on mobile browsers as well)

  • Staggered user experience

  • Users need to leave your website

This method offers the simplest means of integrating an on-ramp into your application, as it doesn't necessitate using an SDK. The process involves directing users to our buy page on a new tab, with specific URL parameters and room for additional customization.

The benefit lies in the fact that you're relieved of the responsibility of designing or positioning the widget, ensuring a seamless experience. However, a drawback is that users are visibly redirected to a new URL, which might not give the optimal experience.

While this option is straightforward and eliminates design concerns, the redirection aspect could impact the user journey negatively.

Embedded

Pros

Cons

  • You can track your integration data

  • Users don’t leave your website

  • Mobile-friendly (works on mobile browsers as well)

  • Precise control over widget position

  • Requires more technical effort to implement

  • Requires more careful UI/UX design consideration

  • Higher risk of poor/inconsistent design results

This alternative closely resembles the overlay integration regarding setup and functionality. The main distinction lies in that when using the embedded approach, the Ramp widget becomes an integral part of your user interface rather than being overlaid on top of it.

Integrating the widget through embedding, facilitated by the Ramp SDK, demands careful attention to design to ensure it seamlessly blends into your UI. When executed effectively, embedding can provide a cohesive, uninterrupted user experience. However, there's a higher likelihood of encountering challenges that lead to suboptimal or inconsistent outcomes.

An embedded integration could be particularly advantageous if financial transactions play a pivotal role in your application's core value proposition, such as in the case of crypto wallets or DeFi platforms. Additionally, it might be the preferred choice when you desire complete control over the widget's positioning within your interface.

Did this answer your question?