top of page

How to get started

Personalization

🎨 How to start editing a demo

Basically, there are two ways to access the demo editing screen: being redirected as soon as you finish recording or clicking on the first icon that appears when you hover over a demo in the library (as long as you have editor access). Remember that viewer users can only view and share the demos.

💬 Guide the user journey

Once you finish a demo and are redirected to editing, you will notice that each click you made generated a frame (observable by the numbered thumbnails at the bottom of the screen) and the platform automatically added a tooltip (balloon) highlighting each element clicked.

Tooltips serve as frame transition indicators, so one is required per frame (with the exception of the demo and frame opening cards—which already have buttons as transition indicators—and the last one, since there are no more steps to follow). You can relocate a tooltip by simply deleting the old one and inserting a new one through the toolbox (the button with a "+" on the right side). If a tooltip already exists on the frame, the platform will automatically duplicate it, keeping the old one on the previous screen.

By clicking on them, you can edit them. In addition to adding text and having all the customization options for color, size, and orientation, you can paste images and GIFs with CTRL + V directly into the tooltip, copying the image from the web. The background color, border, rounding, highlighting of the clicked element, and the next and back buttons are also customizable.

💳 Add cards

In addition to discussing specific elements, we can engage with our audience through cards, which interrupt the demos to discuss the general context. All of them are fully editable, and in addition to photos, we can add embedded videos (such as from YouTube and Vimeo). They can be divided into three types:

  • Demo opening card: This comes before the demo begins and serves to provide initial context for what the person will see, explain that it is an interactive demo and its objective.

  • Frame opening card: can be added before any frame to explain that screen.

  • Call to Action Card: one of the ways to finish, it allows the creation of several buttons with redirect links (next steps for the person who completed the demo).

📄 Embedded page at the end

In addition to the CTA card, you can embed a page or entire website at the end of your demo, as long as it allows it. To embed, simply click the toolbox option and insert the link in the indicated location. To allow a page to be embedded on an external domain, you must configure your X-Frame-Options Header set to "ALLOW-FROM https://app.getdemo.com.br," and how you do this will depend on your page builder.

🧊 Freeze floating menus

If your system has menus or elements that only appear when the mouse hovers over them, and you've created the screens using HTML, they will likely be hidden until the end user also hovers over them. Therefore, if you want to freeze this animation so that the menu or element remains open and you can, for example, add a tooltip to it, simply use the "Freeze State" function in the toolbox.

✏️ Editing elements (exclusive to HTML)

In HTML capture, all elements are fully editable. Double-clicking on them will open the editing menu with the following options:

  • Text editing: allows you to change the text (names, numbers, etc.).

  • Text color: allows you to change the text color.

  • Background color: changes the element's background.

  • Blur: creates a blur in front of the element, making it difficult to read.

  • Delete: deletes the element completely, often adjusting the space where it was located according to the code (reordering the elements in the region).


There are two ways to apply the changes made: “Apply” is to save the changes in the selected frame, while “Apply to all frames” uses intelligence to try to identify if that element was repeated in others and change them as well.

🖼️ Add images

Using the toolbox, you can select the "Add Image" option, which allows the editor to select an image from your computer to replace any element on the screen (such as a photo, graphic, icon, or any other). The images follow the same size as the elements, but it's important to emphasize the importance of having similar dimensions for a good fit.

🔙 Undo changes and save

All edits you make to a demo will be saved in your browser. Until you click the save button, changes can be reverted with Ctrl+Z or the "Undo Changes" button, as this is the only time your work will be officially applied and visible to others.

📄 Merging demos

It is possible to trigger the frames of an already recorded demo at the end of another one with the “Merge demos” functionality.

bottom of page