Embedding a live, interactive demo of your product in a landing page can boost conversion rates. For example, remove.bg, an ML-powered API for removing the background from images, lets users try out their software right at the top of their main landing page. Let’s say you’re tasked with adding a similar demo to the homepage of a machine learning API provider.
As a data scientist, there are some barriers to building this kind of demo:
- You need to deploy your model, potentially separately from the main app deployment, especially if the demo is an altered or scaled-down version of the core software.
- You need to call the model from the front-end and build the UI components, requiring JavaScript, HTML, and CSS skills.
- You need to integrate this interface with the marketing site, which may be owned by a different team or built on a drag and drop platform like Webflow.
Let’s consider these challenges one at a time, as well as how you can overcome them with Baseten.
First comes model deployment. If you have a production model deployment served behind an API and you can use it in an unauthenticated demo environment, you’re all good. But most deployed models aren’t like that. Whether it's to reduce compute spend by using a smaller model, protect user data, or preserve uptime, the demo model may need to run separately. With Baseten, you can easily deploy a copy of the model and it will automatically be served behind an API.
Then, you need to build an interface. For the demo to be interactive, the user should be able to call the model on their own prompts. Use Baseten’s drag-and-drop view builder to put together the UI without front-end development technologies
After building the interactive demo, you’ll need to add it to the site. That’s where an iframe comes in!
An iframe, or inline frame, embeds a page within an HTML document. This lets you display another page within your website, even when it is hosted on a different domain. All you need is a custom code block in a drag-and-drop builder, an embed in Webflow, or to ask the front-end team responsible for the marketing page to add a couple of lines of HTML, such as:
One important consideration when embedding a page is making sure it looks at home with the surrounding content. Baseten’s view builder produces apps with a simple, modern theme that fits in on many sites, but you’ll want to use as few components as possible to enable the user interaction and embed as small of a page as possible to minimize interruption of your design.
Baseten empowers data scientists to build and maintain a public-facing demo even when the landing page it lives on is built with a drag-and-drop tool or owned by a separate team. And if tighter integration is desired later, you can always call the exact same APIs that power the Baseten-built views directly from your own front end.
.png)
