Add this javascript code anywhere in your page. Either in the '<head>' or after the opening "<body>" tag:

    /** Start Deckchair Library */
    window.dcAsyncInit = function () {
        window.deckchair_com.config = {
            version: '1',
            urlMode: '#',
            urlKey: 'webcam'
    (function (d, s, id) {
        var js, djs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {
        js = d.createElement(s); = id;
        js.src = "//";
        djs.parentNode.insertBefore(js, djs);
    }(document, 'script', 'deckchair-jssdk'));
    /** End Deckchair Library */

The javascript code above will look for elements with a specific data attribute "data-deckchair-embed". The contents of these tags will be hidden and the Deckchair "iframe" based widget appended.

When specifying the size of the embed tag we recommend you only specify a width, the height will be calculated automatically to provide the best aspect ratio. By default the width will be 100% of the containing area.

<div data-deckchair-embed="deckchair"
  <!-- This is hidden when the Deckchair Widget is loaded, we leave this link here for users who don't have Javascript enabled, and Search Engines -->
    <a href="" target="_blank">Tower Bridge, London, UK - Live Webcam</a>

Advanced Configuration

The Deckchair embed tag supports a number of configurable parameters...


Configurable "Call To Action" URL - [data-deckchair-cta-href]

You can override the link for the Call To Action button on your camera using this property "data-deckchair-cta-href":

<div data-deckchair-embed="deckchair"
    <a href="" target="_blank">Tower Bridge, London, UK - Live Webcam</a>