Urlbox/Screenshots

Capture highly accurate webpage screenshots of any site using Urlbox.io in PHP

This package uses the Urlbox.io screenshot as a service to generate website screenshots.

Installation

This package can be installed through Composer.

composer require urlbox/screenshots

Laravel Setup

When using Laravel, if you are using a version pre v5.5 you will need to include the Service Provider manually:

// app/config/app.php

'providers' => [
    // ...
    'Urlbox\Screenshots\UrlboxProvider'
];

Setup your API keys:

// config/services.php

'urlbox' => [
    'key'    => env('URLBOX_KEY'),
    'secret' => env('URLBOX_SECRET'),
    'webhook_secret' => env('URLBOX_WEBHOOK_SECRET'),
];

and in your .env file:

# URLBOX
URLBOX_KEY=YOUR_URLBOX_KEY
URLBOX_SECRET=YOUR_URLBOX_SECRET
URLBOX_WEBHOOK_SECRET=YOUR_URLBOX_WEBHOOK_SECRET

You can find your API Credentials and Webhook Secret here

Usage

You will need a Urlbox account to use this package. Please signup here and get your API Key and Secret from the Urlbox dashboard once you have logged in.

Here is a sample call to generate a Urlbox screenshot URL:

    use Urlbox\Screenshots\Urlbox;
    $urlbox = Urlbox::fromCredentials( 'API_KEY', 'API_SECRET' );
    
    $options = [
        // only required option is a url:
        'url' => 'example.com',
        
        // specify any other options to augment the screenshot...
        'width' => 1280,
        'height' => 1024,
    ];
    
    // Create the Urlbox URL
    $urlboxUrl = $urlbox->generateSignedUrl( $options );
    // $urlboxUrl is now 'https://api.urlbox.io/v1/API_KEY/TOKEN/png?url=example.com'
    
    // Generate a screenshot by loading the Urlbox URL in an img tag:
    echo '<img src="' . $urlboxUrl . '" alt="Test screenshot generated by Urlbox">'

If you're using Laravel and have set up the service provider, you can use the Facade provided:

use Urlbox\Screenshots\Facades\Urlbox;

$options = [ 'url' => 'example.com' ];
$urlboxUrl = Urlbox::generateUrl( $options );
// $urlboxUrl is now 'https://api.urlbox.io/v1/API_KEY/TOKEN/png?url=example.com'

You can now use the result ($urlboxUrl) by placing it inside an <img/> tag as the src parameter.

When you load the image, a screenshot of example.com will be returned.

Options

You can find the full list of available options within the docs. Below is a list of the most commonly used options:

Option	Default	Description
url	-	The URL of the website you want to screenshot (Required)
width	1280	Viewport width of the browser in pixels
height	1024	Viewport height of the browser in pixels
selector	-	Take a screenshot of the element that matches this selector
thumb_width	-	Width in pixels of the generated thumbnail, leave off for full-size screenshot
format	png	Image format of the resulting screenshot image (png or jpg)
user_agent	-	User-Agent string used to emulate a particular client.
cookie	-	Set a cookie value before taking a screenshot. E.g. OptIn=true. Can be set multiple times to set more than one cookie.
delay	-	Amount of time to wait in milliseconds before urlbox takes the screenshot
wait_for	-	Waits for the element specified by this selector to be visible on the page before taking a screenshot
timeout	30000	Amount of time to wait in milliseconds for the website at url to respond
full_page	false	Specify whether to capture the full-length of the website
flash	false	Enable the flash plugin for flash using websites
force	false	Take a fresh screenshot instead of getting a cached version
ttl	2592000 (30 days)	Short for 'time to live'. Number of seconds to keep a screenshot in the cache. Note the default is also the maximum value for this option.
quality	80	JPEG only - image quality of resulting screenshot (0-100)
disable_js	false	Turn off javascript on target url to prevent popups
retina	false	Take a 'retina' or high definition screenshot equivalent to setting a device pixel ratio of 2.0 or @2x. Please note that retina screenshots will be double the normal dimensions and will normally take slightly longer to process due to the much bigger image size.
click	-	Element selector that is clicked before taking a screenshot e.g. #clickme would click the element with id="clickme"
hover	-	Element selector that is hovered before taking a screenshot e.g. #hoverme would hover over the element with id="hoverme"
bg_color	-	Hex code or css color string. Some websites don't set a body background colour, and will show up as transparent backgrounds with PNG or black when using JPG. Use this setting to set a background colour. If the website explicitly sets a transparent background on the html or body elements, this setting will be overridden.
crop_width	-	Crop the width of the screenshot to this size in pixels
hide_selector	-	Hides all elements that match the element selector by setting their style to display:none !important;. Useful for hiding popups.
highlight	-	Word to highlight on the page before capturing a screenshot
highlightfg	white	Text color of the highlighted word
highlightbg	red	Background color of the highlighted word
use_s3	false	Save the screenshot directly to the S3 bucket configured on your account
webhook_url	-	Urlbox will send a POST request back to the supplied URL with data about the screenshot in JSON format once it has completed rendering.

---

Other implementations

• Node.js

Contributing

We are open to pull requests.

Security

If you discover any security related issues, please email services@urlbox.io instead of using the issue tracker.

About Urlbox

Urlbox is a premium Screenshot as a Service API. It lets you render highly accurate screenshots of webpages and display them anywhere you like. Urlbox.io.

License

The MIT License (MIT).