You can customize the capture e-mails sent by Blit with different templates, as well as a different sender and reply.

From and Reply To

Under Account, there are two fields that you can use to customize the e-mail. The first is the From field. It will change the sender that is displayed in your e-mail client. You can change it to any value. For example, if you use My Company, it will look like this in Gmail:

The second field, Reply To, is the e-mail address used when a user wants to reply to the e-mail. It should be a valid e-mail address.

Choose a template

You can choose between two templates: Default and Minimal. Click on preview to see what the e-mail subject and content will look like for each of them.

You can upload screenshots directly to your cloud storage through Apps. The Slack App allows you to receive your captures in a Slack channel.

To start sending captures as Slack notifications, follow these steps:

1. Create an App in Slack.
2. Create a Slack App in Blitapp.
3. Add your new App to any capture.

Create an App in Slack

First, you will need to create an Incoming WebHooks App in Slack.

Click on this link to create a new Slack App. Enter the following information:

• App Name: Choose a custom name, for example, Blitapp.
• Development Slack Workspace: Use the workspace where the App should be active.

Then, choose Incoming Webhooks. Make sure you Activate Incoming Webhooks.

Blitapp takes all captures in high resolutions, up to 2,000px by 20,000px. Full-page screenshots usually don’t fit on a screen. Therefore, your web browser scales down the image to fit the screen. A full-page capture would look like this in your browser – a small image with a plain black background:

With the automation steps, you can now log in to a website and take multiple screenshots of different pages. The automation steps can handle complex login over numerous pages.

In this post, we’ll show you how to log in to a website, Browshot, and take a screenshot after authentication.

To log in from the home page of https://browshot.com/, a user must click on Login. This displays a login form where the user has to enter his username and password. Then the user clicks on “Login” to access his dashboard.

Find the element to interact with

We'll build the different steps to log in; then, we'll navigate to a separate page in the dashboard and take screenshots. The hardest part of the process is to get the identifier (called CSS selector) for each element we want to interact with: the button to click on, the input box in which to enter our username, etc. We need to use the Developer Tools from your web browser to find this identifier. Press F12 to open the Developer Tools. Navigate to https://browshot.com/. In the Developer Tools, click on the mouse cursor in the top left corner (highlighted in red below). more...

With Blitapp, you can inject JavaScript into any page to log in, click on elements, etc. To expand the range of possible interactions and simplify them, we have added automation steps.

On this blog, we will post several examples using automation steps, including:

• Complex login to a website
• Log in to a site and take screenshots of multiple pages
• Take screenshots of a carousel with all the elements
• Select multiple elements on a page

Automation steps

The automation steps describe the list of commands that the browser must execute. Unlike the injected JavaScript, these steps can be carried out over multiple pages and generate multiple screenshots. Each step contains:

• a command:
  • type: type text, like a username or password
  • click: click on an element
  • javascript: execute and JavaScript
  • sleep: wait for a number of seconds
  • navigate: navigate to a new URL
  • screenshot: take a screenshot of the current screen, page, or specific element
• element (optional): a CSS selector targeted by the command, for example, the input field to type a username, the element to click on, etc.
• value (optional): the number of seconds to sleep, the text to type, the URL to navigate to or the JavaScript code to execute