Themes

You can now customize the look'n'feel of your walkthroughs with Themes.

The new Theme designer can be found under Settings -> Themes:

Theme designer

This theme has a custom avatar, which is slightly larger than the default size. The speech bubble is placed on the bottom right and is a little wider than the default. It uses the Roboto font and a Material Design color scheme.

There's a standard theme, which you can duplicate to make your own customizations.

You can mark a theme as your default theme using the three-dot menu on the Theme designer page. This will make all new walkthroughs use this theme by default.

You can change the theme for a walkthrough under the three-dot menu, then click Settings.

You can also choose a different theme for individual steps by clicking the step's avatar and checking "Use a different theme for this step". This way you could, for example, place the speech bubble in a different corner for just a few steps.

Avatar and voice, which was previously possible to edit per walkthrough, have been moved under themes. This should make it easier to manage.

Let us know if there are any aspects of your walkthroughs that you miss customization options for.

Modals and primary buttons

We've added the ability to style the speech bubble and its buttons differently from step to step.

Modal and primary button

Modal steps allow you to put the content directly in the face of the user. This is great, for example, for the first step in an onboarding flow. This way, you make sure that the user sees it. To turn a step into a modal, click the avatar in the walkthrough builder, and then check "Modal" under "Appearance".

Primary buttons stand out with a more prominent appearance than regular buttons. This is useful when you want to lead the user in a specific direction. To make a button primary, click it in the walkthrough builder and then check the "Primary" radio button under "Appearance".

Coming up soon: Tooltip steps, where the speech bubble is anchored and placed next to an element you select.

Beacon improvements

We've released some improvements to our walkthrough beacons. Beacons are used to draw users' attention to specific elements, so it's crucial that they're highly visible, yet not intrusive.

The beacon animation is now two expanding rings. They expand over 2 seconds, 1 second apart, making it look like ripples. Here's a GIF:

New beacon

We stuck to a yellow color. I believe that red is too intrusive (you don't want to welcome your new users with a bunch of error-like red). We're now using Material Design's Amber color (500), which is a reasonable default color since it increases the likelihood that it's somewhat familiar to the user. This color will obviously be customizable very soon so that you can pick your own color (holla at me if you'd like this before it's generally available).

Beacons now follow content around precisely and immediately. Before, they would either jump periodically or not move at all.

Beacons are automatically hidden if they're scrolled out of view (it even works with nested scroll containers). If they're outside of the browser's viewport, an arrow will point in its direction, so the user knows where to scroll to:

New pointer

Performance has also been improved, which could make a difference to users on very low-end devices with multiple beacons.

The changes also prepare us for the upcoming "highlighted areas" (WIP term). Instead of a pulsating dot, you'll be able to highlight a whole element on the page with a rectangle around it. Optionally, you can also choose to mask everything around it, so the user can't click there. Stay tuned!

Early Access Announcement: Walkthroughs

TL;DR

Register for early access to In-app Walkthroughs today! All early access users get Walkthroughs free forever with unlimited monthly active users.

Introducing In-app Walkthroughs

For the last 6 months, we've been working on a new product. We're incredibly excited to announce the beginning of Studio1 Walkthroughs. With Walkthroughs, you'll be able to build in-app experiences using our intuitive walkthrough builder. No code required!

What you can build with it

Here are some ideas:

  • Improve your sign-up conversion rate with an onboarding product tour that is automatically shown to new users.
  • Announce new features inside your app to make sure users notice - and use - them.
  • Send interactive help guides to users via links in emails/live-chat, showing them how to perform tasks that typically require a lot of support/explaining.

Why we built it

When our first product, Studio1 Videos, launched, we wanted a highly interactive walkthrough that could guide new users from zero knowledge to rendering their first video in less than 15 minutes. We looked at the market for walkthroughs/product tours, but couldn't find exactly what we were looking for.

You've probably seen onboarding flows like this in many other apps:

  • You arrive in a new app, which you've never seen before.
  • The whole screen goes dark, and a single small item is highlighted with a tooltip next to it.
  • The tooltip has a Next button - you can't click anywhere else.
  • You just blindly click Next, Next, Next until you're done.
  • The tour doesn't ask you to do anything, and you, therefore, don't really learn anything.
  • When you're done with the tour, you've got a bunch of information, but haven't actually achieved anything.

This is not what we wanted!

We wanted a walkthrough that:

  • Could discretely point the user in the right direction without taking over the whole UI.
  • Could react when the user performed any kind of action on the page, e.g., clicked a button, navigated to a page or typed into a text field. Example: If you fill in a specific value in a text field, then go to the next step.
  • Detect when things went wrong, and help the user fix it.
  • Could branch in different directions depending on the user's actions. E.g., if a user closed a dialog early, we would just skip the next step(s).
  • Since we were already using synthetic text-to-speech voice-over, we thought it would be cool (and helpful) if the walkthrough also talked to the user.

Granted, there are probably some offerings on the market, which could do sort of what we wanted, but they either have a very high cost and/or can be very difficult to use and maintain.

So, we decided to hard-code a walkthrough. It went great! New users were really impressed with our automated onboarding. But, it was a lot of work to build and maintain.

We saw the opportunity to turn it into a separate product so that other companies could quickly build solid walkthroughs without spending weeks of development time. As of about two months ago, this hard-coded walkthrough was replaced by a walkthrough powered by Studio1 Walkthroughs itself (woof woof, mmm.. dog food).

Now we're inviting you to build your own walkthroughs.

What it looks like

Your users will see a speech bubble appear in the corner inside your own web app:

Walkthrough example

You build walkthroughs using our intuitive builder. No code required. No need to wait for developers to do their thing.

Walkthrough builder

What to do next

Now, go read all about In-app Walkthroughs or register for the waitlist today. We invite new users every week. And, remember that it'll be free for early access users forever!

Window actions

You can now manage multiple windows in your screencast actions.

With Focus window actions, you can control which window is on top and should be interacted with in the following actions (click, type etc.):

focus-window

With Close window actions you can close the currently active window:

close-window

With Reposition window actions you can move/resize the currently active window:

reposition-window

You find all the new actions in the good ol' Add action menu under each video segment.

Improved browser look'n'feel

Studio1 renders you videos in a Chrome browser running on our servers. Until now, this browser had some not-so-good-looking parts: The scrollbars and the mouse cursors.

The browser now uses overlay scrollbars that are hidden when not in use, as you know it from modern browsers / operating systems.

The mouse cursors have been replaced with a theme resembling Mac OS.

We hope this make your videos match your customers expectations of what your software looks like.

Add/edit actions in Live Manuscript

You can now add actions directly in Live Manuscript using the Plus icon above the actions list:

add

This way you can actions that you can't add just by using the mouse and keyboard, such as uploading files or waiting for elements to appear.

You can now also edit existing actions. First click the Pencil icon above the actions list, then click the Pencil icon next to the action you want to edit.

Share video link

Studio1 videos are meant to be put on your website, in your help center or directly in your web app.

Sometimes you just want to send a video link directly to a customer or a coworker though.

This is now possible with the new Share functionality on the Publish page:

publish

Just navigate to a video, click the Publish tab and then click Copy link. You can paste this link into an email or a chat client.

When the link is clicked, the receiver will see a page containing the video, your logo and the video's name. See example

Drag and drop file actions

In November, we added support for selecting files in file inputs.

Some web apps also support dragging and dropping of files when uploading. As of today, Studio1 can do that, too!

You'll find the new action under the Add action button on the Manuscript page. It looks like this:

drag-and-drop-file

First, you tell it which files to select by uploading the actual files into Studio1. Next, you tell it which element to drag and drop the files to.

When your video is rendered, Studio1 will show a file selector, select the files and drag and drop them to the drop zone.

Here's a demo video of what it looks like when rendered:

Support for custom screen resolutions

Until now, all Studio1 videos were recorded with a resolution of 1280 x 800 pixels.

As of today it's possible to choose your own screen resolution.

To see how to use it, check out this video (with a resolution of 1280 x 720, or 16:9 format):

Read more about screen resolutions in our support article about Video settings.

It's been quiet on the blog since December. Don't worry; we've been staying busy! We have a few new features hidden behind feature flags and several unannounced improvements. Expect more announcement over the next weeks.

December 2018 newsletter

This is a repost of the newsletter we sent out on December 6th.

We're excited to tell you about what we've been up to lately.

Since we launched our video screencast automation solution a little over a month ago, we’ve had a fantastic reception. Thank you for the amazing feedback!

We’ve added a bunch of highly-requested features, which make it possible to create even more kinds of screencast videos with Studio1.

There is more exciting news coming up soon! We're working on adding a second product to our offering. Something that will complement well with videos, but more... interactive. Stay tuned.

Read about the new features below, or sign in to your account to check them out.

11 new synthetic voice languages

Studio1 now speaks a total of 12 languages: Danish, Dutch, English (Australia), English (UK), English (US), French, German, Italian, Japanese, Korean, Swedish, Turkish.

Voices

Just type your desired voice-over into Studio1, and you immediately get almost-human-sounding voice-over for your videos. Read more in the blog post

Remember that you can also record your own voice, if you prefer a real human voice.

Select and upload files

Using our new Select file action, you can easily select and upload files in your screencast videos. Read more in the blog post

select-file

Keyboard shortcuts

You can now add Press key actions to your manuscripts. It works seamlessly with Live Manuscript. Example: Focus the Email field in a sign in form and press Tab to go to the Password field. Read more in the blog post

press-key

Drag and drop

Using the Mouse down, Move mouse and Mouse up actions you can now perform drag and drop operations in your videos. Read more

Double-click and right-click

Some apps use double-clicks and right-clicks. No problem! Studio1 supports that now.

Respond to dialogs

You can now tell Studio1 to respond OK or Cancel to native browser dialogs (JavaScript dialogs) using Respond to dialog actions.

New synthetic voice languages

Today we're adding support for 11 new languages. Check this example video:

List of new languages

Language Number of voices
Danish 1
Dutch 1
English (Australia) 4
English (UK) 4
French 4
German 4
Italian 1
Japanese 1
Korean 1
Swedish 1
Turkish 1

This is in addition to the 6 English (US) voices we already have.

How to use

You choose your language using the combobox next to the Standard voices header under Settings -> Synthetic voices.

You can adjust the voices' speed and pitch, and save as a custom voice.

After picking your favorite voice, use the three-dot menu in the top-right to set it as your default voice. This way it will automatically be picked when you create new videos.

Read more about synthetic voices

Select file actions

You can now add Select file actions to your screencast manuscripts. It lets you upload files in your screencasts.

The new action can be found under the More menu in the Add segment bar. It looks like this:

select-file

First, you tell it which files to select by uploading the actual files into Studio1. Next, you tell it which file input to select the files in.

When your video is rendered, Studio1 will move the mouse to the file input, show a file selector and select the files.

We made an example video with Studio1 using Select file actions of how to use Select file actions in Studio1.

select-file-meme

Yes, we love a little video-ception. Anyway, here goes:

Select file actions work seamlessly in Live Manuscript. When you click a file input, a dialog appears, in which you can upload the files to select.

Known limitations

There are 2 technical limitations to Select file actions:

  • File input elements (<input type="file">) must be either:
    • Visible (i.e. we can click the input element directly).
    • Hidden and be contained inside a <label> element.
    • Hidden and the page contains a <label for="input-id">, where input-id points to the file input.
  • File inputs inside iframes are currently not supported.

Please get in touch if you have use cases that require solutions for any of these limitations.

What's next?

The next important feature we'll be adding, is more synthetic voice languages: English (UK), English (Australia), German, French, Swedish, Turkish, Japanese, Dutch, Italian, Korean.

Stay updated by following @studio1io on Twitter.

Double-click and Press key actions

We've added two highly-requested new screencast actions: Double-click and Press key.

Double-click actions don't need much of an introduction. They're just like regular Click actions, except they double-click. Some users need this for spreadsheet-like UIs where you double-click to enter a cell.

double-click

Press key actions instruct Studio1 to press a single key. You can optionally use a combination of modifier keys (Shift, Control, Alt and Command). There are two popular use cases for Press key actions:

  • Navigating forms. After clicking into and filling in one field, sometimes it looks a bit smoother in videos to just tab to the next field, instead of having Studio1 move the mouse to and click each field.
  • Grid-like or spreadsheet-like UIs where you use arrow, Enter and Tab keys to navigate between cells across rows and columns.

press-key

They both work seamlessly with Live Manuscript. If you double-click an element, a Double-click action will be added to your manuscript instead of a regular Click action. If you press a key while the remote browser is focused and you're not already typing into an input field, a Press key action will be added to your manuscript.

The next action we expect to deliver is the ability to upload files.

Stay updated by following @studio1io on Twitter.

Announcing Studio1

After running in private beta since July, we are incredibly excited to launch Studio1 publicly.

Studio1 is the first-ever solution to automate screencast videos for customer support, marketing and sales.

Studio1

We all know how frustrating it can be to create your own screencast recordings. Moving your mouse smoothly and avoiding typos is nearly impossible. The pace is never quite right without a lot of complicated video editing. Recording your own voice is intimidating for many. If you do try, you often end up with mumbling, coughing, background noise and mouth-breathing. Outsourcing professional speech is great, but expensive, and prevents you from easily changing the voice-over later. Let's not even talk about how many videos get out-dated when your software evolves and nobody has the time to re-record them all over again. Great customer support entails keeping learning materials updated with the latest features.

Studio1 changes all this.

In Studio1, maintaining high quality videos for your customers is easy and fun.

Instead of recording your own screen, you build a manuscript in Studio1 using simple text. The manuscript consists of actions such as "Go to", "Click" and "Type". To get voice-over for your video, you simply write what you want it to say, and Studio1 synthesizes speech immidiately. You can also record your own voice using your microphone. To render a video, you simply click a button, and Studio1 does it all for you by repeating the actions you added and overlaying the voice-over.

Here's our explainer video (it's of course made with Studio1):

Read more about our product, or create an account today.

Wait actions

We've added two new video actions today, which can help make the timing of your manuscripts even better.

You can add them to your manuscript using the More button in the Add action bar:

More button

This menu then opens:

Add action menu

Wait for element to appear

Studio1 will usually wait for the webpage to settle before performing the next action. This includes waiting for requests to finish and the browser not being busy.

Sometimes your webpage may do some work in the background, which Studio1 cannot detect.

In this case you can now use the "Wait for element" action to tell Studio1 to wait until an element with the given text is found.

Here's an example where we wait for the webpage to display the text "Rendering complete" before continuing:

Wait for element

Wait (seconds)

Other times you just want Studio1 to wait a fixed amount of time. For this purpose, use the "Wait (seconds)" action, and tell Studio1 how many seconds we should wait:

Wait duration

Iframe support

Today we're adding support for a frequent feature request: iframe support.

Previously, Studio1 couldn't interact with iframes at all. It works completely seamless now - you don't even have to know that your web app/website uses iframes.

Introducing Live Manuscript

I'm incredibly excited to announce that we launched Live Manuscript today.

With Live Manuscript, you control a remote browser directly from within Studio1. As you click your mouse and type with your keyboard, Studio1 tracks your actions and add them to the manuscript.

This way the actions can be performed again later when you actually render the video.

It truly makes creating manuscripts a breeze.

To start using Live Manuscript, simply open one of your videos in Studio1 and click the "Open Live Manuscript" button.

Here's a quick video showcasing how to use Live Manuscript:

Besides creating new manuscripts, Live Manuscript is also handy to use when troubleshooting existing videos. Say for example that one of your button labels have changed and a video rendering fails. Open Live Manuscript and click the play icon. Studio1 will perform each action while you get to watch what happens live. Once it hits the failed action, you can inspect what the problem is.

Microphone voice-over recordings

Today we're adding support for recording your own voice-over directly in Studio1 using your microphone.

How to use

The Change Voice Dialog now has three tabs in the top:

  • Synthetic voice. The one you already know.
  • Microphone recording. Allows you to record audio using your microphone.
  • Upload recording. Allows you to upload files from your computer.

Change voice dialog

After you pick "Microhone recording", a microphone button appears below the voice-over textarea. Click it to start recording your voice. Click the stop button when you're done.

Microphone button

Studio1 will automatically trim silence at the beginning and end of your recording. This makes it easy to match your voice-over with the actions performed in the video.

Preview

Here's a Studio1 video showing how to use microphone recordings (we - of course - used microphone recordings to create it):

Microphone recording tips

  • Use a good microphone. Laptop microphones are not good enough. We can recommend the Blue Yeti - that's what the above video was recorded with.
  • Make sure you're in a quiet room.
  • Make sure the room doesn't have too much echo.
  • Make sure you're not making any small sounds in the background, e.g. hitting the table or moving your chair.