1. Walnut.io
  2. Welcome to Walnut
  3. Create demos

Create demos part 3: capture screens

Updated

About

Whether you capture screens using the Walnut extension or import screens into templates, screen captures are the skeleton for your demo. In this article, we go through the best way to capture screens and some options for your capture workflow.

The extension grabs the HTML from the front end of the application. Walnut does not process any logic or Javascript. Your source code is not affected and remains secure.

We've split the article into bite-sized chunks. Take it easy, you can always come back for a refresher.

In this article

Create your storyline

It’s vital that you’ve got a clear, simple message to communicate to viewers. This isn’t always as easy as it sounds! 

  • Remember, your demo is short and so your message and call to action (CTA) need to follow suit. 
  • Remember your viewers are busy people.  So keep it simple and let Walnut help you create a compelling message.

Four focus areas

  1. The problem: What problems are your buyers experiencing and what value do you want them to take away after viewing your demo?
  2. The target audience: Who is your target audience and what do they care about?
  3. The demo experience:  What is the best way for your viewers to experience this demo? On a live call? Or on their own?
  4. The call to action (CTA): What action do you want the viewer to perform once completing the demo?  

Every story has a beginning, middle, and end

  1. The opening: Always introduce viewers to the demo they're about to see. You want to make sure they are intrigued from the first screen so that there is incentive to learn more.
  2. The middle: This is where you want your product to shine. Highlight your product's competitive advantage! Focus on what makes your product stand out - and not on the obvious! 
  3. The conclusion: Leave viewers with a CTA. Do you want them to contact you, learn more, or leave their details? Save this for the end.

Set demos for web and mobile

One layout doesn’t fit all! So we’ve created options so your demos will look great whatever the screen size of your browser window or mobile (also known as viewport).  

Knowing how to optimize the viewing experience is a key part of creating great demos. 

So head over to the article Create demos part 2 (set display settings).

Capture screens with the Walnut extension

There are various ways to capture screens but the simplest is to use the Walnut Chrome extension. It’s always at hand and the screen captures load automatically into our editor. Nice! So if you haven’t done so already, download the extension from the Chrome Web Store.

Here's the workflow.

To install the Walnut extension:
  1. Navigate to chrome://settings/help and check that Chrome is up to date.

If Chrome updates, you’ll need to restart it.

2. Go to Chrome Web Store and download the extension.

3. Pin the extension so it’s always there when you need it!

NOTE: Can’t capture a specific page? Walnut only supports HTML and CSS captures. If the Start Capturing button is disabled, please reach out to customer support.

Use an existing template or create a new one

When you capture screens, the captures go into a template. Once you’ve captured the screens and added all the features you want, you’ll preview the demo publish & share. 

So templates are key. When you use the Walnut extension, the first step is to decide if you want to use an existing template or create a new one.

For more on templates and template settings, head over to the article Create demos part 1: create & share templates.

Decide which capture type to use

You can choose between single, timed and continuous capture options. Try them out to see which capture type suits your demo best.

  • Single: Capture each screen separately. This is a good choice if your screens are not consecutive. You go to screen 1 and click Capture. Then move to another screen and click Capture and so on.
  • Timed: In order to use this feature, you must be an Editor, Admin or Account Owner in Walnut. Set the number of seconds as a countdown, before Walnut does a screen capture. Good when you want to select a specific dropdown or popup on the screen before the capture starts.  
  • Continuous: Each click starts a new screen capture. Good when you’re recording specific steps on one or more screens.  

TIP: Ensure your Chrome zoom setting is set to normal (100%) before you start to capture screens.

1. Use single capture

Here's the workflow.

To use single capture:
  1. Open the url that you want to capture in your browser.
  2. Open the screen capture extension.
  3. Click + and give the new template a name (#1).
  4. Click Start Capturing (#2). A debugger popup appears. It’s OK, no need to do anything.
  5. If the screen is long and requires scrolling to see all the content, scroll to the end before you start the screen capture and then scroll back to the top. Then click the Capture icon. 
  6. Move to the next screen and click the Capture icon. Repeat this until you have all the screens you want.
  7. To load all the screen captures into the template you created, click the load icon.
  8. Once loaded into the editor, check the screen names that were auto-generated and rename them as needed. 
  9. To rename, right click the image and select Rename.

NOTE: When you have multiple screens and you use scroll capture, then always start in the same position so that the screen positions don't alter and appear to 'jump' when you move from screen to screen.

2. Use timed capture

Here's the workflow.

To use timed capture:
  1. Open the url that you want to capture in your browser.
  2. Open the screen capture extension.
  3. Click + and give the new template a name.
  4. Click Start Capturing. When you create a new template, the extension automatically opens to Single capture, so to change to Timed capture, click the dropdown at the bottom of the screen.

  5. A clock shows (#1) with options to set the time delay you want between captures (#2)..
  6. Then click the Capture button.

3. Use continuous capture

NOTE:  If multi-resolution capturing is ON, you can’t use continuous capture.. The two features cannot be used simultaneously. 

Here's the workflow.

To use continuous capture:
  1. Open the url that you want to capture in your browser.
  2. Open the screen capture extension.
  3. Click + and give the new template a name.
  4. Click Start Capturing. When you create a new template, the extension automatically opens to Single capture, so to change to Continuous capture, click the dropdown at the bottom of the screen.

  5. The icon on the capture button changes to a filmstrip .
  6. The Walnut captures screens, a debugger will appear in the browser window. This is expected behavior, and aims to reproduce the highest capture quality as possible. 
  7. To stop captures, click the Pause button.

Preview captured screens

In the Editor, click the Preview button in the header.

You can also use a tool like Windows Resizer to change the size of your screen, so you can see the demo on different devices e.g, tablet, mobile portrait, mobile landscape and more.

Autoname captured screens

Autoname names each screen exactly as  the name shown in the tab. This saves you time and when you review / edit captured screens.

Autoname is ON by default but you can set it to OFF.

Here's the workflow.

To set autoname to OFF:
  1. Open the Walnut extension.
  2. Click the 3 dots and select Settings.



  3. Set Auto naming to  OFF.

Link screens

Walnut automatically links screens in the sequence you captured them, but it’s always good to check the flow. Sometimes you might want to duplicate a screen and go back to it as part of your demo. Or there might be other changes. So check that the links are as you want them.  

Before you start

  • When auto-linking is ON, the setting applies to all users and all screens in the template (global setting). 
  • Users can edit links or remove some or all links.
  • When auto-linking is ON, the setting applies to all screens in the template (global setting).

Dynamic link options

  • All auto-links: This is the default and the links are in the order of the screen captures.
  • Capture flow auto-links: Creates one link per screen. The link is on the element used to navigate to the next screen capture.
  • No auto-links: All existing links are removed so you can set the links in a specific order.

Link screens in a specific order

Here's the workflow.

To link screens in a specific order:
  1. In the template editor, click the screen you want.
  2. Click an element on the screen and from the toolbar click the link icon.

  3. Click the screen you want to link to.
  4. Click Done.

Screen options (right click)

Rename

When you select it, a box opens to change the screen name.

Duplicate

Duplicates the slide.

Move to Section

Moves the screen to a different section.

Display Options

You can change the display option for individual screens if needed. 

Here's the workflow.

To change the display for a screen:
  1. Right click the screen and select Display Options. By default all screens have the same default settings of the template.
  2. Click Template Default. A message appears asking to confirm if you want to change the display for this screen. 
  3. If yes, click Change. Other display options are then available for selection.
  4. Right click the screen and select Display Options again, then select the display you want.

Autoplay Screen

Select the order you want.

Next in line / previous in line or enter a screen name.

Open URL

Open the screen in the browser showing the URL.

Custom HTML

Enter code into the header and/or body.

Reset All Changes

Does what you expected it to do.

Preview

Previews the screen with the guides.

Update Screen

Helps you maintain and keep demos up-to-date by quickly replacing existing screens with new ones, without losing existing edits and guides. No need to recapture.

Delete

This warning message appears. 

“This screen will be permanently deleted. Any associated guide steps will also be deleted. Are you sure you want to proceed?”

If you’re OK with that, click Delete.

Replace existing screen captures

There are times when you want to change a screen capture. For example, you might want to swap out one screen capture for a new version of the demo.

Here's the workflow.

To replace an existing screen capture with a different capture:
  1. In your browser, open the new screen you want to capture.
  2. Open the Walnut extension. Select Capture Screens and the template where the screen is you want to replace.
  3. Click Start Capturing.
  4. Change the selection to Update screen.
  5. Then, in the template, select the existing screen that you want to replace.
  6. Click the Capture button.
  7. In the template, click Refresh.

Publish demos

When you’ve used all the settings you want, you’re ready to publish, so head over to the fourth article in the Create demo series, Create demos part 4: publish & share.

Specific uses cases

Here are some tips for specific use cases.

1. Overlay one capture with another 

Say you have a popup that you want to capture and show it over the main screen.

> To overlay one capture with another:

  1. Capture the popup.
  2. Separately capture the screen.
  3. Contact us and we'll overlay the popup onto the main screen. The top layer (the popup) is an image. It won't be interactive, but you'll get the effect you're after.
2. Embed a demo into PowerPoint

Walnut demos can only be embedded into web pages via HTML. To include a demo into your PowerPoint add a hyperlink in the PowerPoint file.

3. Capture Figma screens

It's not possible to capture Figma screens because they are not in an HTML format. There are some options.

  • We offer Figma exports (export as HTML) as a service through our Professional Services Enablement program. Our Enablement Team can export the designs and capture them with the Walnut Extension. 
  • If you can export your Figma designs as HTML and host the HTML in a browser with a live server, the Walnut extension will then be able to capture these HTML elements. Figma has some plugins that can enable this!
  • Capture the screens as static images and import the images and import them into the template.

 

Was this article helpful?
0 out of 0 found this helpful