Choosing between Reprise HTML Environment (HTML Capture), Reprise Clone Environment (Application Capture), and Reprise Data Injection (Overlay) may very well be one of the first decisions you make in Reprise. The purpose of this article is to explain the technologies so that you can better understand where to apply each one.
If you wish to learn how to build using any of these technologies please visit the Reprise Academy.
Web Application Architecture
Before we can begin to understand which technology is best to capture for our use case we must first understand how web applications work. To simplify let's break it down into four components as seen above.
Client - A client is just an end-user device being utilized to access an application. Or in simpler terms ~ a human using a web browser.
Web Document - The Web Document makes up everything we can see. This is the UI of an application that is built and includes HTML & CSS.
Web-app code - This is what powers your application. All of the cool features your product can offer are all fueled by the web applications code. The code here is responsible for requesting data from the Backend. This data is then often templated into the Web Document to update the UI.
Backend - Responds to requests for data. These requests are initiated by the Web-app code.
With these four component defined we can now look at an example lifecycle of data that is requested inside of an application:
- The Client interacts with a part of the Web Document. Example: The user clicks a button next to a table of data that says "Update".
- The button's functionality is powered by the Web-app code and as a result that code sends requests for fresh table data to the Backend.
- The Backend retrieves the data that was requested by the Web-app code before responding with it.
- The Web-app code takes the new data and templates it into the UI that is to be updated.
- The Web Document is updated with the changes applied by the Web-app code and the Client now sees the changes.
HTML Environment (HTML Capture)
Popular Use Cases: Product Tour, Leave Behind, Live Demo
Ideal Builder Profile: A basic understanding of HTML and CSS, basic proficiency with JavaScript, and strong product knowledge. If you are concerned about having the right resources to build on your own then please contact your CSM for guidance.
Capture Info: In HTML Environment you are only capturing the Web Document at the moment of capture. Any functionality powered by the Web-app code and not the Web Document will not be captured. You capture by clicking a button anytime there is a UI change you'd like to capture.
Overview:
Since pages are linked together using Web-app code this means that by default no screens are linked together. This makes it the technology of choice for guided experiences as you can define the start, in between, and end steps very prescriptively to drive the narrative.
The ability to link any screens you wish together also makes HTML Environment ideal for skipping steps or jumping through multiple products or integrations. You're not capturing any of the Web-app code that makes your application function so you're not bound by the same rules or constraints as the actual application.
HTML Environment is more than capable of producing stunning live demos and sandboxes too. You can easily anonymize the entire experience to remove sensitive data, quickly tailor the demo for a specific call or person, track usage, and more. Global Linking even makes it easy to link everything together just like your real application!
There is no need for any initial setup of your Reprise environment.
Clone Environment (Application Capture)
Popular Use Cases: Live Demo
Ideal Builder Profile: A high proficiency and understanding of web development and deep product knowledge. Software Engineers, Demo Engineers, and Solutions Engineers often fill this role well. If you are concerned about having the right resources to build on your own then please contact your CSM for guidance.
Capture Info: In Clone Environment you are capturing not only the Web Document, but also the requests and responses being exchanged between the Web-app code and the Backend. You capture by clicking a Record button and then navigating around. As you navigate your Web-app code will be sending out requests for data. When the Backend responds to these requests the responses are saved in Reprise. These saved requests and responses are exactly what allow us mimic the behavior of your application and not just the appearance.
Overview:
Since pages are linked using Web-app code this means that by default all pages are linked together and you won't have to manually link them. However you are not able to easily jump between products or integrations to tell a story.
A lot of hover states, animations, and other dynamic effects that may not be captured in HTML Environment will often be captured in Clone Environment since you are capturing the Web-app code as well.
You are able to easily anonymize the entire experience to remove sensitive data, quickly tailor the demo for a specific call or person, and track usage all via the UI. You can additionally write Javascript snippets through the HTML Environment Backend API that allows you to modify existing responses, create missing responses, and much more.
There is often a period of initial setup required where your Reprise environment will need to be configured for the applications you are trying to capture. This is because when you capture the entire application you are also capturing things like periodic authentication checks. Code snippets will need to be created to solve for these scenarios.
Data Injection (Overlay)
Popular Use Cases: Live Demo
Ideal Builder Profile: Data Injection is meant to be simple enough to be used across your organization and easily shared by demo builders and demo users. Data Injection is meant for your presales team so Solutions Engineers, AE’s or leadership.
Capture Info: Data Injection is an overlay that runs on-top of an existing environment. This means you are not capturing your application like in HTML Environment and Clone Environment.
Overview:
Reprise Data Injection is an extension-based product offering designed for the live demo use case. Data Injection runs on-top of an existing environment, but provides the benefit of being able to modify text, images, and other site content to let you craft the ideal demo story without the time & effort that goes into modifying a demo environment. With Data Injection, any builder can easily layer images, text, charts and other demo elements on top of their existing live application, to expertly build and share demos with prospects, customers, and internal teams.
The way that reveal works is it’s superimposing edits on an existing web page. As the webpage is loading, reveal is looking for those nodes and making the edits. It’s happening so fast that on your end it just looks like you're loading a page with the changes you want.
There are limitations to the edits that Data Injection can make and is best design for quick and easy customizations to your live demos. It's meant to be used in addition to our other platform offerings.
There is no need for any initial setup of your Reprise environment.
The Live Demo Use Case
The Product Tour and Leave Behind use cases are both served best by HTML Environment, but Live Demo requires us to look at a few more factors.
At first Clone Environment may seem like a clear winner since it more closely mimics your application in general. However it also requires a much more technical builder profile, often takes longer to finish projects as there is more up front work required, and requires more QA and testing.
Take into account what you're trying to demo and consider if you even need Clone Environment to demo it effectively. Let's look at a few examples:
- A demo that shows interactions across 3 products or multiple integrations.
- HTML Environment is best when jumping between domains. - A demo that needs to be able to accept dynamic user input and display different results based on that input.
- If the input and results are very simple in how they are related then HTML Environment with some Custom JavaScript may be more than enough, but if not Clone Environment is preferred for complex interactions like this. - A sandbox with a dozen navigation menu links.
- If Clone Environment isn't required to demo any of the features on these pages then a combination of HTML Environment and Global Linking will suffice and prove interactive enough in most instances. - A demo showing a highly interactive whiteboarding tool that is rendered in a canvas.
- Something this complex will almost always require the power of Clone Environment.
A demo of a simple feature set.
- HTML Environment or Data Injection. Clone Environment is almost always overkill for a simple & short demo.
Think of HTML Environment as a hammer and Clone Environment as a bulldozer. Both are good at their function, but not every job calls for a bulldozer. HTML Environment is much less resource intensive and still very capable of delivering a rich demo or sandbox experience. Clone Environment requires a much larger resource investment and stricter requirements on the builder profile. Data Injection is best for quick and easy customization that be used in shared in real time without the need to capture.
If you have questions about whether Clone Environment is right for your next project or if you are concerned about having the right resources to build on your own then please contact your CSM for guidance.